インライン要素ってなに？
独学だと知らずにコーディングしている人もいるかも！（私のように）
インライン要素は、例えば<a>、<img>など、ページの中身の一部分を特別に飾るためのものです。
太字にしたり、リンクをつけたりするのがこのインライン要素です。
CSS インライン要素の基本
インライン要素とは？
CSSのインライン要素は、HTML文書内でテキストや他の要素をスタイル付けるために使用される要素の一部です。
インライン要素は、ブロック要素とは異なり、コンテンツが横並びに表示される特性を持っており、テキスト内の特定の部分をスタイル付けたり、画像やリンクを周りのテキストと統合したりするのに使います。
ブロック要素との違い
インライン要素とブロック要素の違いは、主に要素が表示される方法です。
ブロック要素は通常、新しい行から始まり、幅全体を占有します。
一方で、インライン要素はテキストの一部として横並びに表示され、コンテンツの前後に改行が挿入されません。
インライン要素の特性
テキスト要素
インライン要素の中で最も一般的なのは、テキスト要素です。
これには<span>や<em>などが含まれます。
テキスト要素をスタイリングすることで、特定のテキストを太字にしたり、背景色を変更したりできます。
画像要素
CSSを使用して画像要素（<img>）をスタイリングすることも可能です。
画像のサイズ、位置、余白などを調整して、ページのデザインに統合できます。
リンク要素
リンク要素（<a>）をスタイリングすることで、ハイパーリンクの色、下線のスタイル、ホバーエフェクトなどをカスタマイズできます。
インライン要素のタグ例
インライン要素には、以下のようなタグが例として挙げられます。
| <a> | リンク |
| <span> | 一部をグループ化 |
| <em> | 強調（斜体） |
| <strong> | 強調（斜体） |
| <i> | 斜体 |
| <b> | 太字 |
| <u> | 下線 |
| <br> | 改行 |
| <img> | 画像 |
<a>タグ
ハイパーリンクを作成します。
<a>タグで囲まれたテキストや画像をクリックすることで別のウェブページに遷移できます。
<span>タグ
テキストの一部をグループ化し、スタイルを適用するために使用されます。
テキスト内の特定の部分にスタイルを適用できます。
<p>の中の一部だけ色を変えたい、などの時に便利です。
<em>タグ
強調テキストを表現します。
通常、斜体で表示され、文章内で強調したい部分を示します。
<i>と違うのは、「強調」という意味のある斜体だという点です。
<strong>タグ
テキストを強調表示するために使用されます。
通常、太字で表示され、文章内の重要な部分を示します。
<b>と違うのは、「強調」という意味のある太字だという点です。
<i>タグ
テキストを斜体で表示します。
<b>タグ
テキストを太字で表示します。
<u>タグ
テキストに下線を追加します。
<p>の中の一部に下線を引きたい、などの時に使用しています。
<br>タグ
改行要素です。テキスト内で改行を挿入するために使用されます。
<img>タグ
画像要素を表示します。
インライン要素でできないこと
インライン要素ではできないことがいくつかあります。
もしコーディングでうまくいかない時は、以下を確認してみてください。
margin、paddingなど余白を指定する
marginやpaddingといった余白を指定することはできません。
あくまでブロックの中にある小さな要素なので、そこに余白を入れたい場合はブロック要素を使用します。
幅、高さを指定する
幅、高さも指定できません。
こちらも幅や高さを指定したい場合はブロック要素を使用しましょう。
要素との間の自動改行
例えば<p></p>と<div></di>の間には、自動的に改行が入ります。
ですが、<img>と<img>の間には改行は自動的に入りません。
意図的に改行を入れたい場合は<br>を使用するか、classなどをつけてスタイルシートで指定します。
コンテナとしての機能
コンテナ（箱）としての機能はありません。
複数の要素を囲うのはブロック要素で行いましょう。
テキストブロックの作成
段落や見出しといったテキストブロックの作成もできません。
インライン要素は、それらの中の一部を変更する時に使われます。
どうしてもインライン要素が苦手なことをできるようにしたい時は…？
例えば、経験上であったのが、
<h2>私たちについて<small>ABOUT</small></h2>
の<small>をスマホ表示時は改行したい、という時です。
<small>はインライン要素なので、改行させたり幅や余白を持たせたりすることはできません。
対処法１ display:blockをsmallに指定する
small {
display:block;
}display:block;を指定することで、smallをブロック要素化することができます。
この一行だけで、自動的に改行させることができます。
レスポンシブ限定で改行させたい時は
@media(max-width:768px) {
small {
display:block;
}
}メディアクエリで768px以下の時だけ指定するようにします。
対処法２ <br>にスマホ専用のclassをつけてスマホ時だけスタイルを指定
<h2>私たちについて<br class="sp"><small>ABOUT</small></h2>@media(min-width:769px) {
br.sp {
display:none;
}
}htmlに<br class=”sp”>を挿入し、min-width:769px(769px以上の画面サイズの時）だけ表示しない指示を書きます。
すると、スマホ時だけbrが適用されることになり、改行が可能になります。
実は詳しく知らないインライン要素
実は、私はプロになって何年も「インライン要素」というものの理屈をよく知りませんでした。
なんとなくでコーディングしてきたので（真似しちゃいけない）インライン要素とかブロックとか要素の名前までは把握していませんでした。
独学の闇です。
ですがしっかりと理解することで、今後のコーディングの精度が上がったり、ついやりがちな「無理やりコーディング」がなくなって、綺麗なコードが書けるようになります。
「あれ？なんで動かないの？」という無駄な原因究明作業も無くなります。
まだ不明確だった方は、この機会に是非覚えていってくださいね！
独学に限界を感じている方は
スクールにお金を払うことに抵抗があって、独学でWEB制作にチャレンジしている方は、無料から始められるスクールで基礎を学んでみませんか？
