【CSS解説】displayプロパティの種類と使い方まとめ

2024年8月1日2024年8月27日

misa

こんにちは、ウェブデザインパレットのmisaです。

CSSのdisplayプロパティは、HTML要素の表示方法を指定するための重要なプロパティです。

displayプロパティによって、要素をどのようにページ上に配置するかを指定することができます。

displayプロパティを理解し適切に使用することで、レイアウトの柔軟性が大幅に向上します。

今回は、displayプロパティの主な値とその使用方法について詳しく解説します。

displayプロパティの役割

displayプロパティは、要素のレイアウトや表示方法を決定するために使用されます。

ブロックボックス、インラインボックス、フレックスボックス、グリッドレイアウトなど、要素の表示方法を指定します。

ページ全体のレイアウトを構築する上で、displayプロパティは基盤となります。

displayプロパティの主な値

displayプロパティには主に以下の値があります。

値	説明
block	要素をブロックボックスとして表示します。要素の前後には改行が入り、縦に並びます。 👉 <div>、<p>、<h1>～h6>、<ul>などのタグの初期値
inline	要素をインラインボックスとして表示します。要素の前後には改行が入らず、横に並んでいきます。 👉 <a>、<span>、<img>などのタグの初期値
inline-block	要素はインラインボックスのように横並びに配置されますが、ブロックボックスのように幅と高さを設定できます。
flex	フレックスボックスレイアウトを適用します。子要素を横並び・縦並びに柔軟に配置できます。
grid	グリッドレイアウトを適用します。子要素を2次元グリッド上に配置できます。
table	要素をテーブルとして表示します。
list-item	リストアイテムとして表示。
none	要素を非表示にします。
その他	`table`、`list-item`、`inline-flex`、 `inline-grid` など様々な値があります。

タグごとにdisplayプロパティの初期値が決まっています。
ほとんどのタグはblockもしくはinlineが初期値となっています。

各値の具体的な例

今回は、主要な6つのプロパティについて解説していきます。

1. block

display: blockは要素をブロックボックスとして表示します。
要素の前後には改行が入り、縦に並びます。

<div>、<p>、<h1>～h6>、<ul>などのタグの初期値

display: blockの特徴

前後に改行が入り、縦に並ぶ
幅は親要素いっぱいに広がる
heightとwidthプロパティが有効
margin ･paddingの全方向の値が有効

HTML

<p class="display-block">これはブロックボックスです。</p>
<p class="display-block">これはブロックボックスです。</p>
<p class="display-block">これはブロックボックスです。</p>

CSS

.display-block {
  display: block;
  width: 300px;
  height: 100px;
  background-color: #ffa07a;
  border: solid 1px #333;
  padding:8px;
  margin:8px;
}

これはブロックボックスです。

応用：インラインボックスをブロックボックスに変更

display: inlineの要素をdisplay: blockにすることで、幅や高さを指定できるようになります。

例えば、通常インラインボックスである<a>タグをブロックボックスに変更し、ボタンのような外観を持たせることができます。

HTML

<a href="#">インラインボックスのリンク</a>
↓
<a href="#" class="button">ブロックボックスのリンク</a>

CSS

a.button {
  display: block;
  width: 200px;
  text-align: center;
  padding: 10px;
  background-color: #87ceeb;
  color: white;
  text-decoration: none;
}

インラインボックスのリンク
↓ ブロックボックスのリンク

2. inline

display: inlineは要素をインラインボックスとして表示します。
要素の前後には改行が入らず、横に並んでいきます。

<a>、<span>、<img>などのタグの初期値

display: inlineの特徴

改行が入らず、横に並ぶ
コンテンツの幅だけ占める
heightとwidthプロパティは無効
margin･paddingは左右のみ有効

HTML

<span class="display-inline">これはインラインボックスです。</span>
<span class="display-inline">これはインラインボックスです。</span>
<span class="display-inline">これはインラインボックスです。</span>

CSS

.display-inline {
  display: inline;
  background-color: #ffa07a;
  padding: 0 8px;
  margin-right: 8px;
}

これはインラインボックスです。これはインラインボックスです。これはインラインボックスです。

応用：縦並びを横並びに変更

display: blockの要素をdisplay: inlineにすることで、横並びのレイアウトを簡単に作成できます。

例えば、通常は縦並びである<li>タグをインラインボックスに変更し、リスト項目を横並びに配置することができます。

HTML

<ul>
  <li>top</li>
  <li>about</li>
  <li>works</li>
  <li>contact</li>
</ul>
↓
<ul class="inline-menu">
  <li>top</li>
  <li>about</li>
  <li>works</li>
  <li>contact</li>
</ul>

CSS

.inline-menu li {
  display: inline;
  margin-right: 16px;
  list-style: none;
}

