displayはHTML要素の表示方法を指定するCSSプロパティです。非表示(none)にしたり、ブロック要素(block)にしたり、インラインブロック(inline-block)にするなど、デフォルトの表示方法から変更できます。

目次

CSS displayの使い方

display: type;
type

表示要素の種別を次のいずれかから指定する。

説明
blockブロック要素(前後に改行が入る)にします。
inlineインライン要素(前後に改行が入らない)にします。
list-itemリスト項目にします。
none要素及びその子孫の要素を表示しない。要素があるスペースには余白が生じない。
run-in前後関係によりブロック要素かインライン要素か決まる。
inline-blockインラインブロック
tableテーブル
inline-tableインラインテーブル
table-row-grouptbody要素と同じ
table-header-groupthead要素と同じ
table_footer-grouptfoot要素と同じ
table-rowテーブルの行(tr要素と同じ)
table-column-groupcolgroup要素と同じ
table-columncol要素と同じ
table-cellテーブルのセル
table-captioncaption要素と同じ
inherit継承

「display:none」は要素を表示しないうえ、余白も生じない。余白を残したい場合は、「visibility:hidden」を使用する。

CSS displayのサンプル

スタイルシート属性displayを使用したHTMLの例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<span style="display:list-item">list-item</span>
<span style="display:list-item">list-item</span>

list-item list-item

<span style="display:block">block</span>
<span style="display:block">block</span>

block block

<span style="display:span">span</span>
<span style="display:span">span</span>

span span

Here is <span style="display:none">none</span> element.

Here is none element.

非表示にしたうえ、空白をあけるには「display:none」ではなく「visibility:hidden」を使う。

Here is <span style="visibility:hidden">hidden</span> element.

Here is hidden element.

JavaScript

JavaScriptからCSSプロパティ「display」を参照・設定するには、Elementオブジェクトのstyleプロパティを使う。

document.getElementById("foo").style.display = "none";