【初心者ノート】WEBデザイン HTML CSS ボックスの大きさ

htmlのアイキャッチ

前回までの記事、「WEBデザイン HTML CSSのボックスモデル その1」と「WEBデザイン HTML CSSのボックスモデル その2」でボックスモデルの説明をしました。

今回は、ブラウザ上に配置されたHTML各要素ボックスに対し、スタイルシートでの大きさに関してまとめてみたいと思います。

ボックスの大きさ指定

HTML要素のボックスには大きさがあり、外余白エリア、境界線エリア、内余白エリア、コンテンツ(内容)の格納エリアがあります。

この4つのエリアは、スタイルシートでそれぞれ大きさを指定することができます。

HTML、CSSボックスモデルの1つのボックスのイメージ

スタイルシート(CSS)の記述例

記述例を使って、スタイルシートによるボックスの大きさの設定について説明します。
スタイルシートの詳細な仕様は「HTMLクイック・リファレンス」などのサイトを参照してください。

この記述例では、次のように3つ要素を使います。

1つarticle要素の中に、2つdiv要素があります。
つまり1つボックスの中に2つボックスが含まれる形です。

HTML、CSSのボックスモデルを説明するイラスト

HTMLは次のような内容です。

幅(width)の設定

まずはdivボックスの幅を700ピクセルにしてみましょう。

CSSは次のような内容です。

※説明のためのブラウザ表示の都合上 body セレクタを記述しています。

上記HTMLとCSSのボックスのイメージとブラウザの表示イメージです。

HTML、CSSのボックスモデルを説明するイラスト

ブラウザの画面には700ピクセルの幅divボックスの中に文章が配置されています。
CSSではボックスの高さ(height)を指定していませんので、ブラウザはボックスの中に文章を配置するために必要な高さ自動的に確保します。

高さ(height)の設定

divボックス高さ200ピクセルにしてみます。

CSSにheightの記述を追加します。

※説明のためのブラウザ表示の都合上 body セレクタを記述しています。

ブラウザには次のように表示されます。

HTML、CSSのボックスモデルを説明するイラスト

divのボックス高さ200ピクセルが確保され、ボックスの中に入る文章に必要な高さより大きくなりました。
そのため、文章の下に見た目上の空白エリアが発生します。

内余白(padding)の設定

次にdivボックスの周りに内余白を設定してみましょう。
内余白(上下左右)の大きさを10ピクセルにします。

CSSにpaddingの記述を追加します。

ブラウザには次のように表示されます。

HTML、CSSのボックスモデルを説明するイラスト

周囲に内余白として10ピクセルが確保されました。
内余白は次に説明する罫線の内側に余白を取りたい場合に使用します。

境界線(border)の設定

ボックスの周りに境界線(罫線)を表示してみましょう。
線の2ピクセル、線の種類実線にします。

CSSにborderの記述を追加します。

ブラウザには次のように表示されます。

HTML、CSSのボックスモデルを説明するイラスト

内余白の外側に2ピクセル境界線(罫線)が引かれました。

外余白(margin)の設定

境界線の外側(上下左右)に20ピクセル外余白を設定してみましょう。

ラウザには次のように表示されます。

HTML、CSSのボックスモデルを説明するイラスト

境界線(罫線)の外側20ピクセル外余白が設けられました。

ここで注意が必要です。
隣接するボックスの上下外余白重ねられるということです。
上の図でもわかるように、上のボックスの外余白下部と下のボックスの外余白上部が重なって表示されています。

まとめ

今回はボックス高さに加え、内余白境界線外余白の大きさについてまとめてみました。

ボックスの概念については、「WEBデザイン HTML CSSのボックスモデル その1」と「WEBデザイン HTML CSSのボックスモデル その2」を参照してください。

スポンサーリンク

シェアする

フォローする

スポンサーリンク