top
about
works
contact

　　　↓

3. inline-block

display: inline-blockはインラインボックスとブロックボックスの特性を併せ持ちます。
要素はインラインボックスのように横並びに配置されますが、ブロックボックスのように幅と高さを設定できます。

display: inline-blockの特徴

改行が入らず、横に並ぶ
heightとwidthプロパティが有効
margin･paddingの全方向の値が有効

HTML

<div class="display-inline-block">これはインラインブロックです。</div>
<div class="display-inline-block">これはインラインブロックです。</div>
<div class="display-inline-block">これはインラインブロックです。</div>

CSS

.display-inline-block  {
  display: inline-block;
  width: 200px;
  height: 100px;
  padding: 16px;
  margin: 10px;
  background-color: #ffa07a;
}

これはインラインブロックです。

応用： inline-blockを使用して、テキストと画像を垂直方向に中央揃えにする

要素をdisplay: inline-blockにすることで、横並びのレイアウトを簡単に作成できます。

例えば、画像とテキストをdisplay: inline-blockにして、さらにvertical-align: middleを指定することで垂直方向に中央揃えにすることができます。

HTML

<div class="nline-block-box">
  <img src="image.jpg" class="inline-block-img">
  <p class="inline-block-text">テキストと画像を垂直方向に中央揃えにする</p>
</div>

CSS

.inline-block-img {
  display: inline-block;
  width: 335px;
  height: 188px;
  vertical-align: middle; /*上下中央揃え*/
  margin-right: 16px;
}

.inline-block-text {
  display: inline-block;
  vertical-align: middle; /*上下中央揃え*/
}

テキストと画像を垂直方向に中央揃えにする

vertical-alignとは、要素の上下方向の揃え位置を指定するプロパティです。
inline、inline-block 、table-cellのみに使用できます。
ブロックレベル要素には使用できません。

4. flex

display: flexはフレックスボックスレイアウトを作成します。
子要素を横並び・縦並びに柔軟に配置できます。

親要素はフレックスコンテナ、その子要素はフレックスアイテムと呼ばれます。

display: flexの特徴

従来の方法では難しかった複雑なレイアウトも簡単に実現できる
画面サイズに合わせて要素の配置を柔軟に調整できる

HTML

<div class="flex-container">
  <div class="flex-item">フレックスアイテム 1</div>
  <div class="flex-item">フレックスアイテム 2</div>
  <div class="flex-item">フレックスアイテム 3</div>
</div>

CSS

.flex-container {
  display: flex;
  justify-content: space-between; /* 要素を均等に配置 */
  align-items: center; /* 要素を中央寄せ */
  background-color: #f0f0f0;
}

.flex-item {
  background-color: #ffa07a;
  width: 200px;
  height: 100px;
  padding: 16px;
}

フレックスアイテム 1

フレックスアイテム 2

フレックスアイテム 3

応用：メディアクエリと組み合わせて、レスポンシブデザインを実装

フレックスアイテムの初期値は横並びですが、簡単に縦並びに変更することができます。

例えば、PC表示では横並び、スマホ表示では縦並びというようにレスポンシブデザインを実装することができます。
フレックスアイテムの並び方向はflex-directionプロパティで指定します。

HTML

<div class="flex-container">
  <div class="flex-item">フレックスアイテム 1</div>
  <div class="flex-item">フレックスアイテム 2</div>
  <div class="flex-item">フレックスアイテム 3</div>
</div>

CSS

.flex-container {
  display: flex;
  justify-content: space-between; /* 要素を均等に配置 */
  align-items: center; /* 要素を中央寄せ */
  background-color: #f0f0f0;
}

.flex-item {
  background-color: #ffa07a;
  width: 200px;
  height: 100px;
  padding: 16px;
}

/* 画面幅768px以下のとき */
@media (max-width: 768px) {
  .flex-container  {
    flex-direction: column; /* 要素を縦並びに配置 */
    gap: 10px;
  }
}

PC表示では横縦並び

スマホ表示では縦並び

display: flexを使用することで、従来のfloatやpositionプロパティを使ったレイアウトに比べて、よりシンプルかつ柔軟にレイアウトを作成できます。

5. grid

display: gridはグリッドレイアウトを作成します。
要素を2次元グリッド上に配置することで、複雑なレイアウトを直感的に作成することができます。
flexboxが1次元的なレイアウトに強みを持つのに対し、gridは2次元的なレイアウトに特化していると言えます。

親要素はグリッドコンテナ、その子要素はグリッドアイテムと呼ばれます。

display: gridの特徴

2次元のレイアウトを作成できる
複数の列と行を持つレイアウトを簡単に作成できる
グリッド線を用いて、要素を正確な位置に配置できる
メディアクエリと組み合わせることで、様々な画面サイズに対応したレイアウトを構築できる

