コメントアウトの書き方比較(html,css,javascript,php)

コメントアウト、ブラウザ分岐、ブラウザ判定についてまとめました。HTML、CSS、JavaScript、jQuery、PHPの書き方における共通点や相違点についてです。

コメントアウトとは

コメントアウトの意味

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

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

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

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

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

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

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

以下、それぞれの書き方についてです。

HTMLのコメントアウト

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

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

<!-- 左右の文字列(赤色)で挟まれたところがコメントアウトされます。 -->

複数行をコメントアウトする場合は、改行するだけです。

<!--
上下の文字列(赤色)で
挟まれたところが
コメントアウトされます。
-->

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

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

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

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

<!--[if IE ]>
上下の文字列(赤色)で挟まれたところは、
IEでは有効ですがIE以外では無効です。
<![endif]-->

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

<!--[if lte IE 8 ]>
上下の文字列(赤色)で挟まれたところは、
IE8では有効ですがIE8より新しいバージョンやIE以外では無効です。
<![endif]-->

CSSのコメントアウト

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

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

/* この部分がコメントアウトされます。*/

上記のように一行で完結しても、次のように複数行に渡ってもOKです。

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

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

/*
.dry {text-decoration:line-through;}
/* .your {color:blue;} */
.tears {background:aliceblue;}
.with {text-indent:5ex;}

*/
.love {font-size:x-large;}

上記コードのサンプルページ(css)を作成しました。サンプルページとそのソースコードを確認すると、上記説明が一目瞭然かもしれません。

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

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

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

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

*:first-child+html .kurenai{color:red;}

CSSハックを使うとでW3C Validatorでinvalidになることがあります。CSSハックは慣れるまでは何かと大変です。

JavaScriptのコメントアウト

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

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

ここは有効
//この行すべてコメントアウトされる
ここは有効
ここは有効 //ここはコメントアウトされる
ここは有効

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

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

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

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

if(0){
document.write ("<p>上下の文字列(赤色)に挟まれた部分がコメントアウトされます。</p>");
}

上記コメントアウトをアンコメントする場合は、ifの条件部分を0から1に変更するだけです。

if(1){
document.write ("<p>この部分の記述は有効です。</p>");
}

上記記述方法は、コメントアウトを入れ子にできます。たとえば、下記コードであれば、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>");
*/
}

上記コードのサンプルページ(js)を作成しました。サンプルページとそのソースコードを確認すると、上記説明が一目瞭然かもしれません。

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

応用:ブラウザ分岐

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

/*@cc_on
スラッシュ、アスタリスク、アットマーク、cc_onで始まり、
アットマーク、アスタリスク、スラッシュで閉じられている部分は、
IEのみ有効でIE以外ではコメントアウトされます。
@*/

次のように記述すれば、IEのみ適用するコードとIE以外で適用するコードを分岐できます。

/*@cc_on
ここにIE用コードを記述する。
下のスラッシュ、アスタリスク、スラッシュでIE用コードが終ると同時に、
IE以外用コードが始まる。
/*/
ここにIE以外用コードを記述する。
/*/@*/

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以下のようです。');
}

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

if(typeof document.body.style.maxHeight!="undefined"&&(!/*@cc_on!@*/false||document.documentMode>=8)){
document.write('お使いのブラウザはIE8以上、もしくはIE以外のブラウザのようです。');
}else{
document.write('お使いのブラウザはIE7以下のようです。');
}

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

補足:jQueryでコメントアウト

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

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('あなたはスマートフォンとかタブレット端末っぽいです');
}

PHPのコメントアウト

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

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

// スラッシュスラッシュの右側から行末までコメントアウトされます。

PHPにはもうひとつ、1行コメントアウトがあります。

# シャープの右側から行末までコメントアウトされます。

次のように記述すれば複数行をコメントアウトできます。CSSJavaScriptと同じです。CSSやJavaScript同様、入れ子も不可です。

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

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

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

if(0){
echo "上下の文字列(赤色)に挟まれた部分がコメントアウトされます。";
}

上記コメントアウトをアンコメントする場合は、ifの条件部分を0から1に変更するだけです。

if(1){
echo "この部分の記述は有効です。";
}

上記記述方法は、コメントアウトを入れ子にできます。たとえば、下記コードであれば、ifの条件部分を0に替えるとif内全体がコメントアウトされます。

<?php 
if(1){
echo "<p>ここは有効。</p>";
//echo "<p>ここは無効。</p>";
echo "<p>ここは有効。</p>";
/*
echo "<p>ここは無効。</p>";
echo "<p>ここは無効。</p>";
*/
}
?>

上述のとおり、入れ子のコメントアウトはJavaScriptでも同じようなことができます。

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

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

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

remove_filter( 'the_content', 'wptexturize' );

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

FC2blog変数でコメントアウト

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

リンク

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