インライン要素
初級読み方：インラインようそ｜英語：Inline Element
前後で改行されず、文の流れの中に入る要素だよ。例：span, a, img。いつ使う？ 文章の一部だけ色を変えたい（span）、リンクを貼りたい（a）、文中に画像を入れたい（img）ときに使うよ。間違いやすいポイント: インライン要素にはwidth・heightやmargin-top・margin-bottomが効かないよ。サイズを変えたいときはdisplay: inline-block;をCSSで指定しよう。
やさしい説明
インライン要素とは、前後で改行されず、文の中に配置される要素です。内容の幅だけを占めます。
筆箱の中の文房具に例えるとわかりやすいです。ペン、消しゴム、定規が横に並んでいますよね。インライン要素も同じで、文章の中に横並びで配置されます。
代表的なインライン要素は <span>、<a>、<strong>、<em>、<code>、<img> などです。テキストの一部を装飾したり、リンクにしたりするときに使います。
インライン要素にはCSSで幅（width）や高さ（height）を設定しても効きません。上下のmarginも効かないので注意が必要です。
図解
具体例・使い方
<!-- インライン要素は文の中に並ぶ -->
<p>
これは<strong>重要な</strong>お知らせです。
<a href="/detail">詳しくはこちら</a>
</p>
<!-- 結果：
これは【重要な】お知らせです。詳しくはこちら
（すべて1行の中に並ぶ）
-->いつ使う？
文章の一部だけを太字にしたいとき（strong）、リンクにしたいとき（a）、色を変えたいとき（span）など、テキストの中の一部分を装飾するときに使います。
間違いやすいポイント
❌ インライン要素にwidth/heightを指定しても効かない
<!-- ❌ spanにwidthを指定しても無視される -->
<span style="width: 200px;">効かない</span>
<!-- ✅ display: inline-block にすれば効く -->
<span style="display: inline-block; width: 200px;">効く</span>❌ インライン要素の中にブロック要素を入れる
<span> の中に <div> を入れるのはルール違反です。ただし <a> タグだけは例外で、中にブロック要素を入れてもOKです。
よくある疑問
Q: インライン要素の中にブロック要素を入れていい？
A: HTML5では一部許可されていますが、基本的にはブロック要素の中にインライン要素を入れるのが正しい構造です。
Q: インライン要素にwidthを指定しても効かないのはなぜ？
A: インライン要素は内容の幅に合わせて自動で大きさが決まるため、widthやheightが無視されます。display: inline-block;にすれば効くようになります。
Q: 代表的なインライン要素は？
A: <span>、<a>、<img>、<strong>、<em>、<br>、<input>、<label>などです。
関連用語
📖 関連レッスン
レッスンを見る →