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

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

はじめまして!Webのフロントエンドの実装を担当しているtrrn(呼称:てらりん)です。

今回はデザインカンプの見た目を再現するために問題となってくるブロックレベル要素とインライン要素について紹介していこうと思います。

HTMLの要素

HTMLにおいて、要素という概念があります。

要素にはたくさんの種類があり、例えば、見出しを示すh1要素や段落を示すp要素、順序付きリストを示すol要素、表を示すtable要素、リンクを示すa要素など、様々な要素があります。

ただ、div要素とspan要素さえ覚えておけば、見た目を再現することは可能です。

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

執筆時点で世界ではHTMLのバージョンは4から5に着々と移行していることだろうと思われます。
HTML5ではブロックレベル要素とインライン要素という概念は廃止されていますが、この2つを覚えておくといいでしょう。

前述のdiv要素はブロックレベル要素にあたり、span要素はインライン要素にあたります。

これら2つの違いは主に下記のとおりです。
また、CSSにおいて、要素はボックスと表現するのが一般的なので、それに倣っていきます。

  • ボックスの前後(見た目上は上下)で改行されるかどうか
  • ボックスの横幅は何を基準とするか
  • 一部のスタイルが有効かどうか
  • 要素内に何を含むことができるか

それでは順に見ていきましょう。

ボックスの前後で改行されるかどうか

下記の「HTMLとCSSのコード例」を見ると、div要素は前後改行されるため、それぞれのdiv要素は改行され縦に並んでいます。
それに対しspan要素は前後で改行されず横に並んでいます。

ボックスの横幅は何を基準とするか

HTMLとCSSのコード例」を見ると、div要素の横幅は横いっぱいに伸びています(視覚的に捉えやすいように赤い背景色を設定しています)。
それに対しspan要素は要素内のテキストと同じ横幅となります(青い背景色を設定しています)。
ブロックレベル要素は、1つ親となる要素(本記事では以降、親要素と称す)の横幅と同じ幅となるのがデフォルトです。
インライン要素は、中に存在する要素やテキストに合わせた横幅しか持つことはできません。

一部のスタイルが有効かどうか

インライン要素は、スタイルにおける、ボックスの横幅を設定するwidthプロパティと、ボックスの高さを設定するheightプロパティが無効化されます。
HTMLとCSSのコード例」を見ると、span要素に設定されているwidth: 50%;が無効化されているのに対し、class="w50p"を持つdiv要素の横幅は、親要素の半分の横幅となっているのがわかります。
これ以外にも状況に応じて、一部無効化されるプロパティ、もしくはプロパティの値が存在しますが本記事では触れません。

要素内に何を含むことができるか

ブロックレベル要素は、基本的にブロックレベル要素とインライン要素、テキストを要素内に含むことができますが、インライン要素は、インライン要素とテキストしか含むことはできません。
HTMLとCSSのコード例」を見ると、span要素内のdiv要素には、span要素に設定される青い背景が無効化されています。これはインライン要素が要素内のブロックレベル要素を認識できないことが要因となります。

HTMLとCSSのコード例

See the Pen Hello HTML-World! by trrn1210 (@trrn1210) on CodePen.

※簡略化のため、html要素とhead要素、body要素を記述していません。

まとめ

以上、ブロックレベル要素とインライン要素について紹介させていただきました。
これらはHTML5では別の概念となっており、それだけで1記事書けるくらいのボリュームがあるので、本記事では触れない方向で進めさせていただきました。

おまけ

実は今回、これまで僕が学んだHTMLとCSSにおいて、最低限知っておきたい知識・スキルについて書こうとしましたが、それを書くためには前提知識が必要だったため、何度も記事を書き直し、結果初心に戻ってしまいました(^^;
ブログを執筆するということがこれほど大変だなんて・・・と驚愕しております。
それではまた!


Previous: 「技術共有会」デザイン部の技術向上のために。 Next: はじめてのE2Eテスト

© 2017 ALL CONNECT Inc. All Rights Reserved.