• HOME > 
  • CSS > 
  • CSSのコメントアウトの書き方【複数行に渡るときやキーボード...

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

投稿日:

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

カテゴリー記事のアイキャッチ画像
広告
広告

コメントアウトとは?

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

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

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

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

リンク先のサムネイル
HTMLのコメントアウトを書き方

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

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

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

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

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

CSS

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

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

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

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

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

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

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

CSS

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

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

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

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

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

CSS

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

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

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

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

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

CSS

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

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

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

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

CSS

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

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

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

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

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

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

コメントアウトのキーボードショートカット

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

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

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

まとめ

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

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

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。