| | |  ボックスの重要性
| | | |
| | | | どんなに素晴らしい画像・フォント・文章も、この「ボックス」の構造を理解していないとデザインが崩れたり文字が重なったりします。下図はボックスの基本的な構造です。単一ブラウザでも理解可能ですが、より実践的に理解するには複数のブラウザでの表示確認も必要です。 | | | |
| | | ボックスの構造と名称 | | | |
| | | | content（内容）
テキストや画像などの要素が表示される領域です。 | | | |
| | | | padding（内容を含めた周辺領域）
上図では見やすくする目的で「content」と色を変えていますが、「padding」は外枠ではなく「content」も含む領域です。例えば<p>要素の背景色で青を指定すれば「padding」及び「content」共に背景色は青になります。 | | | |
| | | | border（枠線）
要素の周辺に表示可能な枠線の部分です。枠線ですから「padding」及び「content」を含みません。ホームページ以外でも表の枠線として、日常見かけることが多いので比較的ご理解いただけると思います。 | | | |
| | | | margin（一番外側の余白）
ボックスス構造で一番外側の領域になります。要素に背景色を指定してもこの部分には適用されず常に透明です。透明ですから外側のボックス構造の影響を受けます。 | | | |
| | | ボックスの注意事項 | | | |
| | | | 上記のようにホームページ作成では、常にこのボックスの影響を受けています。また、この構造を二重三重にすることでデザインを工夫することも可能ですが、一歩誤ると収集がつかなくなります。 | | | |
| | | | 一般的に大きなボックスは、上記のプロパティを「0」に設定した方が設計が楽で、空間や枠線などが必要な場面でＣＳＳの設定を生かす方が現実的です。逆の方法よりは広く一般的に利用されている手法です。 | | | |
| | | | ボックスはブラウザによって表示結果が異なる大きな原因となるので、ＣＳＳで修正する必要があります。ＷＷＷ標準化過度期の現在では、ＨＴＭＬとの相互設定に依存する部分がありＨＴＭＬでも非推奨要素を記述しているのが一般的です。また利用するＨＴＭＬ要素・属性によってはブラウザ別の表示を同一にできない場合があります。 | | | |
| 
