【CSS】要素を非表示にする基本｜.d-noneの使い方
CSSのdisplay: none;を使って、任意のHTML要素を簡単に非表示にする方法を紹介します。要素を削除せずに、表示だけを一時的に隠すことができます。
🔹 部分コード
<div class="d-none">
この要素は非表示になります。
</div>
<style>
.d-none {
display: none;
}
</style>
💻 完全動作コード（※このコピペのみでHTMLで動作するコード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>非表示の例</title>
<style>
.d-none {
display: none;
}
</style>
</head>
<body>
<div class="d-none">
この要素は非表示になります。
</div>
</body>
</html>
🧩 応用と活用方法
display: none;は、ユーザーの画面に要素を表示しないようにする最も基本的な手法です。JavaScriptやCSSの切り替えで再表示も容易なため、動的UIにも活用されます。
ただし、非表示にしていてもHTML上には存在しているため、SEO対策やアクセシビリティの観点からは注意が必要です。読み上げソフトやスクリーンリーダーには読み取られる可能性もあります。
Bootstrapなどのフレームワークでは.d-noneとして標準クラスとして利用され、レスポンシブ条件付きの表示切り替えも可能です（例：.d-md-none）。
🎯 非表示テクニックの補足解説
display: none;を使うことで、要素をHTML構造から削除せずに視覚的に隠すことができます。特に、JavaScriptによる条件表示や、ユーザーアクションに応じたトグル表示などにおいてよく使われます。
ただし、この方法ではその要素は「存在していない」と見なされるため、例えばフォームの非表示要素にフォーカスが当たらない、レイアウトに影響を与えないなどの特性があります。
一方で、visibility: hidden;は見えなくするだけで領域は残ります。要素を完全に隠したいときはdisplay: none;、レイアウトを保ちたいときはvisibility: hidden;という使い分けが重要です。
スマホ表示時だけ非表示にしたい場合などは、メディアクエリを併用して@media (max-width: 768px) { .d-none-mobile { display: none; } }などを設定すると効果的です。これにより、画面サイズや条件に応じて柔軟な非表示処理が可能になります。