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

すべてのHTML要素にはデフォルトのdisplay値が設定されており、CSSのdisplayプロパティを使って自由に上書きすることができます。同様に、要素の可視性（visibility）もデフォルトでは「visible」に設定されていますが、CSSのvisibilityプロパティで変更可能です。

この記事では、displayプロパティの全23種類の値とvisibilityプロパティの5種類の値を一覧表でわかりやすく解説し、実際に動作するサンプルコードもご紹介します。

CSS displayプロパティの値一覧

No.	値と説明
1	inline 要素をインライン要素（<span>など）として表示します。height・widthプロパティを指定しても効果はありません。
2	block 要素をブロック要素（<div>など）として表示し、強制的に改行が入ります。
3	contents コンテナ自体を非表示にし、子要素をDOM上で一段上の階層の要素の直接の子として扱います。
4	flex 要素をブロックレベルのフレックスコンテナとして表示します。
5	grid 要素をブロックレベルのグリッドコンテナとして表示します。
6	inline-block 要素をインラインレベルのブロックコンテナとして表示します。要素自体はインラインとして整形されますが、height・widthの指定が有効になります。
7	inline-flex 要素をインラインレベルのフレックスコンテナとして表示します。
8	inline-grid 要素をインラインレベルのグリッドコンテナとして表示します。
9	inline-table 要素をインラインレベルのテーブルとして表示します。
10	list-item 要素を<li>要素と同じように振る舞わせます。
11	run-in 文脈に応じて、要素をブロックまたはインラインのいずれかとして表示します。
12	table 要素を<table>要素と同じように振る舞わせます。
13	table-caption 要素を<caption>要素と同じように振る舞わせます。
14	table-column-group 要素を<colgroup>要素と同じように振る舞わせます。
15	table-header-group 要素を<thead>要素と同じように振る舞わせます。
16	table-footer-group 要素を<tfoot>要素と同じように振る舞わせます。
17	table-row-group 要素を<tbody>要素と同じように振る舞わせます。
18	table-cell 要素を<td>要素と同じように振る舞わせます。
19	table-column 要素を<col>要素と同じように振る舞わせます。
20	table-row 要素を<tr>要素と同じように振る舞わせます。
21	none 要素をページ上に一切描画しません（領域も確保されません）。
22	initial このプロパティをデフォルト値に設定します。
23	inherit 親要素からdisplayプロパティの値を継承します。

display: inline-block の使用例

それでは、display: inline-blockを使った具体的な例を見てみましょう。複数のボックスを横並びに配置しつつ、それぞれに高さと幅を持たせることができます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>CSS Display Inline-Block</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: inline-block;
    height: 40px;
    width: 40px;
    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-Inline-Block</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とvisibilityプロパティ徹底解説！全ての値と実用例を一覧で紹介

CSS visibilityプロパティの値一覧

No.	値と説明
1	visible デフォルト値です。要素とその子要素が表示されます。
2	hidden 要素とその子要素が非表示になります。ただし、要素は引き続き描画対象であり、ページ上のスペースは確保されたままです。
3	collapse テーブルの行（<tr>）、行グループ（<tbody>）、列（<col>）、列グループ（<colgroup>）にのみ使用できる値です。該当する行や列を削除し、そのスペースを他のコンテンツが利用できるようになります。その他の要素に適用した場合は「hidden」と同じ挙動になります。
4	initial 要素の可視性をデフォルト値に設定します。
5	inherit 親要素からvisibilityプロパティの値を継承します。

ポイント： display: noneは要素を完全に削除してスペースも消えますが、visibility: hiddenは見た目を消すだけでスペースは保持されます。この違いを理解しておくと、レイアウト調整の際に非常に役立ちます。

visibility: collapse の使用例

次に、テーブルの特定の行を非表示にするvisibility: collapseの例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form ,table{
    width:70%;
    margin: 0 auto;
    text-align: center;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid black;
}
thead {
    background-color: goldenrod;
}
tbody{
    background-color: khaki;
}
tr:nth-of-type(3){
    visibility: collapse;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead>
<tr><th>Name</th><th>Course</th></tr>
</thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>

表示結果

collapseを適用していない場合：

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

collapseを適用した場合： 3行目のデータ行が完全に取り除かれ、そのスペースが詰められているのが確認できます。

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

まとめ

displayプロパティは要素のレイアウト形式（ブロック・インライン・フレックス・グリッドなど）を制御し、visibilityプロパティは要素の表示・非表示を制御します。特にdisplay: noneとvisibility: hiddenの違い、そしてテーブル操作におけるcollapseの挙動は、実務でもよく使われる重要な概念です。ぜひサンプルコードを参考に、実際に手を動かして試してみてください。

CSSのoverflowプロパティでオーバーフローコンテンツを制御する方法

CSS疑似要素（::before・::afterなど）の使い方を徹底解説

CSSの要素タイプセレクターとは？基本構文と実例をわかりやすく解説
CSSの要素タイプセレクターは、指定した種類の要素をすべて一括で選択するためのセレクターです。たとえば「li」と指定すれば、ページ内のすべてのリスト項目に同じスタイルが適用されます。HTML文書全体に共通のデザインを設定したい場合に非常に便利な、CSSの基本的なセレクターです。構文要素タイプセレクターの書き方は以下のとおりです。セレクター名として要素名をそのまま記述します。 element { /*declarations*/ } サンプルコード1：リストとdiv要素への適用例次の例では、li 要素と div 要素に対してそれぞれスタイルを指定しています。 &l
CSSでホバー時に要素を表示する方法【サンプルコード付き】
CSSでマウスホバー時に非表示の要素を表示するには、:hover 疑似クラスと隣接兄弟セレクタ（+）を組み合わせるのが一般的です。以下に具体的なコード例を示します。コード例 <!DOCTYPE html> <html> <head> <style> body{ margin:20px; padding:20px; font-family: 'Segoe UI', Tahoma,