ボックスとテーブル
ボックスのスタイル設定
| 項目 | 属性 | 値の候補 | ||
| ボックス領域の幅を設定 | width | 単位指定 | ||
| ボックス領域の高さを設定 | height | 単位指定 | ||
| ボーダー(枠線)の色を指定 | border-color | 色名か#rrggbb方式 | ||
| ボーダーの種類を指定 | border-sytle |
|
||
| ボーダーの幅を指定 | border-width | thin 細い medium 普通 thick 太い もしくは単位指定 |
||
| ボーダーの設定をまとめたい | border | 一括指定 ボーダーの種類 幅 色について一括指定できます 例: P{ border: double thin #ff0000 } 部分指定
ボーダーの種類 幅 色について部分指定できます 例: P{ border-top: double thin #ff0000 } |
||
| マージン 要素に対する余白を指定します その要素のボーダーラインの外側に設定されます マージン領域は常に透明です |
margin |
一括指定 P{margin: 1em}上下左右：1em P{margin: 1em 1.5em}上下：左右の順 P{margin: 1em 1.5em 2em} 上：左右：下の順 P{margin: 1em 1.5em 1.7em 2em}上：右：下：左の順 部分指定(部分的に初期値以外にしたいとき)
|
||
| パディング 要素に対する余白を指定します その要素のボーダーラインの内側に設定されます パディング領域には要素自身と同じ背景です |
padding |
一括指定 P{padding: 1em}上下左右：1em P{padding: 1em 1.5em}上下：左右の順 P{padding: 1em 1.5em 2em} 上：左右：下の順 P{padding: 1em 1.5em 1.7em 2em}上：右：下：左の順 部分指定(部分的に初期値以外にしたいとき)
|
||
| 内容があふれる場合の処理の指定 ボックスの幅や高さを指定した場合にコンテンツが領域に収まりきれない場合 |
overflow | visible 領域指定を無視してすべて表示する scroll 縦横にスクロールバーをつける hidden 領域指定を守り 収まらない部分を表示しない auto ブラウザが自動的に処理 |
テーブルのスタイル設定
| 項目 | 属性 | 値の候補 |
| キャプション (タイトル)の位置を指定 |
caption-side | top テーブルの上部に表示(デフォルト) bottom テーブルの下部に表示 |
| セル間の枠線の処理 | border-collapse | collapse 隣り合う枠線が重なる separate 隣り合う枠線がそれぞれ表示 |
| セルの間隔を調整 | border-spacing | 単位指定 数字がひとつのとき 前後左右 数字がふたつのとき 上下、左右 (数字は半角スペースで区切る) |
| テーブルの表示を早くしたい | table-layout | fixed テーブルの１行目のデータを読み込んだ時点でレイアウトを決定して表示 width属性でセル幅が決められていないと均等表示する auto テーブル全体を読み込んでからレイアウトを決定して表示するので時間がかかる (デフォルト) |