CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのdisplayプロパティとは？主な値と使い方を実例で解説

CSSの display プロパティは、要素がWebページ上でどのように表示されるかを制御するための重要なプロパティです。ブロックレベルとして扱うか、インラインとして扱うか、あるいはFlexboxやGridレイアウトを適用するかなど、レイアウト設計の基本となる指定が可能です。

displayプロパティの主な値

display プロパティに設定できる代表的な値は以下のとおりです。

番号プロパティ値説明
1inline要素をインライン要素として表示します。
2block要素をブロックレベル要素として表示します。
3contentsコンテナ自身を非表示にし、子要素をDOM上の一段上の親要素の子として扱います。
4flex要素をブロックレベルのフレックスコンテナとして表示します。
5grid要素をブロックレベルのグリッドコンテナとして表示します。
6inline-block要素をインラインレベルのブロックコンテナとして表示します。
7inline-flex要素をインラインレベルのフレックスコンテナとして表示します。
8inline-grid要素をインラインレベルのグリッドコンテナとして表示します。
9inline-table要素をインラインレベルのテーブルとして表示します。

例1：none・inline の指定

まずは、display: none; と display: inline; を使った基本的な例を見てみましょう。none を指定した要素は画面上から完全に消えます。

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: orange;
   color: white;
}
p.demo {
   display: none;
}
span.demo1 {
   display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html>

表示結果

CSSのdisplayプロパティとは？主な値と使い方を実例で解説

この例では、p.demo に display: none; が指定されているため、「9AM」の部分は表示されません。一方、span.demo1 には display: inline; が指定されているため、「5PM」は文章の流れの中にそのまま組み込まれて表示されます。

例2：block・inline-block の指定

次に、display: block; と display: inline-block; の違いを確認する例です。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: orange;
   color: white;
}
p.demo1 {
   display: block;
}
p.demo2 {
   display: inline-block;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019.
</div>
<div>
Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019.
</div>
</body>
</html>

表示結果

CSSのdisplayプロパティとは？主な値と使い方を実例で解説

block を指定すると、要素は前後の内容と独立したブロックとして表示され、幅いっぱいに広がります。一方 inline-block を指定すると、要素はインラインのように文中に配置されながら、ブロック要素と同様に幅や高さを持たせることができます。

まとめ

display プロパティは、要素の表示形式を切り替えることでページ全体のレイアウトを柔軟にコントロールできる、CSSの中核となるプロパティです。特に flex や grid は現代のレスポンシブデザインに欠かせない値なので、それぞれの挙動の違いを実際のコードで確認しながら理解を深めていきましょう。

  1. CSSでホバー時に要素を表示する方法【サンプルコード付き】

    CSSでマウスホバー時に非表示の要素を表示するには、:hover 疑似クラスと隣接兄弟セレクタ（+）を組み合わせるのが一般的です。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <style>    body{       margin:20px;       padding:20px;       font-family: 'Segoe UI', Tahoma,

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-