もじゃもじゃラボ/CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識/ボックスモデル
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

ボックスモデル

CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
 
このチャプターの目次

ボックスモデル

ボックスモデルはコンテンツのレイアウトに関する重要な考え方です。「要素はいくつかのボックスで構成されている」という考え方のことをボックスモデルと言います。
  • 中身（Content）の文字の部分の領域はwidthが400pxのボックスになります。
  • スタイルシートには、borderというプロパティが指定されています。これは枠線、というプロパティで、1pxの青の実線を引くというスタイルです。中身のボックスという領域があり、その周りに、枠線のボックスという領域があるということになります。
  • 中身（Content）と枠線との間の余白のことをpaddingと言います。内側余白です。上下左右にあります。
  • スタイルシートでは、width（幅）とheight（高さ）が指定されています。これは、「中身（Content）」の幅と高さを指しています。
  • marginは枠線から他の要素との間の余白のことです。これを外側余白と言います。marginも上下左右にあります。
この例では、borderプロパティが指定されているため、枠線が青で表示されます。スタイルシートの指定がない場合でも、同様に透明の領域が存在することを意味しています。
要素全体の幅と高さは、widthとheightだけで決まるのではなく、padding、border、marginも含めて決まります。これを知らないと想定外の幅や高さになってしまうことがありますので、注意しましょう！
参考までにですが、スタイルシートの指定で、borderまでを含めた部分をwidthやheightとすることができます。

ブロックレベル要素とインライン要素

HTML要素の領域の占有の仕方について解説します。HTMLタグは、領域の占有の仕方によって、次の2種類に分類することができます。

ブロックレベル

コンテンツをブロックで表現するという考え方のことです。
以下の特徴があります。
  • 横幅全体を占有する
      • ブロックレベルの要素がブラウザに表示されている場合、（親要素の）横幅全体を占有してしまいます。
  • 改行が前後に挿入される 横幅が100%占有されているため、ブロックレベルの要素の前後に改行が挿入されるイメージになります。
  • 新しい行から始まる
      • 「Welcome to programming world!」という要素は、新しい行から始まります。
  • 文書の構造を組み立てるためのHTMLタグです。
  • 「HTML入門」で、11のグループに分けた中で以下の分類がそれに当たります。
    • グループ
    • セクション

インライン要素

文章の一部をマークアップした要素のことです。
文章の一部がで強調されているような場合、ブロックレベルとは違って、 要素の部分のみ占有します。
以下の特徴があります。
  • コンテンツの部分のみ占有する
  • 幅、高さを指定できない
  • 上下の margin が効かない
      • ボックスモデルの一部のプロパティにしかスタイルを適用することができません。
  • 文章の一部として扱われる以下のタグがそれに当たります。
    • テキストの分類に属するタグ
    • imgタグ

サンプルコード

以下のサンプルでは、ブロックレベルとインライン要素の2つに、同じclassセレクタを使用して同じスタイルシートを適用しています。
このような見た目の違いが生まれることに注目してください。
結果の補足です。1つ目の箱のp要素は、ブラウザのデフォルトスタイルシートでブロックレベルの設定がされています。幅や高さなどが適用されているため、中身の文章が改行されたように表示されています。
また、領域の100%を占有するため、2つ目の箱のspan要素のコンテンツは横に並ぶのではなく、次の段から始まって縦に並んでいます。 1つ目の箱の右側は空白に見えますが、実際にはp要素の箱がその領域を占有しています。
2つ目の箱のspan要素はデフォルトでインラインの設定がされているため、幅の指定が効かず、1行で（改行されずに）表示されています。占有しているのは要素の部分だけなのにもかかわらず、1つ目の箱の右側に入り込めないため、横に並ぶのではなく縦に並んでいる、ということになります。
ブロックレベルとインライン要素にはこのような違いがありますが、CSSのdisplayプロパティを使用すると、要素の表示方法をブロックレベルにするか、インライン要素にするかを指定することができます。スタイルシートを使用して変更することができます。この例では、このプロパティは使用されていないため、デフォルトのスタイルシートが適用されています。

汎用的なタグとCSSの関係

「HTML超入門！押さえておきたいマークアップの基本」では、汎用的なタグについて紹介しました。特別な意味を持たない「div」と「span」タグについて解説します。これらのタグは文書構造を示す特別な役割はありませんが、スタイルを適用するために使用されます。デザインの調整などには、id属性やclass属性と併用して利用されます。

役割

  • 複数の要素を1つに束ねる役割
      • 束ねた複数の要素の親要素となります。
  • 装飾のためのタグである

divの特徴

  • displayプロパティにblockが設定されている
  • コンテンツをグループ化したいが、適切なタグが当てはまらない場合などに使用する。
ブロックレベル要素で、要素のまとまりに対してスタイルを適用したい場合に使います。ブロックに対するデザインに使います。

spanの特徴

  • displayプロパティにinlineが設定されている
  • 特定の文字にスタイルを適用したい場合などに使用する
インライン要素で、文章の一部にだけスタイルを適用したい場合に使います。文字のデザインに使います。

サンプルコード

spanタグでは、noticeクラスのスタイルを使用して特定の範囲を赤字にしています。また、divタグでは複数のp要素をまとめています。idセレクタfooterのスタイルでは、文字を小さくし、色をグレーにしています。divタグ自体には青枠が付いています。2つの子要素は文字が小さくなり、グレーになっていることがわかります。継承されているプロパティとされていないプロパティがあることもわかります。
divとspanは文書構造には意味を持ちませんが、デザインのために使用されるため、現代のWeb開発では非常に頻繁に使用されます。その特徴をしっかり押さえておく事が大事です。