1. ホーム
  2. ホームページの作り方
  3. HTML
  4. HTMLのコメントアウトって？ブラウザに表示したくない情報の書き方と注意点
  • 最終更新日
  • HTML

HTMLのコメントアウトって？ブラウザに表示したくない情報の書き方と注意点

HTMLを記述しているとソースコードにコメントを残したり、要素をコメントアウトしたりする事がよくあります。

ホームページを作り出して間もない方には便利なのでオススメです。あと複数人でファイルを操作する方たちには必須と言って良いほどコメントアウトは使いますね。

簡単ですのでコメントアウトの方法と注意しなければいけない点も確認していきましょう。HTMLファイル以外にもコメントアウトができるのでそちらの記述方法もご確認ください。

目次 [閉じる]

HTMLのコメントアウトとは

HTMLのコメントアウトには大きく分けて2通りの使い方があります。

  • コメントを書き込む
  • 表示したくない項目を非表示（コメントアウト）にする

コメントアウトをするとソースコードに記述は残るんですけどブラウザ上には表示されません。

コメントとして使う場合は、HTMLの記述が長くなったり、タグの階層が深くても「ここからここまでがこの項目」と書かれているとコードを編集する時にもひと目でわかります。

また、複数人でファイルの編集をおこなっている時も「ここは〇〇年〇〇月〇〇日に更新したよ～」というコメントがあると離れて操作していても情報の共有が可能です。

コメントアウトとして使う場合は、急遽、公開しているホームページの一部分を非表示にしたい時などに使います。あとはコードを編集する際に以前のデータを削除するのではなくて、コメントアウトして情報を残しておきたい時なんかに使いますね。

コメントアウトの書き方と注意点

HTMLでコメントアウトするには「<!--」と「-->」で非表示にしたい箇所を囲みます。

            
    
                
  1. <!--
    2. 
                
  2. <p>これでコメントアウトができます。</p>
    3. 
                
  3. -->
    4.

こうする事によって「p」タグをコメントアウトする事ができます。大きな項目（複数行）をまとめて非表示にしたい場合も「<!--」と「-->」で囲んでやればOKです。

            
    
                
  1. <!-- <p>これもコメントアウトができます。</p> -->
    2.

記述方法は上下で挟まなければいけない訳ではなく、「p」タグを一行の中で囲ってもコメントアウトされます。

            
    
                
  1. <p><!-- 文章のみコメントアウトができます。 --></p>
    2.

あまりこの形で非表示にする事はないでしょうけど、「p」タグ内の文章のみをコメントアウトする事もできます。

            
    
                
  1. <!-- <p>この形にするとデザインが崩れる～ --></p>
    2.

気を付けないといけないのがこの形ですね。開始タグ・閉じタグのどちらか一方をコメントアウトしてしまうとデザイン崩れが起きるので注意です。

特に複数行を一気にコメントアウトする時なんかは上記のようなミスが良く起きます。まぁ、日頃から自分がわかりやすい形にするためにタグ打ちのルールを決めておけばある程度回避できます。

            
    
                
  1. <div>
    2. 
                
  2.     <p>下層タグの前にスペースを入れる</p>
    3. 
                
  3. </div>
    4.

例えば僕の場合は下層のタグは「Tab」キーでスペースを空けますね。「div」タグの中に「p」タグを入れるのであれば「p」タグの前にスペースを作ります。

あとコメントアウトをする際の注意点は、ブラウザ上では非表示だけどソースコードを見ればコメントアウトしている内容が見えてしまうという事です。

ブラウザに表示しているHTMLのソースコードは簡単に見る事ができるため、個人情報に関する内容などを「コメント」に残しておく事は避けましょう。

ソースコードの見方がわからない方は「ブラウザ上でデザインを調整する方法と気になるサイトのソースコードの見方」で紹介していますのでご覧ください。

こちらも見てください

HTML以外のコメントアウト

HTMLのコメントアウトの記述方法を見て頂いたので、今度はその他のファイルのコメントアウトも確認していきます。HTMLとは書き方が違うので注意してください。

CSSでのコメントアウト

            
    
                
  1. /*
    2. 
                
  2. p {
    3. 
                
  3.   color: black
    4. 
                
  4. }
    5. 
                
  5. */
    6.

CSSの場合は「/*」と「*/」で非表示にしたい箇所を囲むとコメントアウトされます。

JavaScript・jQueryでのコメントアウト

            
    
                
  1. // JavaScript・jQueryでコメントアウトする
    2. 
                
  2. /*
    3. 
                
  3. $(function(){
    4. 
                
  4.   $('#sample').text(new Date());
    5. 
                
  5. });
    6. 
                
  6. */
    7.

JavaScript・jQueryでのコメントアウトは2通りあります。ひとつ目は「//」を付ける事でその行の「//」以降が非表示になります。複数行のコメントアウトには使えません。

ふたつ目はCSSと同じで「/*」と「*/」で非表示にしたい箇所を囲ってやるとその範囲がコメントアウトできます。

PHPでのコメントアウト

            
    
                
  1. <?php
    2. 
                
  2. // PHPでコメントアウトする
    3. 
                
  3. # この形もコメントアウトできる
    4. 
                
  4. /*
    5. 
                
  5. echo date("Y/m/d");
    6. 
                
  6. */
    7. 
                
  7. ?>
    8.

PHPでのコメントアウトは3通りあります。ひとつ目は「//」を付ける方法とふたつ目は「#」を付ける方法です。どちらも1行のコメントアウトに使います。「//」または「#」以降が非表示になります。

みっつ目はCSS・JavaScript・jQueryと同じで「/*」と「*/」を使用して複数行をコメントアウトする事ができます。

.htaccessでのコメントアウト

            
    
                
  1. # .htaccessでコメントアウトする
    2. 
                
  2. # <IfModule mod_rewrite.c>
    3. 
                
  3. # RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
    4. 
                
  4. # RewriteRule ^(.*)index.(html|php)$ https://%{HTTP_HOST}/$1 [R=301,L]
    5. 
                
  5. # </IfModule>
    6.

.htaccessのコメントアウトは行の先頭に「#」を追加します。複数行でのコメントアウトはできないので各行に「#」を付ける形でおこないます。

グーグルマップの埋め込み方法！ルート表示したアクセスマップも作成できる Facebookの投稿をホームページに埋め込む！特定の投稿のみの埋め込みも可能

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記