HTMLにおけるインラインレベル要素（またはインライン要素）は、テキストの流れを中断せずに他のテキストと同じ行に配置される要素です。ブロックレベル要素がコンテンツのブロックを形成し、新しい行で始まるのに対し、インライン要素は周囲のテキストや他のインライン要素と並んで表示されます。
インライン要素の特徴
インライン要素の主な特徴を紹介します。
フローの中断をしない
インライン要素は、テキストやその他のコンテンツの流れを中断しません。新しい行を始めずに、既存の行の中で他のテキストと連続して配置されます。
コンテンツの幅を取る
インライン要素は、そのコンテンツに必要な幅だけを占めます。余分なスペースは取らず、コンテンツの直後で終了します。
ブロックレベル要素内に配置可能
インライン要素は、通常、ブロックレベル要素（例えば <div>、<p> など）の内部に配置されます。
マージンとパディングの制限
インライン要素は、左右のマージンとパディングを適用することはできますが、上下のマージンとパディングはブロックレベル要素のように影響を与えません（いくつかのブラウザでは上下のパディングやマージンが表示されることがありますが、周囲の要素のフローには影響しません）。
行内の改変に適している
インライン要素は、テキストの一部を強調表示したり、スタイルを変更するために使用されます（例えば、<span>、<a>、<strong>、<em> など）。
ネスト可能
インライン要素は他のインライン要素の内部にネストすることが可能ですが、通常はブロックレベル要素を内包することはできません。
ボックスモデルの適用
インライン要素はボックスモデルを適用しますが、ブロックレベル要素のような「ボックス」としては振る舞いません。例えば、width や height プロパティはインライン要素には適用されません。
インライン要素の例
よく知られているインライン要素には、以下のようなものがあります。
<span>: 汎用のインラインコンテナ。<a>: ハイパーリンクを作成。<em>: テキストを強調表示。<strong>: テキストを強く強調表示。<img>: 画像を埋め込み。<br>: 改行（これはインライン要素ですが、自己閉じタグであり、コンテンツを持ちません）。
インライン要素は、特定の文書のセクションやデザインにおいて、柔軟なスタイリングと構造を提供するために重要です。
一般的なインライン要素
<a>
ハイパーリンクを作成し、他のページや同じページの異なるセクション、他のウェブサイトへのリンクを提供します。
<a href="https://www.example.com">Visit Example.com</a><span>
汎用のインラインコンテナで、CSSを適用するためや、ドキュメント内で小さな部分にスタイルを適用するために使用します。
<span style="color: blue;">This text is blue.</span><strong>
テキストを強調して意味の重要性を示すために使用され、通常は太字で表示されます。
<strong>Important text</strong><em>
テキストを強調して、強いトーンや強度を示すために使用され、通常はイタリック体で表示されます。
<em>Stressed emphasis</em><b>
テキストを太字で表示するために使用されますが、<strong>とは異なり、特別な重要性や緊急性は示しません。
<b>Bold text</b><i>
テキストをイタリック体で表示するために使用されますが、<em>とは異なり、特別な強調や感情は示しません。
<i>Italic text</i><img>
画像をドキュメントに埋め込むために使用されます。
<img src="image.jpg" alt="Description"><br>
改行を挿入し、テキスト内で新しい行を開始します。
Hello,<br>World!<sub> と <sup>
下付き文字や上付き文字を表示するために使用されます。化学式や数学的指数に使われることが多いです。
H<sub>2</sub>O (水)
The 5<sup>th</sup> element (第5元素)<code>
インラインのコードスニペットを表示するために使用され、通常は固定幅フォントで表示されます。
<code>for (int i = 0; i < 5; i++)</code><cite>
作品のタイトルや参照を示すために使用されます。
<cite>The Scream</cite> by Edvard Munch.<q>
短い引用文を表示するために使用され、通常は引用符で囲まれます。
<q>Life is what happens when you're busy making other plans.</q>これらの要素は、それぞれ異なる意味や目的を持っており、適切な文脈で使用することが重要です。インライン要素は、他のテキストやコンテンツの流れに直接挿入されることで、ドキュメントのセマンティックな構造とアクセシビリティを向上させることができます。
インライン要素とCSS
CSSを使用して、これらのインライン要素の見た目をカスタマイズし、特定のスタイリングを適用することができます。
インライン要素の特性
- フロー中断なし: ブロック要素と異なり、インライン要素はフローを中断せずに他のテキストと同じ行に配置されます。
- 幅と高さの扱い: インライン要素に対して
widthとheightプロパティを設定しても効果がありません。これらの要素は、その内容に基づいてサイズが決定されます。 - 上下マージンとパディング: インライン要素に対する上下のマージンとパディングは、外側のフローには影響を与えませんが、要素の表示には影響します。
- 左右マージンとパディング: 左右のマージンとパディングはインライン要素に対して効果があり、要素の左右のスペースを調整できます。
CSSでのスタイリング
インライン要素のCSSスタイリングは次のように行われます：
テキストの色とフォントスタイルの変更
a {
color: blue;
text-decoration: none; /* 下線を消す */
}
em {
font-style: italic;
}背景色とパディングの追加
span {
background-color: yellow;
padding: 2px 5px;
}インライン要素の表示変更
デフォルトではインライン要素ですが、display プロパティを使用してブロック要素やインラインブロック要素に変更することができます。
span {
display: block; /* インライン要素をブロック要素に変更 */
}または、インライン要素の特性を保ちつつ、幅と高さを適用可能にするためにインラインブロックに変更します。
span {
display: inline-block; /* インライン要素をインラインブロック要素に変更 */
}インライン要素に対するホバーエフェクトの適用
a:hover {
color: red; /* リンクにマウスを乗せたときの色 */
}インライン要素を使ったレイアウトの調整
インライン要素を使って、特定の部分にだけ特別なレイアウトを適用することができます。
span.highlight {
background-color: black;
color: white;
}インライン要素とCSSの注意点
- インライン要素に
widthとheightプロパティを適用しても効果がないことを覚えておきましょう。インラインブロック要素に変更することで、これらのプロパティを利用できるようになります。 - 上下のマージンとパディングは、文書フローに影響を与えませんが、要素自体には適用されます。したがって、これらを使用するときはその視覚的効果に注意してください。
- インライン要素は通常、テキストや他のインライン要素とともに配置されます。ブロックレベルのコンテキスト内でのみインライン要素を使用することを推奨します。
これらの基本を理解することで、ウェブページ上のインライン要素を適切にスタイリングし、さまざまなビジュアルエフェクトを実現することができます。
最後に
インライン要素は、主にテキストコンテンツの中で小さな部分にスタイルを適用したり、特定の機能（リンクやフォームコントロールなど）を提供したりするために使用されます。適切な使用は、コンテンツのセマンティックな意味を保ちつつ、ウェブページのレイアウトとデザインに柔軟性を提供します。