見出し画像

【CSS】displayの使い方について

Yuta

こんにちは、Yutaです。
今回は「displayの使い方」について、初心者向けにわかりやすく解説していきます！

CSSのdisplayプロパティは、要素が画面上でどのように表示され、周囲の要素とどう関わるかを決定する、レイアウトの核心となる設定です。

基本的な値から現代的なレイアウト手法まで、要点を絞って解説します。


1. displayプロパティの役割

すべてのHTML要素には、あらかじめ「初期値」としての表示形式が割り当てられています。displayプロパティを使うことで、その要素を「ブロック」として扱うか、「インライン」として扱うかなどを自由に変更できます。


2. 基本的な4つの値

まずは、最も頻繁に使用される基本的な値から見ていきましょう。

block（ブロック）

要素を一つの「塊」として扱います。

  • 特徴: 常に新しい行から始まり、横幅いっぱいに広がります。widthやheightを指定できます。

  • 代表的な要素: <div>, <h1>, <p>, <ul>

inline（インライン）

要素を「行の一部」として扱います。

  • 特徴: テキストのように横に並び、コンテンツに必要な幅だけを占有します。widthやheight、上下のmarginを指定することはできません。

  • 代表的な要素: <span>, <a>, <strong>

inline-block（インラインブロック）

「インライン」と「ブロック」のいいとこ取りをした設定です。

  • 特徴: 横に並びながらも、widthやheight、上下の余白を指定できます。

  • 用途: 横に並ぶボタンや、ナビゲーションメニューのリンク。

none（非表示）

要素を画面から完全に消し去ります。

  • 特徴: 存在そのものがなかったかのように扱われ、その要素が占めていたスペースも詰められます。

  • 用途: JavaScriptと組み合わせて、クリックした時だけメニューを表示させる際などに使用します。


3. 現代的なレイアウト手法

現在、複雑なレイアウトを組む際は以下の2つが主流となっています。

  • display: flex;: 1次元（横または縦）の整列に特化した手法。要素を横並びにしたり、中央に揃えたりするのが得意です。

  • display: grid;: 2次元（縦と横の両方）のレイアウトに特化した手法。複雑なタイル状の配置を正確に行えます。


4. 各値の比較表

値並び方幅・高さの指定用途block縦に並ぶ（改行される）可能セクション、段落、大枠inline横に並ぶ不可テキストの一部、装飾inline-block横に並ぶ可能ボタン、カードリストnone表示されない-要素の一時的な非表示


5. まとめ

  • displayは要素の「箱の種類」を変えるプロパティ。

  • 横に並べたいのか、縦に積みたいのかで値を選択する。

  • 余白やサイズを自由に制御したい場合は、blockかinline-blockにする。

  • 複雑な並びにはflexやgridを活用する。

displayを適切に指定することで、崩れにくい堅牢なレイアウトを構築できるようになります。


「わかる〜！」とか「助かった〜！」と思ったら、
イイネしてもらえるとすごくうれしいです！

次の記事もどうぞよろしくお願いします！

いいなと思ったら応援しよう！