お取り寄せいいもの見つけたよ！

ボックスを
並べてみよう３♪


日記でボックスを並べて使ってみましょう

４つのボックスを並べて配置してみます

上下左右の調整はマージンを使うと便利です

日記は自動改行となるので注意が必要です

日記を標準の幅で表示する場合

全体の幅を５００程度にしてください


幅　１５０　高さ１５０・２００・２５０・３００　のボックスで配置してみます

１・４つのボックスを並べて配置してみます

　　高さは３００となり　ボックスは下揃えで配置されます


ＨＴＭＬタグは

<P style="width:600;height:300;"><B style="width:150;height:150;background-color:green;"><BR>幅　１５０<BR>高さ１５０<BR>
</B><B style="width:150;height:200;background-color:fuchsia;"><BR>幅　１５０<BR>高さ２００<BR>
</B><B style="width:150;height:250;background-color:gray;"><BR>幅　１５０<BR>高さ２５０<BR>
</B><B style="width:150;height:300;background-color:teal;"><BR>幅　１５０<BR>高さ３００<BR>
</B></P>



ボックスの配置は下のようになります


幅　１５０
高さ１５０


幅　１５０
高さ２００


幅　１５０
高さ２５０


幅　１５０
高さ３００



２・　ボックスを上揃えで配置してみましょう

　　下側にマージンを指定します

　　マージンを含めた高さは３００となります

　　マージン部分に色をつけてあります


ＨＴＭＬタグは

<P style="width:600;height:300;"><B style="width:150;height:150;margin-bottom:150;background-color:green;"><BR>幅　１５０<BR>高さ１５０<BR>下側のマージン<BR>　１５０<BR>
</B><B style="width:150;height:200;margin-bottom:100;background-color:fuchsia;"><BR>幅　１５０<BR>高さ２００<BR>下側のマージン<BR>　１００<BR>
</B><B style="width:150;height:250;margin-bottom:50;background-color:gray;"><BR>幅　１５０<BR>高さ２５０<BR>下側のマージン<BR>　　５０<BR>
</B><B style="width:150;height:300;background-color:teal;"><BR>幅　１５０<BR>高さ３００<BR>
</B></P>



ボックスの配置は下のようになります


幅　１５０
高さ１５０
下側のマージン
　１５０


幅　１５０
高さ２００
下側のマージン
　１００


幅　１５０
高さ２５０
下側のマージン
　　５０


幅　１５０
高さ３００



　　　マージンについては こちら を参考に