【複数行も可能!】HTMLのコメントアウトのやり方と使い方

【複数行も可能!】HTMLのコメントアウトのやり方と使い方

HTMLのコメントアウトは以下の通り。

<!-- コメントアウトしています -->

ショートカットキーは以下の通り

コメントアウトのショートカットキー
  • windows 「 Ctrl + / 」
  • Mac 「 ⌘command + / 」

これがすべてですが、一応解説します。

HTMLのコメントアウトのやり方

説明よりコードです。

<!-- コメントアウトしています -->

HTMLはコメントアウト開始の記号(<!–)と終了の記号(–>)の間に書かれているものがコメントアウトされます。

上記のサンプルは1行で書かれていますが、複数行でもコメントアウトさせることが可能です。

複数行の場合

複数行のやり方はこちら

<!--複数行のコメントアウトです
複数行のコメントアウトです
複数行のコメントアウトです
複数行のコメントアウトです-->

もしくは分かりやすいように改行してあげると見やすくなります。

<!--
	複数行のコメントアウトです
	複数行のコメントアウトです
	複数行のコメントアウトです
	複数行のコメントアウトです
-->

1行と複数行の書き方の違いというよりも、開始の記号(<!–)と終了の記号(–>)の間にあるものはすべてコメントアウトされます。

HTMLのコメントアウトの使い方

HTMLのコメントアウトは以下のようなときに使われます。

  • WEBブラウザ上に表示したくないとき
  • 制作者以外が見た時に分かりやすくさせるため

WEBブラウザ上に表示したくないときは文字通り、そのままですが、

制作者以外が見た時に分かりやすくさせるためとはどんなときか、実際に使用する方法で確認してください。

	<div class="menu">
		<ul>
			<li>メニュー1</li>
			<li>メニュー2</li>
			<li>メニュー3</li>
		</ul>
	</div><!-- END - menu -->

上記の例はdivのクラス属性「menu」の閉じタグはここですと伝えるためのコメントアウトです。

今回の例のように、タグ自体が少なければ、どこの閉じタグだかすぐにわかります。

しかし、実際のHTMLファイルは通常300行以上あるので、このコメントアウトを付けておけば、間違って閉じタグだけ消してしまうことを防ぐことができます。

コメントアウトと使う時の注意点

コメントアウトは、WEBブラウザ上には見えませんが、ソースコードとしては見えてしまいます。

「誰にも見られないから」と変なことを書くのは辞めたほうがよさそうです。

ショートカットキーで一瞬でコメントアウト

冒頭でも書いてある通り、HTMLのコメントアウトはショートカットキーを使えば一発です。

コメントアウトのショートカットキー
  • windows 「 Ctrl + / 」
  • Mac 「 ⌘command + / 」

今まで一つずつ入力していた人もこれで時間の短縮ができますね。

ちなみに「HTML」だけではなく、「CSS」や「JS」などでもこのショートカットキーは使えますよ。

ぜひ実践してみてください。

スポンサーリンク

スポンサーリンク