Web開発初心者の方が最初につまずく例として次のようなものがあります。

これはブロックレベル要素やインライン要素という基本概念がまだ理解しきれていないがために起きている可能性があります。

この記事では、display: block について知る上で、欠かせないブロックレベル要素という概念についてわかりやすく解説します。

３分程度で理解できる内容です。よかったら最後までご覧ください。

display:block とは？

display: block はCSSプロパティの一つです。これを任意の要素に適用することで、その要素にブロックレベルの特性を与えます。

HTMLの要素は大きく分けて、「ブロックレベル要素」と「インライン要素」の2つのカテゴリーに分類されます。display: block プロパティの理解と適切な使用方法は、ホームページを作る上で不可欠です。

少しずつ解説していきますので、最後までぜひご覧ください！

ブロックレベル要素の特性を持つHTMLとは？

HTMLにおいて、デフォルトでブロックレベル要素として振る舞う要素には、<div>、<p>、<h1>などがあります。これらの要素は、特にdisplay: blockというスタイルを指定しなくても、ブロックレベル要素の特性を持ちます。

一方で、デフォルトでインライン要素として振る舞う代表的なHTML要素には、<span>、<a>、<img>などがあります。

インライン要素は、ブロックレベル要素と比較して扱いにくい特徴があり、必要に応じてインライン要素に display: block を指定しブロックレベル要素の特性を持たせます。これにより、幅広い用途で使用することが可能となります。

次にブロックレベル要素の特性について詳しく解説していきます。

ブロックレベル要素の特性

ブロックレベル要素の特性を簡単にあげると以下5つあります。

• 1. 親要素の大きさが継承される
• 2. ブロックレベル要素は新しい行から始まる
• 3. 幅や高さ、余白が指定できる
• 4. marginプロパティを利用した配置が可能
• 5. マージン相殺が起こる

これは、display:blockの特性ともいえます。言葉で説明してもわかりにくいかと思いますので、以下で図を使って解説していきます。

1. ブロックレベル要素は親要素の幅が継承される

上記の図をソースコードで表すと以下のようになります。

<div>
  <p>ブロックレベル要素</p>
</div>

div{
  width: 800px;
}

HTMLコードのうち親要素とは、divタグを指します。 pタグにはCSSで幅を指定してませんが、pタグは親要素の幅800pxを継承し、pタグの大きさは800pxとなります。

ブロックレベル要素は、親要素の幅を継承し、利用可能な最大幅まで自動的に広がる特性を持っています。

2. ブロックレベル要素は新しい行から始まる

上記の図をソースコードで表すと以下のようになります。

<p>ブロックレベル要素</p>
<p>ブロックレベル要素</p>

ブロックレベル要素のpタグを2つ書きました。ブロックレベル要素は新しい行から始まり、その要素の後に続く要素は新しい行に配置される特性を持ちます。

3. ブロックレベル要素は、幅や高さ、余白が指定できる

ブロックレベル要素は、幅や高さ、余白(マージンとパディング)を指定することができます。これによりページ上での要素の配置やサイズを細かくコントロールすることができる特性を持ちます。

※ブラウザによって若干挙動が異なることがあります。

aタグにwidthを指定しても適応されないのは、aタグがインライン要素でwidthプロパティを指定しても適応されないからだね。

4. ブロックレベル要素は、marginを利用した配置が可能

上記で述べた通り、ブロックレベル要素ではマージンやパディングといった余白の指定が可能です。特に、marginプロパティを用いた配置はブロックレベル要素の代表的な特性の一つです。

marginプロパティを用いた配置を使用すると、要素を中央寄せや右寄せの配置にすることが可能です。またネガティブマージンを利用し、上下のコンテンツと被せるなどのレイアウトも作ることができます。

marginとautoで、中央寄せにする

上記の例では、ブロックレベル要素、インライン要素ともに大きさを指定し中央に配置するために、margin-left: auto と margin-right: auto を指定しています。ブロックレベル要素は、中央に配置されているのに対し、インライン要素は大きさも配置も適用されないことがわかります。

ブロックレベル要素において、margin-left と margin-right に auto を設定すると、ブラウザは利用可能な水平方向の空間を均等に分割して、その要素の左右に配置します。結果として、要素は水平方向の中央に配置されることになります。

imgタグにmargin: 0　auto を指定しても反映されなかったのは、imgタグがインライン要素でマージンを指定ができなかったからか…

margin-left: autoで、右寄せにする

上記で解説したCSSのマージン自動計算機能(margin-left: auto)を利用するとブロックレベル要素を右に配置することも可能です。

ネガティブマージンを使用し、要素を重ねる

ネガティブマージンとは、CSSで要素のマージン(余白)に負の値を指定することにより、通常の配置から要素を「引き出す」ことができるテクニックです。

これにより、要素の位置を微調整したり、要素同士を重ねたり、特定のレイアウト効果を実現することが可能になります。ネガティブマージンは、marginが適応できる要素 = ブロックレベル要素でないと適応されません。

5. マージンの相殺が起こる

マージンの相殺とは、CSSにおいて隣接するブロックレベル要素の間でマージンが結合される現象です。この挙動は、縦方向のマージンで起こります。

マージンの相殺が起こる条件

display: block がインライン要素の悩みを解決してくれる

インライン要素は、ブロックレベル要素と比較すると扱いづらい場合があります。

そのような場合に、該当のタグにdisplay: block を追加することで、簡単にブロックレベル要素と同様の振る舞いをさせることが可能です。

span{
  display: block;
}

display: block の指定は、Web開発で頻繁に使用されるため、このプロパティの働きと使い方を覚えておくことが重要です。

ブロックレベル要素のHTMLタグ一覧

以下は、一般的なブロックレベル要素のHTMLタグ一覧です。

• div … 汎用のコンテナとして使用され、特にスタイルやレイアウトを適用するために使われます。
• p … 段落を定義します。
• h1, h2, h3, h4, h5, h6 … 見出しを定義し、h1が最も重要で、h6が最も重要度が低い。
• ul … 順不同リストを定義します。
• ol … 順序付きリストを定義します。
• li … リスト項目を定義します。ulやol内で使用します。
• blockquote … 長い引用を定義します。
• pre … 書式設定済みのテキストを定義します。テキストは通常、等幅フォントで表示され、空白文字もそのまま表示されます。
• table … 表を定義します。
• hr … 水平線を定義し、セクションの区切りとして使用されます。
• figure … 独立したコンテンツ（例: 図表、写真、コードリストなど）を定義します。
• figcaption … figure要素内のキャプションまたは説明を定義します。

まとめ

この記事では、display: block = ブロックレベル要素の特性をご紹介しました。特性には以下の5つがあります。

• 親要素の大きさが継承される
• ブロックレベル要素は新しい行から始まる
• 幅や高さ、余白が指定できる
• marginプロパティを利用した配置が可能
• マージン相殺が起こる

コーディングを進める上で、ブロックレベル要素の特性をきちんと理解しておくことはとても重要です。これにより、予期せぬ挙動や指定が反映されないといった問題を避けることができ、作業の効率を大幅に向上させることができます。この機会に、ブロックレベル要素の特性を理解し、よりスムーズなWeb開発を目指しましょう！

この記事ではインライン要素の特性について簡単に触れましたが、以下の記事では図を交えてより詳細に解説しています。より深く理解を深めたい方は、ぜひその記事も参照してみてください

display:inline、inline-blockの特徴を3分で理解し使いこ…