さて、それでは、定義した枠のメインブロック（緑色の枠）内にコンテンツを詰め込んでまいりましょう。
と言いましても、ここにそれぞれの小さなコンテンツ（パーツと呼ぶことにしましょう）を並べる手法も、枠を定義したdivタグを使えばすっきりと行えます。
つまり、ここでも「矩形を並べていく」という考えは変わらないということです。
そういう目で、様々なサイトをご覧になってみてください。
例えばニュースサイト等。
枠線は見えないかもしれませんが、それぞれの目的毎に分類されたコンテンツが、矩形にまとめられて整然と並んでいると思います。
表示されたブラウザで、「ソースを表示する」という機能で、htmlソースを覗いてみてください。
どんな風にdivタグが使われているか、何となく分かると思います。
（Windowsであれば、右クリックで「ページのソース表示」などで表示されます。）
htmlは、その内容が全てオープンにされているので、気に入ったページがあれば、その設計内容を「ソース表示」させて参考にされればいいと思います。（但し、css（スタイルシート）が別ファイルで設置してある場合が多いので、その際にはURLで追う必要があります。）
パーツを並べていく場合には、どの様にレイアウトするかを決めなければなりません。
マンガのコマ割りの様なものです。
その際に、枠間の隙間、枠内での隙間をきちんと設計する必要があります。
そこで必要となるのが、marginとpaddingです。
marginは、枠の外側の隙間で、上下左右それぞれを指定出来ます。
paddingは、枠の内側の隙間で、同じく上下左右それぞれを指定出来ます。
そして、ブロックを決めた時の様に、横幅と縦幅のサイズ指定が出来ます。
この関係を図示します。
一番内側が、枠幅（横幅、縦幅）、それから内側の隙間、線幅、外側の隙間という順番に定義されています。
注意すべき点は、横幅（width）、縦幅（height）は、内側の隙間のさらに内側ということです。
これ、どうしても間違えてしまいます（自分の経験）。
枠線の外側に間違えてしまうんです。
それでは、線幅が3pxで黒、枠幅が100px、枠高さが80px、外側の隙間が20px、内側の隙間が10pxの枠を作りましょう。
border:solid 3px black
width:100px
height:80px
margin:20px
padding:10px
これらをセミコロンで繋げて、style=" "の中に詰め込みます。
左詰め指定(float:left)を加えておきます。
style="border:solid 3px black;width:100px;height:80px;margin:20px;padding:10px;float:left"
これをdivタグに設置します。
<div style="border:solid 3px black;width:100px;height:80px;margin:20px;padding:10px;float:left">
</div>
これを１個のパーツとして、メインブロックの中に、４個設置してみましょう。
こんな表示になります。
全部が左寄りで並んで表示されていきますが、４個目のパーツがブロックに入りきらずに２行目に表示されました。
この様に、float:leftを指定して並べていけば、パーツはきっちりと並んで表示されていくので世話がいりません。
ここでひとつ注意点です。
外側の隙間(margin)を使った場合、隣り合うパーツのmargin同士が相殺される場合とされない場合があります。
場合があるというのは、ブラウザによって違うということです。
どのブラウザがどうという説明はここではしません。
何故かというと、バグが含まれているからです。特にＩＥのバグは中々修正されません。
こういう事があると、さらに面倒くさくなってしまいますよね。
私がそうでした。バグとは何たることか。それでいいのか、と怒ったデザイナーの方がどれだけ多いことか。
バグがあるとは言え、ＩＥのシェアが高いのも事実であります。
それで、ひとつの工夫なのですが、私はmarginを使うのをやめました。
で、どうしたかというと、divを二重にして、paddingを二つ使うというやり方です。
<div style="padding:20px;float:left">
<div style="border:solid 3px black;width:100px;height:80px;padding:10px;">
</div>
</div>
つまり、外側に枠線の無いdivを設置し、そのdivにおけるpaddigが内側のdivのmarginの代わりになる訳です。
こうすれば、外側の隙間が相殺されることがなくなり、ブラウザによる差が解消されます。
今日はここまで！
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら