HTMLを非表示にする場面
HTMLを一時的に非表示にしたい場合
Webサイトを運営していく中で、季節限定のコンテンツやキャンペーン情報など、期間を限定して表示させたい要素を扱うケースは多く存在します。完全に削除するのではなく非表示状態にしておくことで、該当の時期が到来した際にコードを再度記述する手間を省くことができ、クリスマスシーズンのデザインや正月の挨拶文など、毎年繰り返し使用するコンテンツに対して特に有用な手法といえます。
メンテナンス作業においても非表示化は役立つ方法であり、作業担当者が変わる場合にコメントとして注意書きを残しておくことで、他の開発者が理解しやすいコードを維持できます。複数人でWebサイトを管理する環境では、保守性を高めるためにも非表示化の活用が円滑な運用を支える基盤になるでしょう。
【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」
デバイス毎に表示・非表示を切り替えたい場合
現代のWebサイトはPCやタブレット、スマートフォンなど多様なデバイスから閲覧されており、画面サイズやユーザーの操作性に応じて最適な表示を提供する必要があります。PCでは横幅が広いため詳細な情報やナビゲーションメニューを表示できる一方、スマートフォンでは画面が縦長であるため必要最小限の情報に絞り込む必要があります。
レスポンシブデザインを実装する際は、CSSのメディアクエリと組み合わせて非表示の設定を行うことで、デバイスの種類に応じた柔軟な表示制御が実現します。広告枠の表示に関しても同様の配慮が求められるシーンが存在しますが、広告サービスの利用規約によっては非表示化が禁止されている場合があるため、事前に規約の確認を怠らないようにしてください。
隠しデータとして送信したい場合
Webフォームを複数設置しているサイトでは、どのフォームから送信されたデータなのか判別するための識別情報が必要になる場合があります。HTMLのinputタグにhidden属性を設定することで、画面上には表示されない入力フィールドを作成でき、フォームの種類を示す識別子や管理用のIDなどを埋め込むことができます。
大規模なサイトになるほどフォームの種類も増加するため、隠しデータによる識別は運用管理の効率化に貢献します。ただし、個人情報や機密性の高い情報は隠しデータとして扱うべきではなく、ブラウザの開発者ツールからソースコードを確認すれば容易に閲覧できてしまうため、セキュリティ上の配慮が必須です。
HTMLを非表示にする方法(タグ)
【PR】『Python』を学べる企業・個人向けのプログラミングコース
コメントアウトを使う場合
コメントアウトはHTMLの特定箇所を無効化する最も基本的な方法であり、<!--と-->で囲むことによって、その範囲内の要素がブラウザで描画されなくなります。1行だけではなく複数行にわたって適用できるため、大きなブロック単位での非表示化にも対応します。
コメントアウトの内部にはdivタグやtableタグ、scriptタグなど、あらゆる種類の要素を含めることができ、通常のHTMLタグと同様に柔軟に扱えます。ただし、コメントアウトを入れ子にすることはできないため、既にコメントアウトされた範囲の中に再度コメントアウトを追加する際には注意が必要です。
<!-- ここからコメントです
こんにちは、さようなら。
<div>
<p>この部分は表示されません</p>
</div>
-->
<!-- 以下は表示されます -->
<p>この部分は表示されます</p>
SEOの観点おいて、コメントアウトされた部分は検索エンジンに完全に無視されるため、長期間にわたって非表示にする場合でもペナルティを受けるリスクはありません。ただし、コメントアウト部分が多すぎるとファイルサイズが増加し、ページの読み込み速度に影響を与える可能性があるため、不要なコメントは定期的に削除することが推奨されます。
hiddenを使う場合
HTML5から導入されたhidden属性は、タグに直接追加するだけで要素を非表示にできる便利な機能であり、divタグやpタグなど、ほぼすべてのHTML要素に適用できます。属性値を指定せずにhiddenと記述するだけで機能するため、記述が簡潔でわかりやすいという利点があります。
この属性を使用した要素はブラウザによってdisplay: noneとして扱われるため、画面上から完全に消え、レイアウトにも影響を与えません。ただし、CSSで明示的にdisplayプロパティを指定すると、hidden属性の効果が上書きされて再度表示されてしまう点には留意してください。
<!-- tableを非表示 -->
<table hidden>
<tr><td>あ</td><td>い</td><td>う</td></tr>
</table>
<!-- divを非表示 -->
<div hidden>この内容は表示されません</div>
<div>この内容は表示されます</div>
<!-- pを非表示 -->
<p hidden>123</p>
<p>456</p>
hidden属性はHTMLのコードを一目見ただけでは非表示箇所を判別しにくいため、コメントアウトと併用して説明を加えておくと保守性が高まります。フォームで使用されるinputタグに対しては、type="hidden"という別の方法が用意されており、こちらは隠しデータの送信に特化した仕組みです。
display noneを使う場合
CSSのdisplay: noneは要素を非表示にする代表的な方法であり、指定した要素をレイアウトから完全に除外します。要素自体が存在しないものとして扱われるため、非表示にした部分の後続要素は詰めて配置され、空白が残ることはありません。
レスポンシブデザインにおいて頻繁に活用される手法であり、メディアクエリと組み合わせることでデバイスの画面サイズに応じた表示制御が可能になります。PCでは表示、スマートフォンでは非表示、といった柔軟な対応ができるため、現代のWeb制作では必須のテクニックです。
<style>
.box-test {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid black;
margin: 10px;
float: left;
background: #facb01;
}
.box-hidden {
display: none;
}
</style>
<!-- 2番目のブロックは非表示 -->
<div class="box-test">あいうえお</div>
<div class="box-test box-hidden">かきくけこ</div>
<div class="box-test">さしすせそ</div>
<div class="box-test">たちつてと</div>
また、JavaScriptと組み合わせることで動的に表示・非表示を切り替えることができ、ユーザーの操作に応じてコンテンツを出し入れする機能を実装できます。ただし、検索エンジンは長期間にわたってdisplay: noneが適用されているコンテンツを隠しテキストと判定する可能性があるため、SEO対策を意識する場合には使用目的を明確にすることが大切です。
visibility hiddenを使う場合
CSSのvisibility: hiddenは要素を視覚的に非表示にする一方、レイアウト上のスペースは確保したままにする特徴を持ちます。display: noneとは異なり、要素が占める領域は残るため、周囲の要素の配置には影響を与えません。
要素を透明にするようなイメージであり、非表示になってもクリックやフォーカスは受け付けなくなるため、ユーザーの誤操作を防ぐことができます。子要素に対してvisibility: visibleを指定すれば、親要素が非表示でも特定の子要素だけを表示させるといった応用も可能です。
<style>
.box-test2 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid black;
margin: 10px;
float: left;
background: #facb01;
}
.test-hidden {
visibility: hidden;
}
</style>
<!-- 3番目のブロックは非表示 -->
<div class="box-test2">あいうえお</div>
<div class="box-test2">かきくけこ</div>
<div class="box-test2 test-hidden">さしすせそ</div>
<div class="box-test2">たちつてと</div>
頻繁に表示・非表示が切り替わるような動的なコンテンツでは、visibility: hiddenを使用することでレイアウトの崩れを防ぎ、安定した表示を維持できます。マウスの動きに連動してツールチップを表示する場合など、レイアウトの変化を最小限に抑えたい状況で威力を発揮する手法です。
visibility collapseを使う場合
CSSのvisibility: collapseは、主にテーブル要素の行や列を非表示にするために使用される特殊なプロパティであり、通常の要素に対してはvisibility: hiddenと同様の動作をします。テーブルに適用すると、指定した行や列が完全に削除されたかのように詰めて表示されます。
商品の在庫状況に応じて、「テーブルの特定行を非表示にする場合」や「条件によって列を動的に表示・非表示したい場合」などに便利な手法です。ただし、ブラウザによって挙動が若干異なる場合があるため、実装前に主要ブラウザでの動作確認を行うことが推奨されます。
<style>
.hide-row {
visibility: collapse;
}
</style>
<!-- 1行目を非表示 -->
<table border="1">
<tr class="hide-row">
<td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
</tr>
<tr>
<td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
</tr>
</table>
<!-- 3列目を非表示 -->
<table border="1">
<tr>
<td>あ</td><td>い</td><td class="hide-row">う</td><td>え</td><td>お</td>
</tr>
</table>
テーブルのレイアウトを維持しながら一部の情報だけを隠したい場合には、visibility: collapseが最適な選択肢になります。データテーブルの管理画面などで、ユーザー権限に応じて特定の列を非表示にするといった実装にも活用できる手法です。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
【AWS】認定資格12種類の一覧や難易度、費用などを解説
Canvaとは？使い方やアカウント登録などを初心者向けに解説
git configで設定情報を確認・表示する方法
「Pythonはやめとけ」と言われる理由と学習するメリット
Ubuntuのversionを確認する方法
