ここで、テンプレートをデザインする際に頻繁に参照するcssのレイアウトに関するプロパティについて整理しておこうと思います。
htmlとcssを使って、内容を表示する際、なにもないところに枠を配置した後、その中に、文字列や画像などの要素を配置するスタイルでレイアウトを考える場面が多いです。そのため、その最初の枠を配置する概念をきちんと理解しておかないと思ったとおりにレイアウトすることが難しくなります。
四角の枠が描かれた紙に、文章や絵を記入することを考えると理解しやすいかもしれません。
紙に相当するのがマージン領域です。そして、枠に相当するのがボーダーです。マージン領域とパティング領域の境界です。領域に相当するのは、枠の太さです。枠と中に記述する文章や絵の隙間に相当するのがパディング領域です。そして、記述する文章や絵に相当するのがコンテンツ領域 に相当します。
ボックス・モデル
cssでスタイルを指定する場合、それぞれの要素は、ボックスと呼ばれる四角い領域で表されます。この領域を囲む枠線に、色や位置を指定してスタイルを変更します。
コンテンツの大きさ、マージン、ボーダー、パディングを指定して、ボックスの大きさや枠線の位置、コンテンツの大きさや位置を指定します。
ボックス・モデル
ボックス・モデル内の重ね合わせ順序
コンテンツが、一番手前に表示され、枠線、背景画像、背景色の順で重ね合わせられます。
- コンテンツ
- border（枠線）
- 背景画像
- 背景色
要素の大きさを指定する
コンテンツ領域を基準（※box-sizingプロパティの値が、content-boxのとき（デフォルト））として考えその大きさをwidthとhightプロパティで指定します。
box-sizingプロパティの値が、border-boxのときは、borderの大きさ（border + padding + コンテンツの大きさ）が、widthとhightプロパティの値になります。
- width
- hight
cssで使用される長さの単位
| 単位 | 意味 |
|---|---|
| in | インチ(1インチは、約2.54cm) |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント(1ポイントは、72分の１インチ) |
| pc | パイカは、12ポイント=６分の１インチ |
| em | font-sizeプロパティに対する割合 |
| ex | font-sizeプロパティに設定されているフォントの小文字のxの高さに対する割合 |
| px | ピクセル数 |
| % | 親要素のフォントサイズに対するパーセンテージ |
| rem | root em。文書のルート要素、つまりhtml要素のfont-sizeに対する割合 (css3から導入) |
margin
周囲の要素との間の余白を表します。
- margin-top:
- 上
- margin-bottom:
- 下
- margin-left:
- 左
- margin-right:
- 右
- margin: 0;
- 上下左右
- margin: 0 0;
- 上下 左右
- margin: 0 0 0;
- 上 左右 下
- margin: 0 0 0 0;
- 上 右 下 左
padding
要素内に含まれる文字などの内部要素の外周(borderプロパティで枠線を付けたときは、その内側)からの距離です。
- padding-top:
- 上
- padding-bottom:
- 下
- padding-left:
- 左
- padding-right:
- 右
- padding: 0;
- 上下左右
- padding: 0 0;
- 上下 左右
- padding: 0 0 0;
- 上 左右 下
- padding: 0 0 0 0;
- 上 右 下 左
位置合わせ
テキストなどのインライン要素に対する位置合わせ
左右の位置
| 値 | 意味 |
|---|---|
| left（初期値） | 左揃え |
| center | 中央揃え |
| right | 右揃え |
| justify | 均等割付 |
縦方向の位置
| 値 | 意味 |
|---|---|
| 単位付きの数値 | 親要素のベースラインからの距離 |
| % | 親要素のベースラインからの距離をline-heightプロパティの値に対する割合で指定する |
| baseline(初期値) | 親要素のフォントのベースライン |
| bottom | 下部に配置 |
| middle | 中央に配置 |
| sub | 下付き文字の位置 |
| super | 上付き文字の位置 |
| text-bottom | 下端を親要素のテキストの下端に合わせる |
| text-top | 上端を親要素のテキストの上端に合わせる |
| top | 上部に配置 |
ブロックレベル要素に対する位置合わせ
margin-left: auto;
margin-right: auto;一緒に使用して、中央揃えにします。
要素を任意の位置に配置する
position:
positionプロパティをabsoluteあるいはrelativeに設定します。
| 値 | 意味 |
|---|---|
| static(初期値) | 通常の配置 |
| relative | 相対位置指定 |
| absolute | 絶対位置指定 |
| fixed | 絶対位置、かつスクロール時も固定 |
その後、top、left、width、heightプロパティで位置を指定します。
重ね合わせ順序
z-index:
整数値を指定します。値が大きいものほど手前に表示されます。
テキストの回り込み
float:
画像や表、テキストなどを並べて表示するために使用します。
| 整数値 | 意味 |
|---|---|
| left | 左に配置し、続く要素が右側に回り込む |
| right | 右に配置し、続く要素が左側に回り込む |
| none(既定値) | 回り込みなし |
回り込みを解除する
clear:
設定したfloteプロパティが、「right」のときは、「right」か「both」、「left」のときは、「left」か「both」を指定します。
表示・非表示を切り替える
visiblity:
visiblityプロパティを使用すると表示・非表示を切り替えることができます。非表示にしてもレイアウトに影響を及ぼします。
| 値 | 意味 |
|---|---|
| visible（初期値） | 可視 |
| hidden | 不可視 |
| collapse | テーブルの行、列などに使用する。折りたたんで表示 |
表示を抑制する
display:
表示も配置もしない設定にできます。
| 値 | 意味 |
|---|---|
| inline | インライン要素として表示 |
| block | ブロックレベル要素として表示 |
| list-Item | リスト項目として表示 |
| none | 表示も配置もしない |
