Web デザイン セミナー
第14回 9月17日(月曜日)

<div style="width:250px;background-color:red">12</div>
12
↑ 何も中に無いと 色は表示されません。

background-color:red 背景色赤
width:250px; 幅 250px;
height:250px; 横 250px;
float:left; 次のものが右側に回りこむ
margin:5px; 周囲に5ピクセル
padding:5px; 内側に5ピクセルの空
赤いよ

<div style="width:250px;height:250px;float:left;margin:5px;background-color:red;padding:5px">赤いよ</div>

緑だよ

<div style="width:250px;height:250px;float:left;margin:5px;background-color:#33ff33;padding:5px">緑だよ</div>

↑ クリアーをかけて回り込みを解除 <div style="clear:left"></div>


aka
緑だよ
↑これはさらに divで包んでいます。

<div style="width:540px;height:270px;padding:5px;background-color:#cccccc"> ←ここが包んでるところ
<div style="width:250px;height:250px;float:left;margin:5px;background-color:red;padding:5px">aka</div>
<div style="width:250px;height:250px;float:left;margin:5px;background-color:#33ff33;padding:5px">緑だよ</div>
</div>包んでるの終わり
<div style="clear:left"></div>

このように入れ子にすることができます。

さらにこのボックスを中央にする方法は…

包んでいるboxに margin-left:auto; margin-right;auto; を入れます。


aka
緑だよ
このdivの背景に画像を使うことはgoogle site ではできませんでした。 ページそのものにしか背景を入れられないようです。 失礼しました。



Comments