コメントアウト書き方やブラウザ判定方法(html css javascript php)

コメントアウト、ブラウザ分岐、ブラウザ判定についてまとめました。HTML、CSS、JavaScript、jQuery、PHPの書き方における共通点や相違点についてです。コメントアウトでソースコードの理由や意味を残すとメンテナンス時に便利です。

コメントアウトとは

コメントアウトの意味

  1. ソースコード内に書かれているのに、無いものとして扱われる部分(コード)です。

  2. コメントアウトを解除し、書かれているソースコードを有効にすることを「アンコメント」といいます。コメントアウトの対義語です。

コメントアウトを使うメリット

  1. コメントアウトすることで、ソースコードを一時的に無効にできます。ソースコードを削除すると、そのソースコードを再度使う場合、またコーディングしないといけなくなります。

  2. ソースコードの機能説明などをコメントアウトして記述しておけます。自分一人で作成したソースコードでも、時の経過とともに「なぜこのコードを書いたのか」が不明になりがちです。ましてや複数人で制作しているとなおさらです。コメントアウトで説明文を載せておくことで、作業効率低下を緩和できます。

このページの構成

  1. コメントアウトと一言で言っても複数の種類があります。また、厳密にはコメントアウトとは言えないかもしれない「ブラウザ判定」や「ブラウザ分岐」についても言及しています。

  2. そこでこのページでは使用頻度などから、「基本」もしくは「プロ用」と見出し部分に記載しています。コメントアウトにあまり慣れていないうちは「プロ用」は無視して、「基本」を使いこなせるようにした方がいいと思います。

    •  プロ用を非表示にする場合はここをクリック! 
  3. ブラウザ上で見えている部分のみならず、このページのソースコードも確認いただくと、このページの記載内容を一層ご理解いただけます。このページで扱っているテーマは「コメントアウト」なので、説明のみならずコメントアウトの活用具体例としてご覧いただければと思います。

コメントアウト書き方比較一覧

 <!-- -->   /* */   //   #   if(0){} 
HTML × × × ×
CSS × × × ×
JavaScript × ×
PHP ×

以下、それぞれの書き方について詳述します。

HTMLのコメントアウト

基本:全ブラウザでコメントアウト

  1. 使用頻度は高いです。

  2. HTMLコード内で次のとおり記述します。

    <!-- 左右の文字列(赤色)で挟まれたところがコメントアウトされます。 -->
  3. 複数行をコメントアウトする場合は、改行するだけです。

    <!--
    上下の文字列(赤色)で
    挟まれたところが
    コメントアウトされます。
    -->
  4. 次の文章の中にコメントアウトで文字列を入れました。このページのソースコードを表示するとコメントアウトの内容を確認できます。

    • ↓コメントアウト↓
      ↑コメントアウト↑
  5. HTMLでのコメントアウトは、後述するCSSJavaScriptPHPなどと共通している書き方はありませんコメントアウト書き方比較一覧の表にあるとおりです。

プロ用:IEを判定してコメントアウト

  1. 使用頻度はわりと高いです。

  2. IEかどうかを判定して条件分岐できます。IEのバージョンごとに多様なバグがあるので、読み込む外部CSSファイルを条件分岐してブラウザ別に選択する時に便利です。IE6などのシェアが切り捨てられるほど減っていないので、わりと使われています。

  3. IEだけソースコードが有効になり、IE以外ではコメントアウトされる記述は次のとおりです。

    <!--[if IE ]>
    上下の文字列(赤色)で挟まれたところは、
    IEでは有効ですがIE以外では無効です。
    <![endif]-->
  4. 次の文章の中に上記IE以外ではコメントアウトされる記述で文字列を入れてました。IEでこのページを閲覧すると表示され、それ以外だと表示されません。このページのソースコードを表示すると内容を確認できます。

    • ↓コメントアウト↓
      ↑コメントアウト↑
  5. IEのバージョン別に有効無効を操作できます。外部CSSファイルをIEのバージョン別に読み込ませたりする時によく使われる記述です。(lteとは「Less Than or Equal」(より少ないか同じ)という意味です)

    <!--[if lte IE 8 ]>
    上下の文字列(赤色)で挟まれたところは、
    IE8では有効ですがIE8より新しいバージョンやIE以外では無効です。
    <![endif]-->
  6. 上記コードのサンプルを次の文章に入れました。

    • ↓コメントアウト↓
      ↑コメントアウト↑
  7. 詳細は次のページで確認できます。主に、HTMLで条件分岐し読み込むCSSファイルを選択する方法について述べられています。また、上記とは逆にIEだけコメントアウトすることもできます。

CSSのコメントアウト

基本:全ブラウザでコメントアウト

  1. 使用頻度は高いです。

  2. CSSコード内で次のとおり記述します。

    /* この部分がコメントアウトされます。*/
  3. 上記のように一行で完結しても、次のように複数行に渡ってもOKです。

    /*
    スラッシュ、アスタリスクで始まり、
    アスタリスク、スラッシュで閉じられている部分が
    コメントアウトされます。
    */
  4. コメントアウトを入れ子にはできません。うっかりやってしまうと不具合がでます。次のように記述すると、内側の入れ子閉じタグ以降がコメントアウトされません(下記コードでは .tears.with)。さらに、外側の入れ子閉じタグの次に来る最初の定義(.love)が無効になります。CSSにこんな愛のない対応をされると涙せずにはいられません。

    /*
      .dry {text-decoration:line-through;}
        /* .your {color:blue;} */
      .tears {background:aliceblue;}
      .with {text-indent:5ex;}
    */
    .love {font-size:x-large;}
  5. 上記コードのサンプルページ(css)を作成しました。サンプルページとそのソースコードを確認すると、上記説明が一目瞭然かもしれません。

  6. CSSでのコメントアウトの書き方で、後述するJavaScriptPHPでもコメントアウトできます。

プロ用:ブラウザを判定してコメントアウト(CSSハック)

  1. 使用頻度は高くないながらも、それなりにあります。

  2. 一般的に、CSSハックと言われています。名前通り仕様の穴をついた「ハック」なので、使用は控えたほうがいいです。

  3. たとえば、CSS内に次のように定義するとIE7にのみ適用されます。赤文字部分がCSSハックするために付加された部分です。適用されるIE7以外のブラウザには無意味なコーディングなので、下記コード全体がコメントアウトと同じように無効と判定されます。

    *:first-child+html .kurenai{color:red;}
  4. CSSハックのコーディングの仕方でW3C Validatorでinvalidになったりします。CSSハックは慣れるまでは何かと大変です。

  5. 次のページで、ブラウザやそのバージョン別にCSSハックする方法詳細を確認できます。

JavaScriptのコメントアウト

全ブラウザでコメントアウト

基本:入れ子にしないコメントアウト

  1. 使用頻度は高いです。

  2. JavaScriptコード内で次のように記述します。

    ここは有効
    //この行すべてコメントアウトされる
    ここは有効
    ここは有効 //ここはコメントアウトされる
    ここは有効
    • //(スラッシュ2つ)の右側から行末までがコメントアウトされます。
    • 行の途中に//がある場合、その左側は有効で右側だけがコメントアウトされます。ちょっとしたコメントを書く際に便利です。
    • 1行完結のためか、閉じタグはありません。
    • 上記書き方で、PHPでもコメントアウトできます。
  3. 上記コードのサンプルを次の文章に入れました。ソースコードを確認すると、次の文章が一部しか表示されていないのが分かります。

  4. 次のように記述すれば複数行をコメントアウトできます。CSSPHPと同じ書き方です。この書き方では、CSS同様入れ子は不可です。

    /*
    スラッシュ、アスタリスクで始まり、
    アスタリスク、スラッシュで閉じられている部分が
    コメントアウトされます。
    */
  5. 上記コードのサンプルを次の文章に入れました。ソースコードを確認すると、次の文章が一部しか表示されていないのが分かります。

