本ページでは、HTMLで使われるインライン要素とブロック要素という２つの用語と意味・注意点について解説していきます。
語弊を恐れずにインライン要素とブロック要素を簡単に説明すると・・・
- ブロック要素 ・・・ 行全体のまとまり
- インライン要素 ・・・ 行の中の一部のまとまり
となります。HTMLやCSSを実務レベルで理解するためには、両者の区別は必須知識となります。ブロック要素とインライン要素の違いを理解し、コーディング時の注意点など整理していきましょう。
このページで学べる内容
- ブロック要素とインライン要素の違いは？
- ブロック要素とインライン要素を使ったサンプルコード
- ブロック要素/インライン要素の応用知識・留意事項
HTML初心者でも知らないと恥ずかしい内容ばかりですので、是非最後までご覧ください。
ブロック要素（ブロックレベル要素）
ブロック要素（Block-Level Elements）とは、冒頭でも説明した通り「行全体のまとまり」です。開始タグと終了タグで囲った箇所は行全体が１つのブロックとして扱われるため、範囲が横いっぱいに広がります。※次に解説するインライン要素は、行全体に広がりません。
早速、ブロック要素であるhタグ（見出し）や、pタグ（段落）・divタグを用いて作成した画面を見てみましょう。
ご覧のように、ブロック要素は行全体に広がり、次のブロック要素は必ず改行されて表示されていることはお分かりいただけるかと思います。
参考までに、上記画面を作成したHTMLとCSSのコードを載せておきます。
HTML
<h2>ブロック要素</h2> <p>pタグはブロック要素です。</p> <p>そのため、pタグで囲まれた範囲は行全体に広がります。</p> <div>背景色が行全体に広がります。</div> <p>新しく定義したブロック要素は必ず改行されて表示されます。</p>
CSS
div{
background-color:#f5ef42;
}上記サンプルコードで利用されているタグについて不明な方は
- 【HTML】＜h2＞ ⇒ 見出しタグ
- 【HTML】＜div＞ ⇒ divタグ
- 【CSS】 ⇒ CSSの書き方・基本構造について
上記のリンク先の記事で詳細を解説していますので、合わせてご覧ください。
インライン要素
ブロック要素と比較して、インライン要素はその名の通り「ラインの中」、つまり行の中の一部のまとまりを定義します。
インライン要素は指定した範囲のみがグループ化されます。ブロック要素が何なのかを理解できている今であれば、インライン要素との違いがよくわかるかと思います。
こちらについても、上記の画面を構成するHTML・CSSのサンプルコードを載せておきます。ブロック要素とインライン要素の違いに注目してご確認ください。
HTML
<h2>ブロック要素</h2> <p>pタグはブロック要素です。</p> <p>そのため、pタグで囲まれた範囲は行全体に広がります。</p> <div>背景色が行全体に広がります。</div> <p>新しく定義したブロック要素は必ず改行されて表示されます。</p> <p>インライン要素は<span class="yellowline">行の中の一部のまとまり</span>を定義します。</p>
CSS
div{
background-color:#f5ef42;
}
.yellowline{
background-color:#f5ef42;
}インライン要素のサンプルとして利用した「spanタグ」について知りたい方はこちらの記事をご覧ください。
インライン要素とブロック要素の違い
インライン要素・ブロック要素、それぞれの特徴をおさらいした上で、インライン要素とブロック要素の違いを整理していきましょう。
グループ化される単位
ブロック要素はグループ化した単位が行単位となるのに対して、インライン要素はブロック要素の中の一部がグループ化されます。
- ブロック要素 ・・・ 行単位のグループ
- インライン要素 ・・・ 行の中の一部のグループ
つまり、インライン要素は必ずブロック要素の中に含まれる形で存在するということになります。
改行の有無
「ブロック要素は指定した範囲で行単位のグループを作る」と説明しましたが、これは言い換えればブロック要素は必ず改行されて並んでいくということになります。
つまり、pタグ（ブロック要素）の中に、divタグ（ブロック要素）を入れ子でコーディングすればdivタグで囲まれた部分は改行されるということになります。
<p>pタグの<div>この部分をdivタグで囲む</div>と改行されます。</p>
結果
もし、入れ子にするタグをインライン要素にすれば
<p>pタグの<strong>この部分をstrongタグ（太字）で囲む</strong>と改行されません。</p>
ここまでの内容が理解できれば、もうインライン要素とブロック要素の違いについては理解したと考えてOKです。
HTMLを１から学びたい方は・・・
HTMLを実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがベストです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことが重要です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
