• Home
  • Web制作
  • 【CSS display プロパティ完全攻略】初心者でも安心！表示の仕組みから応用テクニックまで徹底解説

【CSS display プロパティ完全攻略】初心者でも安心！表示の仕組みから応用テクニックまで徹底解説

schedule update
Tags: CSS

はじめに：Webページの顔となる「表示」をCSSでコントロール！

皆さんは、Webページを閲覧する際、そこに表示される文字や画像、ボタンなどがどのように配置されているのか、意識したことはありますか？

美しく、見やすいWebページの裏側では、CSSという言語を用いて、要素の「表示」に関する設定が緻密に行われています。

その中でも、要素の表示方法を決定づける重要な役割を担うのが、今回ご紹介する「displayプロパティ」です。

本記事では、CSS初心者の方に向けて、displayプロパティの基本的な使い方から、より高度なレイアウトを実現するための応用テクニックまで、豊富なサンプルコードを交えながらわかりやすく解説していきます。

displayプロパティをマスターして、思い通りのWebページ作りを実現しましょう！

あわせて読みたい
【CSS入門】Webページを彩るスタイルシートの基本から応用まで徹底解説！

1. displayプロパティの基本：ブロックレベル要素とインライン要素

Webページ上の要素は、大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分類されます。displayプロパティを理解する上で、まずはこの2つの違いを押さえておくことが重要です。

1-1. ブロックレベル要素とは？

  • pタグ、h1〜h6タグ、divタグなどが代表例
  • 初期設定では、要素の前後に改行が入り、新しい行から表示される
  • 幅は親要素の幅全体に広がり、高さは内容に応じて自動的に決定される
<h1>見出し</h1>
<p>段落テキスト</p>

上記のコードを実行すると、「見出し」というテキストと「段落テキスト」というテキストが、それぞれ別の行に表示されます。

1-2. インライン要素とは？

  • spanタグ、aタグ、imgタグなどが代表例
  • 初期設定では、要素の前後に改行が入らず、同じ行に並べて表示される
  • 幅と高さは、内容に応じて自動的に決定される
<p>テキスト<span style="color: red;">テキスト</span>テキスト</p>

上記のコードを実行すると、「テキストテキストテキスト」というテキストが表示され、中央の「テキスト」だけ赤色で表示されます。これは、spanタグがインライン要素であるため、他のテキストと同じ行に配置されるためです。

1-3. displayプロパティで表示を切り替える

displayプロパティを使用すると、要素の表示をブロックレベル要素、インライン要素、あるいはそれ以外の表示に変更することができます。

例えば、以下のように記述することで、spanタグをブロックレベル要素として表示することができます。

span {
  display: block;
}

2. displayプロパティの主要な値とその使い方

displayプロパティには、要素の表示方法を指定するための様々な値が用意されています。ここでは、その中でも使用頻度の高い主要な値とその使い方について詳しく見ていきましょう。

2-1. block：ブロックレベル要素として表示

.element {
  display: block;
}
  • 指定した要素をブロックレベル要素として表示します。
  • ブロックレベル要素は、初期設定では幅が親要素全体に広がりますが、widthプロパティで幅を指定することもできます。
  • また、marginプロパティで上下左右の余白を設定したり、paddingプロパティで内側の余白を設定したりすることも可能です。

2-2. inline：インライン要素として表示

.element {
  display: inline;
}
  • 指定した要素をインライン要素として表示します。
  • インライン要素は、初期設定では幅と高さを指定することができません。
  • marginプロパティは左右の余白にのみ適用され、上下の余白は無視されます。

2-3. inline-block：インラインブロックレベル要素として表示

.element {
  display: inline-block;
}
  • 指定した要素をインラインブロックレベル要素として表示します。
  • インラインブロックレベル要素は、インライン要素のように同じ行に並べて表示することができますが、ブロックレベル要素のようにwidthプロパティやheightプロパティで幅と高さを指定したり、marginプロパティやpaddingプロパティで余白を設定したりすることが可能です。

2-4. none：要素を非表示にする

.element {
  display: none;
}
  • 指定した要素を非表示にします。
  • 非表示になった要素は、画面上から完全に削除された状態になり、スペースも残りません。

3. より高度なレイアウトを実現するdisplayプロパティの応用

3-1. flexboxと組み合わせた柔軟なレイアウト

近年、Webデザインにおいて主流になりつつあるのが、フレキシブルボックスレイアウト、通称「flexbox」です。displayプロパティをflexに設定することで、要素をフレキシブルボックスのコンテナとして定義し、その子要素を自由自在に配置することができます。

.container {
  display: flex;
  /* フレキシブルボックスのその他のプロパティを設定 */
}

flexboxを使用することで、従来のCSSでは実現が難しかった、要素の均等な配置や、縦方向の配置などが容易に行えるようになります。

3-2. gridと組み合わせた複雑なレイアウト

flexboxよりもさらに高度なレイアウトを実現するのが、グリッドレイアウトです。displayプロパティをgridに設定することで、要素をグリッドコンテナとして定義し、行と列で構成されるグリッドシステム上に子要素を配置することができます。

.container {
  display: grid;
  /* グリッドレイアウトのその他のプロパティを設定 */
}

gridを使用することで、複雑なレイアウトをよりシンプルかつ直感的に構築することができます。

3-3. レスポンシブ対応で様々な画面サイズに対応

近年、スマートフォンやタブレットなど、様々な画面サイズのデバイスでWebページを閲覧することが当たり前になってきました。そのため、Webページを作成する際には、レスポンシブ対応、つまり異なる画面サイズでも最適な表示になるように設計することが重要です。

displayプロパティは、メディアクエリと組み合わせることで、画面サイズに応じて要素の表示方法を動的に変更することができます。

/* 画面サイズが768px以下の場合 */
@media screen and (max-width: 768px) {
  .element {
    display: block; /* 画面サイズが小さい場合はブロックレベル要素として表示 */
  }
}

/* 画面サイズが768pxより大きい場合 */
@media screen and (min-width: 769px) {
  .element {
    display: inline-block; /* 画面サイズが大きい場合はインラインブロックレベル要素として表示 */
  }
}

4. まとめ：displayプロパティをマスターしてWebデザインの幅を広げよう！

今回は、CSSのdisplayプロパティについて、基本的な使い方から応用テクニックまで詳しく解説してきました。

displayプロパティは、Webページのレイアウトを構築する上で非常に重要な役割を担うプロパティです。本記事で紹介した内容を参考に、ぜひdisplayプロパティを使いこなせるようになり、より魅力的なWebページ作りに挑戦してみてください！

関連記事