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

HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。

displayプロパティの構文

displayプロパティを設定する場合の構文は以下のとおりです。

object.style.display = value

displayプロパティに指定できる値の一覧

displayプロパティには、以下のような値を指定できます。

値説明
inline要素をインライン要素として表示します。widthやheightの指定は反映されません。
block要素を新しい行に表示し、利用可能な幅いっぱいに広がります。
contents子要素のみを表示し、親要素自身のボックスは消えます。子要素があたかもDOMの直接の子であるかのように扱われます。
flex要素をブロックレベルのフレックスコンテナとして表示します。
grid要素をブロックレベルのグリッドコンテナとして表示します。
inline-blockinlineと同様の表示ですが、widthとheightを指定できます。
inline-flex要素をインラインレベルのフレックスコンテナとして表示します。
inline-grid要素をインラインレベルのグリッドコンテナとして表示します。
inline-table要素をインラインレベルのテーブルとして表示します。
list-item要素を<li>要素と同じように振る舞わせます。
run-in文脈に応じて、要素をブロックまたはインラインとして表示します。
table要素を<table>要素と同じように振る舞わせます。
table-caption要素を<caption>要素と同じように振る舞わせます。
table-column-group要素を<colgroup>要素と同じように振る舞わせます。
table-header-group要素を<thead>要素と同じように振る舞わせます。
table-footer-group要素を<tfoot>要素と同じように振る舞わせます。
table-row-group要素を<tbody>要素と同じように振る舞わせます。
table-cell要素を<td>要素と同じように振る舞わせます。
table-column要素を<col>要素と同じように振る舞わせます。
table-row要素を<tr>要素と同じように振る舞わせます。
none要素を完全に非表示にします（レイアウト上からも削除されます）。
initialプロパティを初期値に設定します。
inherit親要素のプロパティ値を継承します。

displayプロパティの使用例

次の例では、flexコンテナとして表示されたdiv要素と、その内側のspan要素のdisplayプロパティを、ボタンのクリック操作で「block」に変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    padding: 10px;
    background-color: lightblue;
    display: flex;
    flex-direction: row;
  }
  #DIV1 span {
    width: 70px;
    background-color: red;
    margin: 20px;
    padding: 10px;
  }
</style>
<script>
  function changeDisplay() {
    document.getElementById("DIV1").style.display = "block";
    document.querySelectorAll("#DIV1 span").forEach(span => {
      span.style.display = "block";
    });
    document.getElementById("Sample").innerHTML = "div要素とその内側のspan要素の両方のdisplayが「block」に変更されました";
  }
</script>
</head>
<body>
  <div id="DIV1">
    <span>WORLD1</span>
    <span>WORLD2</span>
  </div>
  <p>下のボタンをクリックすると、上のdiv要素とその内側の要素のdisplayプロパティが変更されます。</p>
  <button onclick="changeDisplay()">Change Display</button>
  <p id="Sample"></p>
</body>
</html>

実行結果

初期状態では、div要素はflexコンテナとして機能し、内側のspan要素は横一列に並んで表示されます。

HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

「Change Display」ボタンをクリックすると、次のようにdiv要素とspan要素の両方のdisplayが「block」に切り替わり、各要素がそれぞれ新しい行に表示されます。

HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

補足：display:noneとvisibility:hiddenの違い

要素を非表示にする方法としてはvisibility:hiddenもありますが、両者には重要な違いがあります。display:noneは要素をレイアウト上から完全に取り除くため、その要素が占めていたスペースも消えます。一方、visibility:hiddenは要素を非表示にしてもスペース自体は保持されます。用途に応じて使い分けるとよいでしょう。

まとめ

displayプロパティは、要素の表示形式を制御するCSSの中核となるプロパティです。ブロックとインラインの切り替えはもちろん、flexやgridといったモダンなレイアウト手法の適用、要素の非表示化など、Webページのレイアウト設計において非常に重要な役割を担います。各値の特性を理解し、適切に使い分けましょう。

  1. HTML DOM StyleのpageBreakBeforeプロパティとは？構文と使い方を実例付きで解説

    HTML DOM の Style pageBreakBefore プロパティは、HTML ドキュメント内の特定の要素の直前で、印刷または印刷プレビュー時に改ページを行うかどうかの動作を取得（参照）および変更（設定）するためのプロパティです。Web ページをそのまま印刷した場合、要素の途中で不自然にページが分断されることがあります。このプロパティを使えば、印刷レイアウトを意図的に制御でき、見やすい帳票やドキュメント出力を実現できます。構文pageBreakBefore プロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakBefore2. 値を設定する

  2. HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説

    HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