HTMLのdisplay:noneの使い方
Webページを作成する際、特定の要素を非表示にしたい場合があります。例えば、会員登録ユーザーのみに表示するコンテンツや、JavaScriptを使って動的に表示を切り替える要素などです。HTMLでは、displayプロパティをnoneに設定することで、要素を非表示にすることができます。
display:noneの基本的な使い方
display: none; を使うと、要素はページ上から完全に削除されたかのように振る舞います。つまり、要素が表示されなくなるだけでなく、その要素が占めていたスペースもなくなります。
<p>このテキストは常に表示されます。</p>
<p style="display: none;">このテキストは非表示になります。</p>
<p>上記テキストの非表示によって、このテキストは上に移動します。</p>
上記コード例では、2番目の段落がdisplay: none; によって非表示になっています。その結果、3番目の段落は2番目の段落があった場所に移動します。
display:noneの適用方法
display: none; は、以下のいずれかの方法で適用できます。
| 方法 | 説明 |
|---|---|
| インラインスタイル | 要素の開始タグ内に直接スタイルを記述します。例：<p style="display: none;"> |
| 内部CSS | HTMLドキュメント内の<style>タグ内にスタイルを記述します。 |
| 外部CSS | 外部CSSファイルにスタイルを記述し、HTMLドキュメントにリンクします。 |
display:noneとvisibility: hiddenの違い
要素を非表示にするには、visibility: hidden; を使う方法もあります。しかし、display: none; と visibility: hidden; には大きな違いがあります。
| プロパティ | 説明 |
|---|---|
display: none; |
要素を完全に非表示にし、その要素があったスペースもなくなります。 |
visibility: hidden; |
要素を非表示にしますが、その要素があったスペースは残ります。 |
JavaScriptと組み合わせて動的に表示を切り替える
display: none; は、JavaScriptと組み合わせて要素の表示を動的に切り替えることができます。例えば、ボタンクリックで要素を表示/非表示にすることができます。
<button id="toggle-button">ボタンをクリック</button>
<p id="target-element" style="display: none;">このテキストはボタンクリックで表示されます。</p>
<script>
const button = document.getElementById('toggle-button');
const targetElement = document.getElementById('target-element');
button.addEventListener('click', () => {
if (targetElement.style.display === 'none') {
targetElement.style.display = 'block';
} else {
targetElement.style.display = 'none';
}
});
</script>
参考資料
よくある質問
Q1: display:none; を適用しても要素が表示されてしまう場合は？
A1: HTMLの構造やCSSの記述ミスが考えられます。要素がネストされている場合、親要素にdisplay: none; が適用されていると子要素も非表示になります。また、CSSの優先順位によっては、他のスタイルが適用されてしまう場合もあります。開発者ツールの利用やCSSの優先順位の見直しを行いましょう。
Q2: JavaScriptで要素の表示状態を確認するには？
A2: element.style.display で要素のdisplayプロパティの値を取得できます。'none'であれば非表示、それ以外（例：'block', 'inline'）であれば表示されています。
Q3: display:none; 以外に要素を非表示にする方法はありますか？
A3: visibility: hidden; の他に、以下のような方法があります。
opacity: 0;: 要素の透明度を0にするposition: absolute;とleft: -9999px;を組み合わせる: 要素を画面外に移動させるheight: 0;とoverflow: hidden;を組み合わせる: 要素の高さを0にする
それぞれ表示上の挙動が異なるため、用途に合わせて使い分ける必要があります。
その他の参考記事:jquery display 切り替え