プロ用:「if」でコメントアウトの入れ子が可能

  1. 使用頻度は低いです。

  2. JavaScriptに次のとおり記述します。

    if(0){
    document.write ("<p>上下の文字列(赤色)に挟まれた部分がコメントアウトされます。</p>");
    }
  3. 上記コメントアウトをアンコメントする場合は、ifの条件部分を0から1に変更するだけです。

    if(1){
    document.write ("<p>この部分の記述は有効です。</p>");
    }
  4. 上記記述方法は、コメントアウトを入れ子にできます。たとえば、下記コードであれば、ifの条件部分を0に替えるとif内全体がコメントアウトされます。

    if(1){
    document.write ("<p>ここは有効。</p>");
    //document.write ("<p>ここは無効。</p>");
    document.write ("<p>ここは有効。</p>");
    /*
    document.write ("<p>ここは無効。</p>");
    document.write ("<p>ここは無効。</p>");
    */
    }
  5. 上記コードのサンプルページ(js)を作成しました。サンプルページとそのソースコードを確認すると、上記説明が一目瞭然かもしれません。

  6. コメントアウトの入れ子は、PHPでもPHPの文法に法った書き方で同じようなことができます。

プロ用:ブラウザ分岐

  1. 使用頻度は低いです。

  2. 次のように記述するとIEにのみ適用されます。

    /*@cc_on
    スラッシュ、アスタリスク、アットマーク、cc_onで始まり、
    アットマーク、アスタリスク、スラッシュで閉じられている部分は、
    IEのみ有効でIE以外ではコメントアウトされます。
    @*/
  3. 次のように記述すれば、IEのみ適用するコードとIE以外で適用するコードを分岐できます。次のサイトの解説が大変丁寧です。

    /*@cc_on
    ここにIE用コードを記述する。
    下のスラッシュ、アスタリスク、スラッシュでIE用コードが終ると同時に、
    IE以外用コードが始まる。
    /*/
    ここにIE以外用コードを記述する。
    /*/@*/
  4. IE 6,7,8,9 と その他のブラウザを判定するコードです。次のサイトに記載されているコードを元に作成しました。

    if (typeof document.body.style.maxHeight != "undefined") {
        if (!/*@cc_on!@*/false){
            // Not IE.
            document.write('お使いのブラウザはIEではないようです。');
        }else if (document.documentMode >=9) {
            // IE9以上
            document.write('お使いのブラウザはIE9以上のようです。');
        }else if (document.documentMode ==8) {
            // IE8
            document.write('お使いのブラウザはIE8のようです。');
        }else {
            //IE7, IE8(IE7 mode)
            document.write('お使いのブラウザはIE7かIE8(IE7 mode)のようです。');
        }
    } else {
        // IE6, older browsers
        document.write('お使いのブラウザはIE6以下のようです。');
    }
  5. 上記コードを使うと下記の通り判定されます。

  6. 「IE7以下」と「IE8以上もしくはIE以外のブラウザ」を判定するコードです。

    if(typeof document.body.style.maxHeight!="undefined"&&(!/*@cc_on!@*/false||document.documentMode>=8)){
    document.write('お使いのブラウザはIE8以上、もしくはIE以外のブラウザのようです。');
    }else{
    document.write('お使いのブラウザはIE7以下のようです。');
    }
  7. 上記コードを使うと下記の通り判定されます。

  8. IEのバージョン別やその他ブラウザを判定する方法などの詳細は次のページで確認できます。

jQueryでブラウザ判定

基本:jQueryでコメントアウト

  1. jQueryはJavaScriptでできているのでJavaScriptと同じ書き方でコメントアウトできます。

