レイアウトボックス
Web ページでレイアウトをするためには、レイアウトボックスという枠組みを作成する。
レイアウトボックス自身の配置や、レイアウトボックス内の配置を指定することで、Webページ内に文章や画像を配置して行く。
レイアウトボックスは、HTML の div タグで作成する。
そして、レイアウトボックスの横幅や高さ、配置などを CSS で設定する。
HTMLの記述法
レイアウトボックスは、HTMLの div タグで作成する。
そして、レイアウトボックスでは主に id 属性でスタイルを指定する。
id 属性も class 属性と同じように、任意のスタイル名を指定出来る。
<div id="box"></div>CSSの記述法
CSS の記述はまず、div タグの id 属性で指定したセレクタを記述する。
class 属性のときはドット記号「.」だったが、id 属性で指定したセレクタは「#」記号で記述する。
それ以外の記述は今までと同じように、レイアウトボックスの大きさや色をCSS で指定する。
div#box {
width: 400px;
height: 200px;
background-color: pink;
}id属性とclass属性の違い
id 属性と class 属性の違いについて説明する。
id 属性は、 HTMLファイルの中で同じ値を重複して記述出来ないが、class 属性の場合は、同じ値を何度でも記述出来る。
idは、英語の identification、つまり「身分」という意味がある。
id 属性で指定した値は、HTML ファイルの中で固有の値となり、人間の体や飛行機・船・車等で例えると骨格や骨組みとして使用する。
一方 class 属性で指定した値は、見栄えの装飾として使用することから、同じ値を重複して使用出来る。
どちらの属性を使うか迷った時は、Web ページ中で 1度しか適用しないような枠組み
の作成には id 属性で値を設定し、Web ページ中の見出しや本文などの装飾やレイアウトのように同じ値を何度でも使用する場合には、class 属性で値を設定すると良い。
レイアウトボックスの余白設定
レイアウトボックスを作成して、余白の設定をしてみる。
HTML では、div タグを記述して、2 個のレイアウトボックスを作成する。
id 属性は、それぞれ box1, box2 とする。
レイアウトボックス内の文章はまったく同一のもので構わない。
このレイアウトボックスの余白設定を変更して行く。
<div id="box1"><p>ここには文章が入ります。ここには文章が入ります。ここには文章が入ります。・・・
</p></div>
<div id="box2"><p>ここには文章が入ります。ここには文章が入ります。
ここには文章が入ります。・・・
</p></div>続いて、CSS の記述。
box1 は、外側の余白を 0、内側の余白を 10px に設定する。
box2は、外側の余白を 10px、内側の余白を 30px に設定する。
高さは設定せずに、文章の成り行きに任せる。
また、余白の比較を分かりやすくするため、body の余白を 0 に設定しておく。
なお、数値が 0 のときに限り、単位は省略出来る。
単位を付けても問題はないが、特に意味を持たないので省略する方が一般的である。
div#box1 {
margin: 0;
padding: 10px;
width: 300px;
background-color: pink; }
div#box2 {
margin: 10px;
padding: 30px;
width: 300px;
background-color: lightblue;
}
body { margin: 0; padding: 0; }レイアウトボックスの枠線設定
レイアウトボックスの枠線を色々なスタイルで設定してみる。
div タグでレイアウトボックスを 3 個作成する。
id 属性では、box1, box2, box3 と指定しておく。
div タグの中は何も記述しなくても構わない。
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>領域の枠線は、CSS の border プロパティで設定する。
border プロパティは、値の指定方法が少し複雑である。
1 番目に線のスタイル、そして半角スペースを入れて線の幅、更に半角スペースを入れて、線の色を指定する。
この指定方法の通りに、box1 は枠線を実線に、幅を 1px に設定する。
box2 は枠線を点線に、幅を 1px に設定する。
box3は、枠線を実線に、幅を 2px に、色をオレンジに設定する。
div#box1 {
width: 300px; height: 30px;
border: solid 1px black;
}
div#box2 {
width: 300px; height: 30px;
border: dotted 1px black;
}
div#box3 {
width: 300px; height: 30px;
border: solid 2px orange;
}レイアウトボックスに上下左右に独立した枠線を設定
border プロパティは、margin プロパティや padding プロパティと同じように、上下左右を個別に指定することも出来る。
その場合にはやはり、top, left, right, bottom と言った指定をプロパティ名に追加する。
上下左右の枠線に、それぞれ別々の色を設定してみた。
<div id="box"></div>div#box {
width: 300px; height: 40px;
border-top: solid 8px red;
border-left: solid 8px blue;
border-right: solid 8px green;
border-bottom: solid 8px orange;
}