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

CSSのdisplayプロパティとは？各値の違いと使い方を実例付きで解説

CSSのdisplayプロパティとは

すべてのHTML要素には、CSSのdisplayプロパティにあらかじめデフォルト値が設定されています。このプロパティは、その要素がドキュメント内でどのように描画されるかを決定する重要な役割を持っています。

注意： デフォルトのdisplayプロパティは上書きすることができますが、これは要素そのものの種類が変わるわけではなく、ドキュメント上での表示の挙動が変化するだけである点に留意してください。

displayプロパティの主な値

displayプロパティにはさまざまな値を指定できますが、特によく使われる代表的な値は以下の4つです。

  • block（ブロック） － 要素の前後で改行され、親要素の利用可能な幅全体を占有します。<div> や <p> などがこれに該当します。
  • inline（インライン） － 行の中に要素が埋め込まれるように配置され、内容に必要な幅だけを占有します。<span> や <a> などがこれに該当します。
  • inline-block（インラインブロック） － インライン要素のように横並びに配置されながら、ブロック要素と同様に width や height を指定できる性質を持ちます。
  • none（なし） － 要素を画面上から完全に非表示にします。レイアウト上のスペースも占有しません。

サンプルコード①：display: block の例

まずは display プロパティに block を指定した例を見てみましょう。<div> 要素のデフォルト値でもあります。

<!DOCTYPE html>
<html>
<head>
<title>CSS Display</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
    box-sizing: border-box;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    display: block; /*<div>のデフォルト値*/
    height: 40px;
    width: 100%;
    color: white;
    border: 4px solid black;
}
.child:nth-of-type(1){
    background-color: #FF8A00;
}
.child:nth-of-type(2){
    background-color: #F44336;
}
.child:nth-of-type(3){
    background-color: #C303C3;
}
.child:nth-of-type(4){
    background-color: #4CAF50;
}
.child:nth-of-type(5){
    background-color: #03A9F4;
}
.child:nth-of-type(6){
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSのdisplayプロパティとは？各値の違いと使い方を実例付きで解説

各ボックスが縦方向に積み重なって表示されているのが確認できます。これが block の特徴で、要素が幅全体を占有し、前後に改行が入るためです。

サンプルコード②：display: inline の例

続いて、同じ構造の要素に対して inline を指定した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS Display</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
    box-sizing: border-box;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    height: 40px;
    color: white;
    border: 4px solid black;
    display: inline;
}
.child:nth-of-type(1){
    background-color: #FF8A00;
}
.child:nth-of-type(2){
    background-color: #F44336;
}
.child:nth-of-type(3){
    background-color: #C303C3;
}
.child:nth-of-type(4){
    background-color: #4CAF50;
}
.child:nth-of-type(5){
    background-color: #03A9F4;
}
.child:nth-of-type(6){
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSのdisplayプロパティとは？各値の違いと使い方を実例付きで解説

今度は各ボックスが横一列に並んで表示されます。inline を指定すると、要素は改行されずに行内に配置され、内容に必要な幅だけを占めるようになるためです。

まとめ

displayプロパティの値を変えるだけで、同じHTML構造でも見た目が大きく変わることが分かります。block は縦に積み重なり、inline は横に並ぶという違いを理解しておくと、Webページのレイアウト設計が格段にやりやすくなります。状況に応じて inline-block や none も活用し、柔軟なスタイリングを行いましょう。

  1. CSSのdisplayとvisibilityプロパティ徹底解説！全ての値と実用例を一覧で紹介

    すべてのHTML要素にはデフォルトのdisplay値が設定されており、CSSのdisplayプロパティを使って自由に上書きすることができます。同様に、要素の可視性（visibility）もデフォルトでは「visible」に設定されていますが、CSSのvisibilityプロパティで変更可能です。この記事では、displayプロパティの全23種類の値とvisibilityプロパティの5種類の値を一覧表でわかりやすく解説し、実際に動作するサンプルコードもご紹介します。CSS displayプロパティの値一覧No.値と説明1inline要素をインライン要素（<span>など）として表示し

  2. CSSのdisplay:none徹底解説！要素を非表示にする方法と実用サンプル

    CSS display:noneとは？ CSSのdisplay: none;は、指定した要素を画面上から完全に非表示にするためのプロパティ値です。Web開発では、特定の要素を一時的に隠したい場合や、JavaScriptと組み合わせて動的にコンテンツの表示・非表示を切り替えたい場面などで広く活用されています。 displayプロパティがnoneに設定された要素には、ボックス（レンダリング領域）が一切生成されません。そのため、子要素にblockやinline-blockなど他の値が設定されていたとしても、親要素ごとまとめて非表示になる点に注意が必要です。 また、似たような効果を持つvisibili