• CSS

CSSのコメントアウトの書き方【複数行に渡るときやキーボードによるショートカットの方法】

投稿日:2020年12月23日（最終更新日:2023年01月10日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

コメントアウトとは？

コメントアウトとはHTMLやCSS・Javascriptのコードの中に補足や説明などを書き加えるための方法のことです。

コメントアウトを行わずにソースコード内にメモを記述してしまうと、コードの一部として認識されたり、コードの構成を崩してしまう恐れがあるため、コメントアウトは欠かせません。

また、ソースコード内で特定のコードを一時的に無効化したい時にもコメントアウトは利用されます。

このページでは、CSSのソースコード中でコメントアウトを行う方法について説明します。

HTMLのコメントアウトの書き方についてはこちらのページをご覧ください。

HTMLのコメントアウトを書き方

HTMLでは「」の間は全てコメントアウトとしてブラウザに認識されるので、スタイルなどサイトの表示に影響を及ぼしません。コードの中に補足や説明などを書き加えたいときや、コードの一部を一時的に無効化させたいときなどにコメントアウトをしようします...【もっと読む】

コメントアウトの記述方法

CSSのコメントアウトは次のように記述します。

「/*」と「*/」の間は全てコメントアウトとしてブラウザに認識されるので、スタイルなどサイトの表示に影響を及ぼしません。

.sample{
    background-color:#ff0000;/*コメントをここに記載*/
}

コメントアウトを使う場面

冒頭で述べたように、コメントアウトはコードを記述していく中で次のような状況で使用します。

• 補足などのメモをコードの中に挿入したいとき
• コードの一部を一時的に無効化したいとき

コメントアウトを使って補足などのメモをコードの中に挿入する

後から修正が必要になったときのためにコメントアウトを使って補足や説明を残しておけば、どこを編集すれば良いかが一目でわかるので便利です。

またサイトを複数人で編集する場合では、誰でもわかるような補足を記述しておくと良いかもしれません。

/*見出しタイトル*/
.sample{
    background-color:#ff0000;/*背景色*/
    color:#000000;/*文字色*/
}

コードの一部を一時的に無効化する

記述してあるスタイルを一時的に無効化したい場合は、削除ではなくコメントアウトさせた方が良いでしょう。

もとに戻すときはコメントアウトを消すだけなので簡単です。

下の例では、背景色のプロパティと値の行をコメントアウトさせているので、要素を表示させたときにスタイルは反映されません。

/*見出しタイトル*/
.sample{
    /*background-color:#ff0000;*/
    color:#000000;
}

複数行に渡るコメントアウトの書き方

「/*」と「*/」の間であれば、改行して複数行になっていてもコメントアウトになります。

CSSにおいては、長文の説明を書いたり、複数のプロパティやセレクタをまとめて無効化させることも出来ます。

下の例では、セレクタの指定箇所の説明を2行にしている他、背景色と文字色をまとめコメントアウトしています。

/*トップページの見出しタイトルのスタイルは
    ここで設定しています*/
.sample{
    /*background-color:#ff0000;
    color:#000000;*/
    font-size:20px;
}

CSSのコメントアウトは入れ子にできる？

CSSでコメントアウトを使用する際の注意点として、コメントアウトは入れ子にすることができないという点があります。

下の例は、「sample」というセレクタを一括でコメントアウトしようとしていますが、背景色の補足説明のコメントアウトで「*/」が記述された時点で閉じられてしまうため、それ以降はコメントアウトされなくなってしまいます。

/*
.sample{
    background-color:#ff0000;/*背景色*/
    color:#000000;←コメントアウトされていない!
}←コメントアウトされていない!
*/←コメントアウトされていない!

このように、複数行のコードをまとめて無効化しようとしたときに、補足の為に記述していたコメントアウトが中に含まれているということが良くありますので注意が必要です。

キーボードによるショートカットの方法

VScodeなどメジャーなエディターでは、キーボードのショートカットでコメントアウトを挿入することができます。

記述の手間を大きく減らすことができるので、ショートカットを覚えて積極的に活用しましょう。

コメントアウトのショートカットキーは「Ctrl」を押しながら「/（スラッシュ）」です。

VScodeなどメジャーなエディターでは、このようにするだけでコメントアウトが挿入されるので入力の手間が少なくて済みます。

なお、カーソルがある行に記述が存在する場合、その行全体をコメントアウトしてくれます。

また、コメントアウトがある行で、もう一度「Ctrl」を押しながら「/（スラッシュ）」を押せば、コメントアウトを削除できるので便利です。

まとめ

以上がCSSでコメントアウトを行う方法です。

コードを記述していく上では欠かせませんが、多用し過ぎると逆に見づらくなってわかりにくくなります。いくつかのルールを設けてそれに沿って使っていくのが良いのではないでしょうか？