お知らせ
PICK UP
おすすめ
HTML
CSS
display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】
Web開発初心者の方が最初につまずく例として次のようなものがあります。
Web開発初心者の方がつまずきがちな例
- aタグにwidthを指定しているのに適応されない
- imgタグに
margin: 0 auto
を指定しても反映されない etc…
これはブロックレベル要素やインライン要素という基本概念がまだ理解しきれていないがために起きている可能性があります。
この記事では、display: block
について知る上で、欠かせないブロックレベル要素という概念についてわかりやすく解説します。
3分程度で理解できる内容です。よかったら最後までご覧ください。
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. ブロックレベル要素は親要素の幅が継承される
上記の図をソースコードで表すと以下のようになります。
HTML
<div>
<p>ブロックレベル要素</p>
</div>
CSS
div{
width: 800px;
}
HTMLコードのうち親要素とは、divタグを指します。 pタグにはCSSで幅を指定してませんが、pタグは親要素の幅800pxを継承し、pタグの大きさは800pxとなります。
ブロックレベル要素は、親要素の幅を継承し、利用可能な最大幅まで自動的に広がる特性を持っています。
インライン要素は、親要素の大きさを継承しない
インライン要素は、親要素の幅は継承せず、インライン要素に含まれるコンテンツ(文字など)の幅に基づいてサイズが決定されます。
2. ブロックレベル要素は新しい行から始まる
上記の図をソースコードで表すと以下のようになります。
HTML
<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
を設定すると、ブラウザは利用可能な水平方向の空間を均等に分割して、その要素の左右に配置します。結果として、要素は水平方向の中央に配置されることになります。
ポイント
marginプロパティを用いた配置が適用される条件は、ブロックレベル要素で、なおかつ要素に幅(width
プロパティ)が指定されていることです。
ただし、width: 100%
のように親要素の幅を完全に占める設定になっている場合、左右に割り当てるための余分な空間が存在しないため、結果として中央寄せは適応されません。
imgタグにmargin: 0
を指定しても反映されなかったのは、imgタグがインライン要素でマージンを指定ができなかったからか…auto
margin-left: autoで、右寄せにする
上記で解説したCSSのマージン自動計算機能(margin-left: auto
)を利用するとブロックレベル要素を右に配置することも可能です。
ネガティブマージンを使用し、要素を重ねる
ネガティブマージンとは、CSSで要素のマージン(余白)に負の値を指定することにより、通常の配置から要素を「引き出す」ことができるテクニックです。
これにより、要素の位置を微調整したり、要素同士を重ねたり、特定のレイアウト効果を実現することが可能になります。ネガティブマージンは、marginが適応できる要素 = ブロックレベル要素でないと適応されません。
5. マージンの相殺が起こる
マージンの相殺とは、CSSにおいて隣接するブロックレベル要素の間でマージンが結合される現象です。この挙動は、縦方向のマージンで起こります。
マージンの相殺が起こる条件
縦方向のマージン同士は相殺する
縦方向(上下)の隣接するブロックレベル要素の間では、2つの要素の間のマージンがそのどちらか大きい方のマージンのみとして計算されます。
親要素と最初の子要素、または最後の子要素は相殺する
親要素のmargin-top
とその最初の子要素のmargin-top
、または親要素のmargin-bottom
とその最後の子要素のmargin-bottom
の間でも相殺が起こり得ます。
display: block がインライン要素の悩みを解決してくれる
インライン要素は、ブロックレベル要素と比較すると扱いづらい場合があります。
そのような場合に、該当のタグにdisplay: block
を追加することで、簡単にブロックレベル要素と同様の振る舞いをさせることが可能です。
CSS
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分で理解し使いこ…