インライン要素
初級読み方：インラインようそ｜英語：Inline Element
前後で改行されず、文の流れの中に入る要素だよ。例：span, a, img。
やさしい説明
インライン要素とは、前後で改行されず、文の中に配置される要素です。内容の幅だけを占めます。
筆箱の中の文房具に例えるとわかりやすいです。ペン、消しゴム、定規が横に並んでいますよね。インライン要素も同じで、文章の中に横並びで配置されます。
代表的なインライン要素は <span>、<a>、<strong>、<em>、<code>、<img> などです。テキストの一部を装飾したり、リンクにしたりするときに使います。
インライン要素にはCSSで幅（width）や高さ（height）を設定しても効きません。上下のmarginも効かないので注意が必要です。
図解
具体例・使い方
<!-- インライン要素は文の中に並ぶ -->
<p>
これは<strong>重要な</strong>お知らせです。
<a href="/detail">詳しくはこちら</a>を確認してください。
</p>
<!-- 結果：
これは【重要な】お知らせです。詳しくはこちらを確認してください。
（すべて1行の中に並ぶ）
-->主なインライン要素一覧
a— リンク。テキストや画像をクリック可能にするspan— 汎用インラインコンテナ。意味を持たない装飾に使うstrong— 重要な強調（太字で表示）em— 読み上げ上の強調（斜体で表示）code— コードや技術的なテキストimg— 画像（インライン要素だが width/height が効く特例）br— 改行（空要素）
img はインライン要素ですが、例外的に width と height が効きます。また display: block にするとブロック要素として扱えます（画像の中央揃えに使う定番テクニック）。
いつ使う？
文章の一部だけを太字にしたいとき（strong）、リンクにしたいとき（a）、色を変えたいとき（span）など、テキストの中の一部分を装飾するときに使います。
間違いやすいポイント
❌ インライン要素に width / height を指定しても効かない
span などのインライン要素には幅・高さが効きません。サイズを指定したい場合は display: inline-block に変更しましょう。
/* ❌ spanにwidthを指定しても無視される */
span { width: 200px; } /* 効かない */
/* ✅ display: inline-block にすれば効く */
span { display: inline-block; width: 200px; }❌ インライン要素の中にブロック要素を入れる
<span> の中に <div> を入れるのはHTMLの仕様違反です。ただし <a> タグは例外で、中にブロック要素を入れることができます（カード全体をリンクにするパターン）。
よくある疑問
Q: インライン要素の中にブロック要素を入れていい？
A: HTML5では一部許可されていますが、基本的にはブロック要素の中にインライン要素を入れるのが正しい構造です。
Q: インライン要素にwidthを指定しても効かないのはなぜ？
A: インライン要素は内容の幅に合わせて自動で大きさが決まるため、widthやheightが無視されます。display: inline-block;にすれば効くようになります。
Q: 代表的なインライン要素は？
A: <span>、<a>、<img>、<strong>、<em>、<br>、<input>、<label>などです。
関連用語
- ブロック要素 — 前後で改行されて横幅いっぱいに広がる要素
- 要素 — インライン要素はHTML要素の種類の一つ
- display: inline vs block — CSS の display プロパティでインライン・ブロックを切り替える
📖 関連レッスン
レッスンを見る →