CSSの「displayプロパティ」を使って一時的にブロック要素やインライン要素を非表示にすることができます。また、アクセス媒体（PCやモバイルなど）により特定の要素を表示/非表示にすることも可能です。本コラムでは、「visibilityプロパティ」との違いも合わせて特定の要素を表示したり非表示にしたりする方法について解説します。
目次
1. 「displayプロパティ」の使い方
1.1. 基本の書式【display:none】
「displayプロパティ」は要素の表示形式を指定するプロパティで、ブロック要素をインライン要素として指定する「display: inline」やその反対にインライン要素をブロック要素として表示する「display: block」などがあります。「displayプロパティ」は表示形式を変更するだけでなく値に「none」を指定すると、要素を非表示にすることができます。実際に動作を確認してみましょう。「display.html」をコピーしてPC上の任意の場所に保存して下さい。ファイルの種類を「UTF-8」にして保存します
●display.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=”utf-8″>
<title>CSS入門-要素の表示/非表示</title>
<style>
p.display_non {
display: none;
}
</style>
</head>
<body>
<h1>要素を非表示にする方法</h1>
<p>通常の段落要素です。</p>
<p class="display_non">非表示の段落(p)要素です。</p>
<p>非表示段落の後にある要素です。</p>
</body>
</html>
「display:none」を指定した段落(p)要素はブラウザーに表示されません。
●ブラウザーの表示(display1.html)
1.2. 画像を非表示にしてみる
テキストだけでなく画像も非表示にすることができます。「display2.html」をコピーしてPC上の任意の場所に保存して下さい。HTML文書と同じフォルダー内の「images」フォルダーに２つの画像ファイル「cherry_1.png」と「cherry_2.png」を保存してあります。
●display2.html
・・・省略・・・
<title>CSS入門-要素の表示/非表示</title>
</head>
<body>
<h1>要素を非表示にする方法</h1>
<p>cherry_1.png</p>
<p><img src="./images/cherry_1.png" alt="CSS入門：要素を非表示にする方法
フリーランスエンジニア案件情報 | プロエンジニアcherry"></p>
<p>cherry_2.png</p>
<p><img src="./images/cherry_2.png" alt="CSS入門：要素を非表示にする方法
フリーランスエンジニア案件情報 | プロエンジニアcherry"></p>
<p>サクラの画像です。</p>
</body>
ピンク色と赤色の画像が表示されるHTML文書(display2.html)を編集してみましょう。
●ブラウザーの表示(display2.html)
クラスセレクタ「.display_non」をHTML内のstyleタグに追加し赤色のサクラの画像（cherry_2.png）を非表示にします。
●display2.html
・・・省略・・・
<title>CSS入門-要素の表示/非表示</title>
<style>
.display_non {
display: none;
}
</style>
</head>
<body>
<h1>要素を非表示にする方法</h1>
<p>cherry_1.png</p>
<p><img src="./images/cherry_1.png" alt="CSS入門：要素を非表示にする方法
フリーランスエンジニア案件情報 | プロエンジニアcherry"></p>
<p>cherry_2.png</p>
<p><img src="./images/cherry_2.png" class="display_non" alt="CSS入門：要素を非表示にする方法
フリーランスエンジニア案件情報 | プロエンジニアcherry"></p>
<p>サクラの画像です。</p>
</body>
「display: none;」を指定した赤色のサクラの画像が表示されなくなり、直後の「サクラの画像です。」というテキストが次の段落として表示されています。
●ブラウザーの表示(display2.html)
2. 「display:none」と「visibility:hidden」の違い
2.1. 基本の書式【visibility:hidden】
「displayプロパティ」と同じく要素の表示・非表示を指定する「visibilityプロパティ」があります。値に「hidden」を設定すると先ほどのHTMLドキュメント「display2.html」を編集してどのように表示されるか見てみましょう。
●display2.html
・・・省略・・・
<title>CSS入門-要素の表示/非表示</title>
<style>
.hidden {
visibility:hidden;
}
</style>
</head>
<body>
<h1>要素を非表示にする方法</h1>
<p>cherry_1.png</p>
<p><img src="./images/cherry_1.png" alt="CSS入門：要素を非表示にする方法
フリーランスエンジニア案件情報 | プロエンジニアcherry"></p>
<p>cherry_2.png</p>
<p><img src="./images/cherry_2.png" class="hidden" alt="CSS入門：要素を非表示にする方法
フリーランスエンジニア案件情報 | プロエンジニアcherry"></p>
<p>サクラの画像です。</p>
</body>
●ブラウザーの表示(display2.html)
「displayプロパティ」は非表示に指定したボックスそのものが表示されないのに対して、「visibilityプロパティ」は非表示に指定したボックスのスペースは確保された状態で画像のみ非表示になります。そのため、画像（cherry_2.png）のあるスペースを維持したまま次の段落の「サクラの画像です。」というテキストが表示されています。
