ブロックレベル要素とインライン要素の理解と注意点
ブロックレベル要素とインライン要素の理解と注意点
この記事は、プログラミング初心者である筆者が、学習の過程でつまずいた経験をもとに備忘録としてまとめたものです。ブロック要素とインライン要素の理解不足から、CSSで思い通りのデザインができなかった経験に焦点を当てています。この内容が、似たような状況で困っている方の手助けになれば幸いです。
1. ブロックレベル要素とは？
Webページの各パーツをグループ化し、ページ全体のレイアウトを構成する要素です。
（箱のようなイメージ📦）
・横幅・高さの指定ができる
・親要素の横幅と同じ初期値になる
・高さの初期値は内容に依存する
・改行されて表示される
・デフォルトで余白が付く場合がある
ブロック要素の代表
<div>,<p>,<h1>～<h6>,<section>,<article>,<header> / <footer>,<ul> / <li>
<section>
<h1>見出しです</h1>
<p>これは段落です。コンテンツをまとめています</p>
</section>
2. インライン要素とは？
インライン要素は、文章の一部として同じ行に並び続ける要素です。ブロックレベル要素の中で使われます。
・横幅・高さの指定ができない
・横幅の初期値は内容に依存する
・高さの初期値も内容に依存する
・同じ行に並び表示される
・上下に特殊な余白が付くことがある
インライン要素の代表
<a>,<span>,<strong>,<em>,<img>,<input>
<p>リンクはこちら <a href="#">Example</a> </p>
<p><span style="color: red;"></span></p>
3. コードを書くときの注意点
▶️ブロック要素の中にインライン要素を含めるのはOKですが、インライン要素の中にブロック要素はNG。
⭕️OK例:ブロック要素にインライン要素を含める
<div>
<p>これは段落です<a href="#"></a></p>
</div>
<div>（ブロック要素）の中に、<p>（ブロック要素）と<a>（インライン要素）を含めているのでOK。
❎NG例:インライン要素の中にブロック要素を含める
<span>
<div>これはNGです</div>
</span>
<span>（インライン要素）の中に、<div>（ブロック要素）を含める。これは不適切な使い方で、ブラウザで予期しない動作を引き起こす可能性がある。
▶️レイアウト構築には<div>や<section>を、装飾やリンクには<a>や<span>を使うと良い。
レイアウト構築に<div>や<section>を使用
<section>
<div class="header">
<h1>サイトタイトル</h1>
</div>
<div class="content">
<p>ここにメインのコンテンツが入ります</p>
</div>
</section>
<section>はページ全体のセクションを分けるのに使い、<div>は部分ごとにレイアウト整理。
装飾やリンクに<a>や<span>を使用
<p>こちらから <a href="#">リンク</a> をクリックしてください</p>
<p><span style="color: red;"></span></p>
<a>はリンクに使い、<span>は部分的なテキスト装飾に用いる。
▶️CSSのdisplayプロパティblock,inline,inline-blockを活用して、無駄な<div>の多用を避ける。
display: block;: ブロック要素として表示
<p style="display: block;">これはブロック要素として表示されます。</p>
<p style="display: block;">この要素は新しい行から始まります。</p>
display: inline;: インライン要素として表示
<span style="display: inline;">これは</span>
<span style="display: inline;">同じ行に並びます。</span>
display: inline-block;: インラインの特性を持ちながら高さや幅を調整可能
<span style="display: inline-block;
width: 100px; height: 50px; background-color: lightgray;">
</span>
<span style="display: inline-block;
width: 100px; height: 50px; background-color: lightblue;">
</span>
まとめ
ブロック要素はレイアウトの基盤となり、インライン要素はテキストやリンクの装飾に使われます。正しく要素を使い分けることで、思い描いたレイアウト設計と保守しやすいコードを書くことができるでしょう。また、CSSのdisplayプロパティを活用することで、インライン要素にも幅や高さの調整が可能となり、柔軟なデザインが行えます。引き続き学習を続けていきます！
参考
Discussion