HTML

<div class="grid-container">
  <div class="grid-item gr01">グリッドアイテム 1</div>
  <div class="grid-item gr02">グリッドアイテム 2</div>
  <div class="grid-item gr03">グリッドアイテム 3</div>
  <div class="grid-item gr04">グリッドアイテム 4</div>
  <div class="grid-item gr05">グリッドアイテム 5</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* グリッドの列の幅を指定 */
  grid-template-rows: repeat(4, 1fr); /* グリッドの列の高さを指定 */
  gap: 10px; /* 余白を指定 */
}

.grid-item {
  padding: 20px;
  text-align: center;
  place-content: center;
}

.gr01 {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
  background-color: #ffa07a;
}

.gr02 {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
  background-color: #87cefa;
}

.gr03 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  background-color: #90ee90;
}

.gr04 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
  background-color: #ffc0cb;
}

.gr05 {
  grid-column: 1 / 5;
  grid-row: 4 / 5;
  background-color: #e7e474;
}

グリッドアイテム 1

グリッドアイテム 2

グリッドアイテム 3

グリッドアイテム 4

グリッドアイテム 5

応用：グリッドエリアを使用して、複雑なレイアウトを簡単に作成

grid-template-areas プロパティで、Webサイトのレイアウトを簡単に作成することができます。

各エリアに名前を割り当てることにより、ページ全体のレイアウト指定できます。

HTML

<div class="grid-page">
  <div class="header">ヘッダー</div>
  <div class="sidebar">サイドバー</div>
  <div class="main">メインコンテンツ</div>
  <div class="footer">フッター</div>
</div>

CSS

.grid-page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  height: 300px;
}

.grid-page .header { 
  grid-area: header;
  background-color: #ffa07a;
 }

.grid-page .sidebar { 
  grid-area: sidebar;
  background-color: #87cefa;
 }

.grid-page .main { 
  grid-area: main; 
  background-color: #90ee90;
}

.grid-page .footer { 
  grid-area: footer;
  background-color: #ffc0cb;
 }

メインコンテンツ

エリア名に数字は使用できないので注意しましょう。

6. none

display: noneは要素を非表示にします。

display: noneの特徴

要素がレンダリングされず、ページ上に表示されない
要素が占有していたスペースも消失する
スクリーンリーダーにも認識されない

HTML

<p>この要素は表示されます</p>
<p class="display-none">この要素は非表示になります</p>

CSS

.display-none {
  display :none;
}

この要素は表示されます

この要素は非表示になります

display: noneとvisibility: hiddenの違い

display:noneと似ているプロパティとして、visibility:hiddenというものがあります。
よく混同される2つのプロパティの違いは、以下の通りです。

visibility: hidden: 要素はページに残りますが、見えなくなるだけです。レイアウトのスペースは確保されます。
display: none: 要素自体がページから消えるため、レイアウトに影響を与えません。

使用頻度としてはdisplay:noneの方が多いかと思いますが、どちらを使うかは場面に応じて決めましょう。

応用：レスポンシブデザインで要素の表示/非表示を切り替える

display: noneを使用して、PCとスマホでナビメニューの表示を切り替えます。

下記の例では、JavaScriptを使用してクラスを切り替えていきます。

HTML

<div class="nav-ex">
  <nav id="header-nav">
    <div class="menu-icon" onclick="toggleMenu()">
      <span></span><span></span><span></span>
    </div>
    <ul>
      <li><a href=" # ">ホーム</a></li>
      <li><a href=" # ">about</a></li>
      <li><a href=" # ">サービス</a></li>
      <li><a href=" # ">お問い合わせ</a></li>
    </ul>
  </nav>
</div>

CSS

.nav-ex nav ul {
  list-style-type: none;
  padding: 0;
}

.nav-ex nav ul li {
  display: inline;
  margin-right: 20px;
}

.nav-ex .menu-icon {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-ex nav ul {
    display: none;
  }

  .nav-ex .menu-icon {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #ffa07a;
    border-radius: 999px;
    position: relative;
  }

  .nav-ex .menu-icon span {
    width: 20px;
    height: 1px;
    background-color: #333;
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;
    translate: -50%;
  }

  .nav-ex .menu-icon span:nth-child(2) {
    top: 25px;
  }

  .nav-ex .menu-icon span:nth-child(3) {
    top: 30px;
  }

  .nav-ex nav.responsive ul {
    display: block;
  }

  .nav-ex nav.responsive ul li {
    display: block;
    margin: 10px 0;
  }
}

JavaScript

  function toggleMenu() {
    var nav = document.getElementById("header-nav");
    if (nav.className === "") {
      nav.className = "responsive";
    } else {
      nav.className = "";
    }
  }