【複数行も可能!】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」などでもこのショートカットキーは使えますよ。
ぜひ実践してみてください。