PR
購入履歴
カレンダー
カテゴリ
ボックスを
日記でボックスを並べて使ってみましょう
4個のボックスを並べて配置してみます
日記は自動改行となるので注意が必要です
1・高さの違う4個のボックスを2列に配置してみます
幅 250 高さ 450のボックスの中に2個ずつ配置します
左側 高さ150と300 右側 高さ200と250
HTMLタグは
<CENTER>
<P style="width:600;height:550;background-color:#ccccff;text-align:center;padding:50 0;"><B style="width:250;height:450;color:#fff5ee;"><B style="width:250;height:150;background-color:green;"><BR>ボックス1<BR>幅 250<BR>高さ150<BR></B><B style="width:250;height:300;background-color:fuchsia;"><BR>ボックス2<BR>幅 250<BR>高さ300<BR>
</B></B><B style="width:250;height:450;color:#fff5ee;"><B style="width:250;height:200;background-color:gray;"><BR>ボックス3<BR>幅 250<BR>高さ200<BR></B><B style="width:250;height:250;background-color:teal;"><BR>ボックス4<BR>幅 250<BR>高さ250<BR></B></B>
</P>
</CENTER>
ボックスの配置は下のようになります
ボックス1
幅 250
高さ150
ボックス2
幅 250
高さ300
ボックス3
幅 250
高さ200
ボックス4
幅 250
高さ250
幅 300 高さ 450のボックスの中に2個ずつ配置します
左側 高さ150と300 右側 高さ200と250
HTMLタグは
<CENTER>
<P style="width:600;height:550;background-color:#ccccff;text-align:center;padding:50 0;"><B style="width:300;height:450;color:#fff5ee;"><B style="width:250;height:150;background-color:green;"><BR>ボックス1<BR>幅 250<BR>高さ150<BR></B><B style="width:250;height:300;background-color:fuchsia;"><BR>ボックス2<BR>幅 250<BR>高さ300<BR>
</B></B><B style="width:300;height:450;color:#fff5ee;"><B style="width:250;height:200;background-color:gray;"><BR>ボックス3<BR>幅 250<BR>高さ200<BR></B><B style="width:250;height:250;background-color:teal;"><BR>ボックス4<BR>幅 250<BR>高さ250<BR></B></B>
</P>
</CENTER>
ボックスの配置は下のようになります
ボックス1
幅 250
高さ150
ボックス2
幅 250
高さ300
ボックス3
幅 250
高さ200
ボックス4
幅 250
高さ250
ボックスについては こちら
を参考に