【初心者向け】HTMLの一部を非表示にする方法

HTMLを非表示にするシーンやメリットは？

後日また表示させたいとき

HTMLの一部まとめて一旦非表示にすると、非表示を解除することで再度表示させることも簡単にできます。たとえば、クリスマスの時期だけ表示したいデザインや文章、正月だけ表示したい文章、など季節の記述を作っておき、毎年時期が来たら該当の箇所を表示させるという対応ができますね。

ブラウザのサイズで表示/非表示を切り替えたいとき

現在、Webの閲覧はPCやスマホなど、様々な環境から閲覧されています。PCでは表示させたいけど、スマホの縦長のブラウザではこの部分をカットしたいなどレスポンシブデザインの要望がある場合、HTMLの一部を非表示にすることで配慮ができるでしょう。

Web広告をカットしたいとき(ただし、規約を要確認！)

無料や格安で使用できるレンタルサーバーやブログの場合、Webサイトに広告が表示されます。これをHTMLのタグを使うことで、非表示にすることが可能な場合があります。ただし、会社側もこれら広告を表示することで得たリターンによって、無料や格安でサーバーやブログを運営してくださっているわけなので、非表示にすること自体が規約違反となる場合も。確認してから、適用してくださいね。

自分でアフィリエイトや広告枠を設置していて、ブラウザのサイズによって広告を非表示にするなどの対応をしたい場合も同様です。設置しているが非表示という状態が発生しても規約違反とならないかどうかは、確認しておく必要があります。それぞれの規約をご確認ください。

非表示にするコーディング方法

それではさっそく、実際のコーディング方法を見ていきましょう。

HTMLコメントアウトを使う方法

HTMLにコメントを書くときのタグを使う方法です。

<!-- と --> で、非表示にしたいHTMLの部分を囲みます。囲む中にはdivタグやtableタグ、fontタグなど他のタグや、styleタグ、scriptタグが入っていても問題なく、全て反映されなくなります。ただし、HTMLコメントを入れ子にすることはできません。

サンプルコード

<!-- ここからコメントです
こんにちは、さようなら。
<script>
document.write("また会う日まで");
</script>
-->

<script>
<!--
document.write("script内をコメントにすると実行されますよ");
//-->
</script>

<!-- 以下は表示されます -->
あたらしくこんにちは。

<script>
document.write("また会いましたね！");
</script>

表示結果

JavaScriptやstyleタグを使って記述するスタイルシートは、タグの中にHTMLコメントのタグを書くことで古いブラウザでの誤作動を防いでいます。タグごとコメントにすると動作しませんが、タグの中で<!-- -->コメントを使うと動作するので、この違いに気をつけてください。

タグにhiddenを使う方法

divタグやpタグなど、通常のタグに属性hiddenをつけると、非表示になります。やってみましょう。

サンプルコード

<!-- あいうは非表示 -->
<table hidden>
<tr><td>あ</td><td>い</td><td>う</td></tr>
</table>

<table>
<tr><td>か</td><td>き</td><td>く</td></tr>
</table>

<!-- ABCは非表示 -->
<div hidden>ABC</div>
<div>DEF</div>

<!-- 123は非表示 -->
<p hidden>１２３</p>
<p>４５６</p>

6文字書き加えるだけなので、とても簡単ですね。ただし、HTMLをぱっと見たときに、どの部分が非表示になっているのかわかりにくいので、サンプルコードのようにHTMLコメントも併用して説明を書いておくとよいですね。

display noneを使う方法

ここからは、CSS（スタイルシート）を使った方法となります。このdisplay noneを使った方法は、レスポンシブデザイン対応でよく使われる対応です。

まず、CSSって何？という方は、こちらの記事も参考にしてくださいね。

弊社参考記事：
【初心者向け】CSSとは何か？画像を交えて分かりやすく解説

divなどのタグにこの属性display noneを適用することで、表示されなくなります。サンプルを見てみましょう。

サンプルコード

<style>
.boxtest{
  width:80px;
  height:80px;
  padding:10px;
  border: 1px solid black;
  margin: 10px;

  float:left;
  background:#facb01;
}


.box1{
display:none;
}

</style>

<!-- かきくけこブロックは非表示 -->
 <div class="boxtest">あいうえお</div>
 <div class="boxtest box1">かきくけこ</div>
 <div class="boxtest">さしすせそ</div>
 <div class="boxtest">たちつてと</div>

<!-- ブロックの回り込み解除 -->
<div style="clear:both;"></div>

表示結果

display noneを指定したブロックだけが、非表示になりました。非表示となった部分は、ないものとして描画されていますね。

また応用として、ページ全体のiframe(インラインフレーム)タグに対してこのスタイルを適用することで、iframeを使用したWebサイトの広告を消すという使い方もできます。ただし前述の通り、広告を消すことが利用規約に違反している場合もありますので、ご利用のサービスの利用規約をよくご確認くださいね。

サンプルコード

<style>

iframe { display: none ;}

</style>

visibility hiddenを使う方法

こちらの方法でも、スタイルシートを使用します。display:noneとの違いは、スペースを確保してくれるというところです。サンプルを見てみましょう。

サンプルコード

<style>

.boxtest2{
  width:80px;
  height:80px;
  padding:10px;
  border: 1px solid black;
  margin: 10px;

  float:left;
  background:#facb01;
}

.test1{
/* display:none; */
}

.test2{
 visibility:hidden;
}

</style>

<!-- さしすせそブロックは非表示 -->
 <div class="boxtest2">あいうえお</div>
 <div class="boxtest2 test1">かきくけこ</div>
 <div class="boxtest2 test2">さしすせそ</div>
 <div class="boxtest2">たちつてと</div>

<!-- ブロックの回り込み解除 -->
<div style="clear:both;"></div>

display:noneとことなり、間がつまらずに確保されたままということがわかりましたね。

visibility collapseを使う方法

このスタイルを適用すると、表の行や列を非表示にすることができます。

サンプルコード

<style>
.mienai {
 visibility:collapse;
}
</style>

<!-- あ行は非表示 -->
<table>
<tr class="mienai"><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td></tr>
<tr><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr>
</table>

<!-- う列を非表示 -->
<table>
<tr><td>あ</td><td>い</td><td class="mienai">う</td><td>え</td><td>お</td></tr>
</table>

まとめ

表示・非表示を切り替えることでWebサイトの更新が短時間でできてしまうなど、使いこなすと便利なHTML非表示対応。Webサイトの運営には必須の知識ですね。しっかり覚えてどんどん使ってみましょう！