CSSのdisplayプロパティで要素の表示形式を制御し、レイアウトを柔軟に設定する方法をわかりやすく解説

displayプロパティは、要素の表示方法を決定するためのCSSプロパティです。このプロパティは、要素がブロック要素かインライン要素か、あるいは表示されるかどうかなどを指定するために使用されます。

displayプロパティの値とその効果

• block: 要素をブロック要素として表示します。横幅全体を占有します。
• inline: 要素をインライン要素として表示します。横並びに表示されます。
• inline-block: 要素をインライン要素のように表示しつつ、ブロック要素のように高さと幅を指定できます。
• none: 要素を非表示にします。
• flex: フレックスボックスのコンテナとして要素を表示します。
• grid: グリッドレイアウトのコンテナとして要素を表示します。

注意点と関連情報

displayプロパティは、要素のレイアウトや可視性に大きな影響を与えます。特に、noneを指定すると要素は画面から完全に消え、他の要素に影響を与えません。flexやgridを使用すると、より複雑なレイアウトを簡単に実現することが可能です。

displayプロパティが効かない時の原因と対策

visibility: hiddenやopacity: 0の影響

displayプロパティがblockやinlineなどに設定されていても、要素がvisibility: hidden;やopacity: 0;のスタイルを持っている場合、表示されていても目に見えないことがあります。
対策: visibilityやopacityの設定を確認し、要素が完全に非表示にならないようにスタイルを調整しましょう。

floatやclearの影響

floatやclearプロパティを使っている場合、要素のレイアウトが意図しない形で変わることがあります。特に、floatされた要素やその後の要素が予想外の位置に表示されることがあります。
対策: floatやclearの影響がないか確認し、必要に応じてレイアウトを調整します。場合によっては、clearfixを使用してフロート解除を行うことも有効です。

共通するCSSコード

.css-sample-container {
        width: 100%;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #333;
        background-color: #f9f9f9;
        font-size: 16px;
        color: #333;
        box-sizing: border-box;
    }
    

display: block

display: blockは、要素をブロック要素として表示します。ブロック要素は横幅全体を占有します。

HTMLコード

<div class="css-sample-container css-sample-display-block">
    この要素はブロック要素として表示されています。
</div>

CSSコード

.css-sample-display-block {
    display: block;
}

表示結果

display: inline

display: inlineは、要素をインライン要素として表示します。インライン要素は他の要素と横並びに表示されます。

HTMLコード

<div class="css-sample-container css-sample-display-inline">
    この要素はインライン要素として表示されています。
</div>

CSSコード

.css-sample-display-inline {
    display: inline;
}

表示結果

display: inline-block

display: inline-blockは、インラインのように横に並びつつ、ブロック要素のように高さと幅を持つことができます。

HTMLコード

<div class="css-sample-container css-sample-display-inline-block">
    この要素はインラインブロック要素として表示されています。
</div>

CSSコード

.css-sample-display-inline-block {
    display: inline-block;
}

表示結果

display: none

display: noneは、要素を画面上に表示しません。他の要素に影響を与えません。

HTMLコード

<div class="css-sample-container css-sample-display-none">
    この要素は非表示です。
</div>

CSSコード

.css-sample-display-none {
    display: none;
}

表示結果

display: flex

display: flexは、フレックスボックスレイアウトを有効にし、要素を柔軟に並べます。

HTMLコード

<div class="css-sample-container css-sample-display-flex">
    <div class="css-sample-item">要素1</div>
    <div class="css-sample-item">要素2</div>
</div>

CSSコード

.css-sample-display-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

表示結果

display: grid

display: gridは、グリッドレイアウトを有効にし、要素を行と列に配置します。

HTMLコード

<div class="css-sample-container css-sample-display-grid">
    <div class="css-sample-item">要素1</div>
    <div class="css-sample-item">要素2</div>
    <div class="css-sample-item">要素3</div>
    <div class="css-sample-item">要素4</div>
</div>

CSSコード

.css-sample-display-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

表示結果

まとめ

displayプロパティを使用すると、要素の表示方法を柔軟に制御できます。ブロック要素やインライン要素だけでなく、複雑なレイアウトを実現するためにflexやgridも使用可能です。