プロ用:jQueryでブラウザ判定

  1. JavaScriptのライブラリであるjQueryでブラウザを判定するコードです。次のサイトからの引用です。

    var _ua = (function(){
    return {
    ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
    ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
    ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
    IE:document.uniqueID,
    Firefox:window.sidebar,
    Opera:window.opera,
    Webkit:!document.uniqueID && !window.opera && !window.sidebar && window.localStorage && typeof window.orientation == "undefined",
    Mobile:typeof window.orientation != "undefined"
    }
    })();
    if(_ua.ltIE6){
    document.write('あなたがお使いのブラウザはIE6以下っぽいです');
    }else if(_ua.ltIE7){
    document.write('あなたがお使いのブラウザはIE7以下っぽいです');
    }else if(_ua.ltIE8){
    document.write('あなたがお使いのブラウザはIE8以下っぽいです');
    }else if(_ua.webkit){
    document.write('あなたがお使いのブラウザはchromeもしくはsafariっぽいです');
    }else if(_ua.Firefox){
    document.write('あなたがお使いのブラウザはFirefoxっぽいです');
    }else if(_ua.Opera){
    document.write('あなたがお使いのブラウザはOperaっぽいです');
    }else if(_ua.IE && !_ua.ltIE8){
    document.write('あなたがお使いのブラウザはIE9以上っぽいです');
    }else if(_ua.Mobile){
    document.write('あなたはスマートフォンとかタブレット端末っぽいです');
    }
  2. 上記コードを使うと下記の通り判定されます。

PHPのコメントアウト

基本:普通にコメントアウト

  1. 使用頻度は高いです。

  2. PHPコード内で次のとおり記述します。JavaScript と同じです。

    // スラッシュスラッシュの右側から行末までコメントアウトされます。
  3. PHPにはもうひとつ、1行コメントアウトがあります。

    # シャープの右側から行末までコメントアウトされます。
  4. 次のように記述すれば複数行をコメントアウトできます。CSSJavaScriptと同じです。CSSやJavaScript同様、入れ子も不可です。

    /*
    スラッシュ、アスタリスクで始まり、
    アスタリスク、スラッシュで閉じられている部分が
    コメントアウトされます。
    */

プロ用:「if」でコメントアウトの入れ子が可能

  1. 使用頻度は低いです。

  2. まずは、PHPコード内で次のとおり記述します。

    if(0){
    echo "上下の文字列(赤色)に挟まれた部分がコメントアウトされます。";
    }
  3. 上記コメントアウトをアンコメントする場合は、ifの条件部分を0から1に変更するだけです。

    if(1){
    echo "この部分の記述は有効です。";
    }
  4. 上記記述方法は、コメントアウトを入れ子にできます。たとえば、下記コードであれば、ifの条件部分を0に替えるとif内全体がコメントアウトされます。

    <?php 
    if(1){
    echo "<p>ここは有効。</p>";
    //echo "<p>ここは無効。</p>";
    echo "<p>ここは有効。</p>";
    /*
    echo "<p>ここは無効。</p>";
    echo "<p>ここは無効。</p>";
    */
    }
    ?>
  5. 上述のとおり、入れ子のコメントアウトはJavaScriptでもJavaScriptの文法に法った書き方で同じようなことができます。

ブログでのコメントアウト

WordPress記事内にhtmlでコメントアウト

  1. WordPressの記事内にhtmlでコメントアウトする際は、あらかじめお使いのテーマのfunctions.phpに以下のコードを追加した方がいいです。

    remove_filter( 'the_content', 'wptexturize' );
  2. そうしないと、コメントアウトの閉じタグが勝手に文字実体参照化してしまいます。その結果、コメントアウトが記事の最後の方まで続いてしまいます。詳細は次のサイトで確認できます。

FC2blog変数でコメントアウト

  1. 詳細を次のページに記載しました。

他サイトの参考になるページへのリンクです。日付は各ページの公開日もしくは最終更新日です(2012年6月現在)。ありがとうございます。