HTMLブロックとインライン要素の違いとは？WPカスタマイズの必須知識
ワードプレスは管理画面のテーマカスタマイザーである程度のデザイン設定ができますが、カスタムCSSを使いこなせると表現できる幅が大きく広がります。
この記事では、カスタムCSS初心者の方向けに、ぜひとも知っておきたいHTMLの知識としてブロック要素とインライン要素について解説していきます。
・HTMLのブロック要素とインライン要素の違い
・divとspanで知るブロック要素とインライン要素の使い分け
・ブロック要素とインライン要素の代表的なHTMLタグ
・displayプロパティで他の要素に変換する方法
2022年8月8日『インライン要素にpaddingを使うときの注意点』などを加筆しました。
なお、カスタムCSSについては次の記事がおすすめです。
https://web-children.com/2020/12/14/custom-css/HTMLと代表的なHTMLタグのおさらい
カスタムCSSの解説記事でも紹介しましたが、少しHTMLそのものについて簡単に解説しておきましょう。
Webサイトのページは、HTMLという言語で内容が記述されています。
文章も画像・動画といったコンテンツも、それぞれを表すHTMLタグというもので表現（マークアップといいます）されていて、基本的なものとして次のものがあります。
例えば、この記事のタイトルならば見出しのh1タグを使って、
<h1>ブロック要素とインライン要素の違いとは？WPカスタマイズの必須知識</h1>
というように記述しているわけなんですね。
このように、
・見出しなら<h1>～<h6>タグ
・段落ならば<p>タグ
・画像ならば<img>タグ
というように、HTMLタグそれぞれに意味があって、どんな種類のコンテンツなのかがわかるようになっています。
そうすることでGoogleの検索エンジンにWebページの内容を正しく伝える役割を果たすのです。
しかし上の表の中のdivとspanを見ると、それぞれ範囲指定（ブロック要素）・範囲指定（インライン要素）と記載があるものの、特にタグそのものは意味を持たないことがわかります。
しかしdivとspanはブロック要素とインライン要素を示す大切なタグなんです。
この後の説明でその重要度が理解できるようになります。
ブロック要素とインライン要素
divとspanは、それぞれブロック要素、インライン要素と呼ばれています。
ブロック要素とは
divタグで範囲を指定することで、ブロックと呼ばれるエリアを形成することができます。これをブロック要素と呼びます。
ブロック要素で覚えておくべき特徴は次の２つです。
- ブロックの範囲は行単位となり、親要素の左右いっぱいに広がるエリアとなる
- ブロックは大きさ（サイズ）を指定できる
ブロックは行単位で範囲指定となる
例えばこの記事エリアの中に<div>あああ</div>と記述して、CSSでブロック範囲を黄色にしてみました。
文字の範囲にかかわらず、左右いっぱいにブロックが広がっているのがわかります。
ここでいう左右いっぱいというのは、divの入っている親要素の中で左右いっぱいに広がる、という意味です。この<div>の親要素は記事エリアですので、記事エリアの中で左右いっぱいに広がったわけですね。
では、今度はブロックを２つ作成してみましょう。
<div>あああ</div><div>いいい</div>とブロックを２つ並べて記述してみます。
1つ目は黄色、2つ目はシアン色でブロック範囲をCSSで着色しました。
2つのブロックを横に並べて記述したにもかかわらず、ブロックは自動的に改行されていることがわかります。
これが、”ブロックの範囲は行単位である”という意味です。
ブロックにはサイズを指定できる
ブロックのサイズは初期値として、横方向は横幅いっぱい、縦方向は中に入れたコンテンツに合わせて自動的に広がるようになっています。
これをCSSで記述すると、
width: 100%;
height: auto;
になっていることになります。横幅は親要素に合わせて100％広げる、高さは自動に可変、という意味です。
このCSSの値を操作することで、ブロックの大きさは変更することができます。
先ほどの２つのブロックのそれぞれの大きさを変更してみましょう。
1つ目（黄色）の横幅を80%、高さを2文字分、
2つ目（シアン）の横幅を40%、高さを4文字分
で指定すると次のようになります。
HTML
<div style="line-height:1; width: 80%; height: 2em; font-weight: bold; background-color:yellow;">
あああ
</div>
<div style="line-height:1; width: 40%; height: 4em; font-weight: bold; background-color:#0ff;">
いいい
</div>web表示
※ブロックに限らずHTMLはすべて左上から詰めて記述することが定められているので、ブロックも左詰めとなります。
ブロック化しておくと便利なのは、それぞれのブロックに背景色を設定できるだけでなく、ブロックごとにレイアウトができるということです。
例としてCSSを使って、1つ目のブロックはそのまま、2つ目のブロックのみセンター配置（文字もセンター）としてみました。ブロックの間も２文字分だけ離してみましょう。
HTML
<div style="line-height:1; width: 80%; height: 2em; font-weight: bold; background-color:yellow;">
あああ
</div>
<div style="margin: 2em auto; text-align: center; line-height:4em; width: 40%; height: 4em; font-weight: bold; background-color:#0ff;">
いいい
</div>web表示
このようにdivタグそのものは意味を持ちませんが、ブロックを形成することで、いろいろとレイアウトを作り出すことができる、というわけです。
インライン要素とは
spanタグはインラインで範囲指定することができ、インライン要素と呼ばれています。
インライン要素の特徴は、ブロック要素の特徴の逆となります。
- 範囲指定されたコンテンツ分だけ（文字ならばその文字だけ）が指定エリアとなる。
- サイズを指定できない
コンテンツ分だけの範囲が指定エリアとなる
divの場合と同じく例をあげて説明しましょう。
<span>あああ</span><span>いいい</span>と２つ並べて記述してみます。
CSSを使って、1つ目は黄色、2つ目はシアン色で着色しておきましょう。
divで囲んだ場合と違って、それぞれのエリアは文字の部分のみとなり、かつ、自動改行されずに横に並びます。
このように、横に並ぶレイアウトとなることからインライン要素と呼ばれているようです。
spanタグは文字装飾によく使われる
このように横に並ぶという特徴を生かして、spanタグは文字の装飾によく使われます。
例えば次のように段落要素<p>タグの中にテキストがあったとします。
わかりやすいように段落全体にシアン色をつけておきます。
HTML
<p style="background-color: #0ff;">
ワードプレスは、世界で最もポピュラーなCMSである
</p>web表示
ワードプレスは、世界で最もポピュラーなCMSである
これに装飾として、HTMLにspanタグと赤字にするCSSを追加してみましょう。
HTML
<p style="background-color: #0ff;">
ワードプレスは、
<span style="color: red;>"世界で最もポピュラーなCMS</span>
である
</p>web表示
ワードプレスは、 世界で最もポピュラーなCMS である
このようにspanタグは、文字装飾に非常によく使われます。
”コンテンツのまま横に並ぶ”というインライン要素の特徴を活かして、spanタグは文字装飾によく使われる
インライン要素はサイズ指定できない
インライン要素は、ブロック要素と違ってCSSでサイズ指定することができません。仮にwidthやheightプロパティを使ってサイズ指定をしても無視されますので注意しましょう。
どうしてもサイズ指定したい場合は、後述する方法でdisplayプロパティでインラインブロック要素またはブロック要素に変換する必要があります。
サイズ以外にもインライン要素で指定できないものがあるので、次のように覚えておきましょう。
インライン要素で指定できないCSSプロパティ：
- width
- height
- margin-top
- margin-bottom
※margin-leftとmargin-rightおよびpaddingは可能です。
インライン要素でpaddingを使うときの注意点
paddingは設定できるのですが、上下方向のpaddingを設定するときは注意が必要です。
HTML
<p>
ワードプレスは、世界で最もポピュラーなCMSである。<br>
そのシェアは、<span style="background-color: #0ff; padding: 1em 0;">全世界のWebサイトの40％以上</span>である。<br>
そしてCMSだけでみれば、60％以上がワードプレスである。
</p>web表示
ワードプレスは、世界で最もポピュラーなCMSである。
そのシェアは、全世界のWebサイトの40％以上である。
そしてCMSだけでみれば、60％以上がワードプレスである。
上の事例では、<span>タグで囲まれたインライン要素の上下に１emのpaddingを設定しています。わかりやすいように同時にシアンの背景色を設定していますが、上下の行にはみ出しているのがわかります。
はみ出し防止するには、line-heightで行の高さを十分にキープする必要があるでしょう。
HTML
<p>
ワードプレスは、世界で最もポピュラーなCMSである。<br>
そのシェアは、<span style="background-color: #0ff; padding: 1em 0; line-height: 3em;">全世界のWebサイトの40％以上</span>である。<br>
そしてCMSだけでみれば、60％以上がワードプレスである。
</p>web表示
ワードプレスは、世界で最もポピュラーなCMSである。
そのシェアは、全世界のWebサイトの40％以上である。
そしてCMSだけでみれば、60％以上がワードプレスである。
このような使い方は通常あまりしないので問題とはなりにくいですが、例えば
<li><a href="#">リストの項目</a></li>
のようにリスト表示する場合、<a>タグをインライン要素のまま使い続けると、知らぬ間に上下のリスト行にはみ出してしまうことがあります。それを防止するためには、<a>タグをインラインブロック要素に変換しておくとよいでしょう（方法は後述）。
ブロック要素とインライン要素の組み合わせルール
次のルールがあります。
- ブロック要素の中に別のブロック要素やインライン要素を配置することができる
- インライン要素の中に別のインライン要素を配置はできるがブロック要素は配置できない
一見ややこしいようですが、普通の使い方をしていれば自然とこうなります。
誤った使い方をしがちなところとしては、例えば、リスト（箇条書き）の各項目にリンクを貼りたいときですね。その場合、
○ <li><a href="#">リストの項目</a></li>
✖ <a href="#" ><li>リストの項目</li></a>
てな感じで、必ずブロック要素<li>でインライン要素である<a>を囲むのが正しい記述です。実は間違っていてもWeb上の表示は機能するので注意しましょう。
基本的なHTMLタグをブロック要素とインライン要素に分類する
以上でdivはブロック要素、spanはインライン要素ということがわかりましたが、他のHTMLタグもどちらかに分類されます。
ブロック要素
div
h1～h6（見出し）
p（段落）
ul,ol,li（リスト）
hr(水平線)
※表を作成するtable,tr,th,tdもブロック要素に分類されますが、CSS的にはdisplay:table;およびdisplay: table-cell;で表される特別なタグとなります（displayプロパティの働きは後述します）
インライン要素
span
a（ハイパーリンク）
img（画像）
br（改行）
テキストそのもの
※上記以外にも<b>,<i>,<strong>など文字の装飾に使用されるタグもインライン要素となります。
このように、HTMLタグはブロック要素またはインライン要素のどちらかに分類されます。
また、HTMLタグではありませんが、”テキスト（文章）そのものもインライン要素である”、ということができます。
もし、あれ？このタグってどっちだっけな？と迷ったときは、HTMLタグを２つ並べて記述して表示させればわかりますよね。
自動改行されればブロック要素、２つ横並びになればインライン要素
CSSのdisplayプロパティでブロック要素にもインライン要素にも変換できる
ブロック要素とインライン要素のどちらかに分類されるHTMLタグですが、実はCSSのdisplayプロパティでどちらにも変換が可能です。
CSSのdisplayプロパティで、初期値として次のように定義されているのです。
- ブロック要素は、display:block; と定義されている
- インライン要素は、display:inline; と定義されている
なので、それぞれdisplayプロパティを書き換えれば、ブロック要素にもインライン要素にも変換できちゃうんです。
インライン要素→ブロック要素に変換したい場合
インライン要素はCSSでサイズ指定できない、と説明しましたが、インライン要素であってもサイズ指定しなくなるときがあります。
例えば<a>タグは、ハイパーリンクを指定するのに使いますが、同時にボタンやナビゲーションメニューのアイテムとして使用することがあります。
そうするとサイズを指定したくなりますよね。
そんなときは、CSSのdisplayプロパティを使ってブロック要素に変換することが可能なんです。
- display: inline; ・・・インライン要素の初期値
- display: inline-block; ・・・インラインブロック要素に変換
- display: block; ・・・ブロック要素に変換
インラインブロック要素とは、インライン要素の特徴（コンテンツのまま横に並ぶ）のまま、サイズはブロック要素と同様に指定できる、とインラインとブロックの両方の特徴を備えている要素です。
インラインブロックとするかブロックとするかは、横に並べたいか改行したいか、で決めることが多いですね。
例えばヘッダーナビなんかだと横並びにすることが普通なので、インラインブロックにしておきます。
（実際最近はdisplay:flex; でフレックスボックスにすることが多いのですが・・・。）
あと、text-alignプロパティのようなインライン要素に適用するCSSを使いたい場合もインラインブロックにしたりします。ブロック要素にしてしまうとtext-alignが効かなくなるからです。
ブロック要素→インライン要素に変換したい場合
逆にブロック要素をインライン要素やインラインブロック要素にしたくなることもあります。
例えば、見出しタグ<h1>～<h6>はブロック要素なので、親要素の横幅いっぱいに広がりますが、見出しの装飾によっては横幅いっぱいでなく、文字の部分だけが装飾されて表示されて欲しい、なんてことがあります。
そんなときはdisplay:inline-block;でインラインブロック化すればよいんですね。
このように、インライン要素やブロック要素を他の要素に変換する、なんてことは、ワードプレスでも装飾系レイアウトでは非常によく使うので、覚えておくとよいでしょう。
displayプロパティを使って、インライン要素やブロック要素を他の要素に変換することは、装飾レイアウトでよく使う
まとめ
ブロック要素とインライン要素、そしてその両方の特徴をもったインラインブロック要素についても解説をしてきました。
ブロック要素とインライン要素の違いの理解なしに、Webページのレイアウトを理解することはできません。
それぞれの特徴をよく覚えておきましょう。
- ブロック要素のエリア範囲は行単位、インライン要素はコンテンツ分だけ
- ブロック要素は大きさ（サイズ）を指定できるがインライン要素はできない
- CSSのdisplayプロパティで他の要素へ変換できる
