はじめに
CSSでは、HTMLで定義された要素をブロック要素とインライン要素の2種類に分類します。ブロック要素とインライン要素について理解することは、ウェブサイトのレイアウトをコントロールする上で非常に重要です。
この記事では、ウェブ制作初心者の方向けにブロック要素とインライン要素それぞれの特徴や、該当するHTML要素について解説します。
この記事の対象者
- ウェブ制作初心者の方
- ブロック要素とインライン要素の違いについて関心のある方
- レイアウトやスタイリングに関心のある方
この記事の目標
- ブロック要素とインライン要素の特徴を理解する
- ブロック要素とインライン要素の使い分けができる
- 主なHTML要素がブロック要素・インライン要素のどちらに該当するかを知る
ブロック要素とインライン要素について
ブロック要素は新しい行から始まり、セクションごとにコンテンツをまとめます。一方、インライン要素はテキスト内の要素をスタイリングし、テキストの流れを崩さずにコンテンツを表示します。
例えば、ブロック要素を使用してセクションを作成することで、ウェブページの構造が整理され、インライン要素を使用してテキスト内の一部をスタイリングすることで、コンテンツの見た目が向上します。
このように、ブロック要素とインライン要素ではHTMLの構造上でも違う役割を持ち、これらのレイアウトはCSSのdisplayプロパティの値に依存します。
displayプロパティの値を変更することでブロック要素とインライン要素を変更することができますが、displayプロパティの変更は多用するものではありません。ブロック要素とインライン要素それぞれに該当するHTML要素が何なのかを理解することが重要です。
ウェブデザインにおける基本的な要素であるブロック要素とインライン要素について、それぞれの特徴や、主なHTML要素について解説します。
ブロック要素
ブロック要素は、ウェブページの大きなセクションを表現するための要素です。ウェブページのレイアウトに大きく関わり、ブロック要素について理解することで適切にレイアウトをコントロールすることができるようになります。
ブロック要素の特徴
ブロック要素は、通常新しい行から始まり、親要素の幅いっぱいを占有します。これにより、セクションごとに明確な区切りが生まれ、コンテンツの整理が容易になります。また、ブロック要素を水平方向に並べることで、コンテンツの配置やレイアウトを柔軟に調整することができます。
例えば、以下のコードは、sectionタグによってセクションが作成されており、その内部に他のブロック要素が配置されています。
<section>
<h2>セクションの見出し</h2>
<p>セクションの説明文。</p>
</section>
<section>
<h2>セクションの見出し</h2>
<p>セクションの説明文。</p>
</section>この例では、各sectionが上から順番に配置されます。また、section内のh2, pの要素も上から順番に配置され、sectionの高さはh2, p要素に依存します。
また、上から順番に配置されるという仕様はコンテンツ幅の影響を受けません。つまり、section内のh2, p要素の幅の合計がsection幅より小さい場合でも、h2, p要素が横に並ぶことはありません。
section {
width: 1080px;
}
section h2 {
width: 500px;
}
section p {
width: 500px;
}上記の例では、親要素であるsectionのwidth: 1080pxに対し、子要素h2, pの合計は1000pxになっています。h2の横に580pxのスペースが生まれるのでそこにpが回り込むことを期待しますが、このように各要素の幅を指定しても横並びにはなりません。
ブロック要素を横並びにする方法は様々な方法がありますが、レイアウトを組む目的で要素を横並びにする場合はフレックスボックスを使用することが一般的です。
section {
display: flex;
}section要素に対してdisplay: flex;を指定することで、section要素の直下に配置されているh2, pが横並びになります。このように、ブロック要素はレイアウトや配置の調整を行うことができます。
フレックスボックスを用いたスタイリングには他にも指定しなければいけないプロパティがありますが、ここでの詳しい説明は割愛します。興味のある方は調べてみると良いでしょう。
ブロック要素に該当する主なHTML要素
HTMLの要素は、コンテンツモデルという概念に基づいて複数のカテゴリーに分類されます。ブロック要素の「セクションを表現する」という特徴により、コンテンツモデルのカテゴリーとある程度の一貫性を持ちます。
具体的には、セクショニングコンテンツ、ヘディングコンテンツに含まれるHTML要素は全てブロック要素であり、テキストに意味付けを行うようなstrongやemなどはブロック要素には該当しません。
以下はブロック要素に該当する主なHTML要素です。
- header：フローコンテンツ。ページヘッダーやセクションヘッダーに使用されます。
- main：フローコンテンツ。ページのメインコンテンツに使用されます。
- footer：フローコンテンツ。ページフッターやセクションヘッダーに使用されます。
- aside：セクショニングコンテンツ及びフローコンテンツ。サイドバーや関連コンテンツに使用されます。
- nav：セクショニングコンテンツ及びフローコンテンツ。サイトのナビゲーションメニューに使用されます。
- article：セクショニングコンテンツ及びフローコンテンツ。ページ内の独立したコンテンツに使用されます。
- section：セクショニングコンテンツ及びフローコンテンツ。コンテンツのセクショニングに使用されます。
- h1～h6：ヘディングコンテンツ及びフローコンテンツ。ページの見出しに使用されます。
- p：フローコンテンツ。段落に使用されます。
- div：フローコンテンツ。CSSでスタイリングする目的で使用されます。
- ul, ol, li, dl, dt, dd：フローコンテンツ。リストに使用されます。
- table：フローコンテンツ。表に使用されます。
HTML要素は他にもあり、ブロック要素に該当するものもまだまだあります。上記の要素はHTMLでマークアップする際によく使用されるので、ブロック要素であることを意識することで適切なスタイリングの助けとなるでしょう。
インライン要素
インライン要素は文章の意味付けの際に使用される要素が多く、テキストの流れを崩さずにコンテンツを表示します。
インライン要素を使用してテキスト内の一部をスタイリングすることで、デザイン上の「あしらい」を追加するなど、コンテンツの見た目を向上されることができます。
インライン要素の特徴
インライン要素は、テキスト内の一部を強調する役割を持つstrongタグやemタグ、テキストリンクを作成するために使用されるaタグ、テキストの一部をスタイリングする際に使用されるspanタグなどが該当します。
インライン要素は必要なだけの水平スペースを占有し、新しい行を作成しません。これにより、テキストの流れを妨げずにコンテンツをスタイリングできます。この特徴により、隣接するインライン要素は横並びになる点がブロック要素と大きく異なります。
<!-- 各p要素は横並びになりません -->
<div>
<p>テキストです。</p>
<p>テキストです。</p>
<p>テキストです。</p>
</div>
<!-- 各span要素は横並びになります -->
<div>
<span>テキストです。</span>
<span>テキストです。</span>
<span>テキストです。</span>
</div>インライン要素の注意点として、インライン要素をブロック要素直下に配置した場合、改行は半角スペースとして扱われます。
<!-- 一つ目のspanと二つ目のspanの後ろに半角スペースが入ります -->
<div>
<span>テキストです。</span>
<span>テキストです。</span>
<span>テキストです。</span>
</div>
<!-- 半角スペースは入りません -->
<div>
<span>テキストです。</span><span>テキストです。</span><span>テキストです。</span>
</div>上記の例では以下のように表示されます。
上記のように一行で記述する方法もありますが、コードの見通しが悪いという欠点があります。このスペースの大きさは親要素のfont-sizeに依存しており、親要素に「font-size: 0;」と指定することで解決できます。
font-sizeは指定がないと親要素の値を継承するため、子要素にもfont-sizeの指定が必要になります。
div {
font-size: 0;
}
div span {
font-size: 16px;
}些細な違いではありますが、スタイリングを崩す可能性があるので気をつけましょう。
インライン要素の特徴は他にもあります。例えば、インライン要素のwidth, heightはコンテンツの大きさによって定められ、一部の例外を除いてwidth, heightの変更を行うことはできません。また、上下方向にmarginを指定することはできず、paddingは指定できるにも関わらず適切に配置されません。
インライン要素についての大きさや余白のスタイリングは以下の記事で解説しているので参考にしてください。
これらの特徴を理解しておくと、スムーズにスタイリングを行うための助けとなるでしょう。
インライン要素に該当する主なHTML要素
インライン要素はテキストの流れを崩さないという特徴により、HTMLのコンテンツモデルのカテゴリーでは主にフレージングコンテンツに該当するものがインライン要素になります。
以下はインライン要素に該当する主なHTML要素です。
- a：フレージングコンテンツあるいはフローコンテンツ。リンクに使用されます。
- img：フレージングコンテンツ。画像の表示に使用されます。
- strong：フレージングコンテンツ。テキストの強調に使用されます。
- span：フレージングコンテンツ。テキストの一部をスタイリングする際などに使用されます。
インラインブロック要素について
ブロック要素とインライン要素の二種類に分類されるという説明をしましたが、実は例外もあり、インライン要素の特徴を持ちながらブロック要素のようにwidth, heightの指定や上下marginの指定ができる「インラインブロック要素」というものがあります。
ややこしく感じるかもしれませんが、インラインブロックに該当する要素はセクショニングやグルーピングに扱えるものではなく、意味合いとしてはインライン要素と同じとらえ方で問題ありません。
以下はインラインブロック要素に該当する主なHTML要素です。
- button：インタラクティブコンテンツ及びフレージングコンテンツ。ウェブフォームなどでボタンに使用されます。
- input：インタラクティブコンテンツ及びフレージングコンテンツ。ウェブフォームなどで入力フォームに使用されます。
- select：インタラクティブコンテンツ及びフレージングコンテンツ。ウェブフォームなどでプルダウンメニューに使用されます。
- textarea：インタラクティブコンテンツ及びフレージングコンテンツ。ウェブフォームなどで長文のテキスト入力フォームに使用されます。
これらの要素はインラインブロック要素であることを特に意識する必要はありません。強いて言うなら、「display: inline-block;」の指定がなくても大きさや余白を自由に変更できることを知っていると、コーディングの無駄を省くことができるでしょう。
さいごに
ウェブ制作初心者の方向けにブロック要素とインライン要素それぞれの特徴や、該当するHTML要素について解説しました。
ブロック要素とインライン要素はウェブ制作の基本知識として重要であり、これらの理解ができないままCSSの学習を進めると、CSSの習得に多くの時間を消費することになります。
CSSのコードを効率よく・分かりやすく書くには、要素それぞれの役割を意識してスタイリングを行うことが重要です。ブロック要素とインライン要素それぞれの特徴を理解することは、要素そのものの役割を理解する助けとなるでしょう。