divボックスの作り方

CSS中級編

「文字デコ編」を理解された方であれば、基本的にスタイルシートは、ボーダーとかを使って「箱」を作り、その中の文字を間接的に飾る…つまり、見やすくする、見栄えを良くすることができるツールだと言うことが分かったと思います。
　スタイルシートでは、とにかく「箱」が基本になってきます。
　この箱を組み合わせることによって、記事ブロックや、サイドバー、ヘッダーなんかを作っています。

　そう、「文字デコ」をより応用したのが、ブログ全体の形と言うわけです。そして、「文字デコ」でも出てきた「divタグ」というのを応用すれば、ブログを１から作り上げることもできてしまうというわけなんですよ。

divボックスを自由に設定

　箱を作るときの基本は、高さと幅の概念です。

	命令文（プロパティ）	数値
横幅	width :	～ px ;
高さ	height :	～ px ;

　タグの作り方は…

見本
<div style="width:300px;heifht:80px;background:#ced;border:1px solid #a7e;">文字やボックス</div>
文字やボックス

　「style=""」で中にスタイルシートの命令文を書けば、見本の箱の完成です。分り易く、バックグランドカラーとボーダーも一緒に指定しています。
　まずは、復習も兼ねて、これを「HTMLファイル用」と「CSSファイル用」に分ける、「旗印（クラス）」を使って、この出来たタグを分解しましょう。旗印・クラスは…適当に「sample-box」とでもしておきましょう。

HTML	CSS
<div class="sample-box"> 文字やボックス </div>	.sample-box{ 　　　　　　　　width:300px; 　　　　　　　　height:80px; 　　　　　　　　background:#ced; 　　　　　　　　border:1px solid #a7e; 　　　　　　　　}