CSSのdisplayプロパティで要素の表示を制御する方法【値の一覧と実例付き】
displayプロパティとは
CSSのdisplayプロパティは、Webページ上の要素をどのような形式で表示するかを制御するための重要なプロパティです。このプロパティを使いこなすことで、要素をブロックとして扱うか、インラインとして扱うか、あるいは非表示にするかなどを柔軟に指定できます。
また、「none」を指定すると要素は完全に非表示となり、レイアウト上からも取り除かれます。
displayプロパティの主な値一覧
| No. | 値と説明 |
|---|---|
| 1 | inline 要素をインライン要素として表示します。 |
| 2 | block 要素をブロックレベル要素として表示します。 |
| 3 | contents コンテナ自身が消滅し、子要素がDOM上で一階層上位の要素の直接の子として扱われます。 |
| 4 | flex 要素をブロックレベルのフレックスコンテナとして表示します。 |
| 5 | grid 要素をブロックレベルのグリッドコンテナとして表示します。 |
| 6 | inline-block 要素をインラインレベルのブロックコンテナとして表示します。 |
| 7 | inline-flex 要素をインラインレベルのフレックスコンテナとして表示します。 |
| 8 | inline-grid 要素をインラインレベルのグリッドコンテナとして表示します。 |
| 9 | inline-table 要素をインラインレベルのテーブルとして表示します。 |
サンプルコード1：none と inline の挙動を確認する
まずは「display: none」と「display: inline」を使った基本的な例を見てみましょう。
<!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>この例では、クラス「demo」を持つ段落に「display: none」が適用されているため、「9AM」の部分は画面上から完全に消えます。一方、クラス「demo1」を持つspan要素には「display: inline」が指定されているため、前後のテキストと同じ行内に自然に表示されます。
出力結果
サンプルコード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>「display: block」を指定した要素は前後に改行が入り、利用可能な横幅いっぱいに広がります。そのため「10AM」の前後でテキストが分断されて表示されます。一方、「display: inline-block」を指定した「5PM」は行内の一部として表示されつつ、幅や高さなどのスタイル指定も可能になります。
出力結果
まとめ
displayプロパティは、要素の表示形式を決めるWeb制作の基礎となるプロパティです。「none」による非表示化、「block」「inline」「inline-block」の使い分け、さらに「flex」「grid」などのモダンなレイアウト手法まで、それぞれの特徴を理解して目的に応じて使い分けることが大切です。
-
CSSのcolorプロパティを使って要素の文字色を設定する方法
CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector { color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用
-
CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け
CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置） デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置） 要素は通常の文書フロー内に