「CSSってどうやってコメントアウトするんだっけ？」
「CSSをコメントアウトする際のデザインパターンについて知りたい」

上記のように考えている方もいるのではないでしょうか。

コメントアウトはプログラミング言語によって異なるので混同しますよね。

CSSのコメントアウトだけでなく、コメントアウトのデザインパターンを知ることでコードの内容がわかりやすくなります。

今回WEBCAMP MEDIAでは、CSSをコメントアウトする方法とデザインパターンについて解説します。

以上の項目について解説します。

この記事を読むことで、CSSを正しくコメントアウトする方法について理解できるので、ぜひ参考にしてみてくださいね！

コメントアウトとは

コメントアウトとはソースファイル内に文字を書き残す方法のことで、ソースコードへ影響を与えずに文字を入力できます。

コメントアウトを使って、コードの解説や説明内容をソースファイルに記述したり、ソースコードの一部を無効化するときによく使われます。

コメントアウトは利用する言語によって使い方が異なるので、今回はCSSをコメントアウトする方法について解説します。

CSSでコメントアウトする方法

CSSファイルでコメントアウトする方法は、始まりに「/*」を指定して間にコメントアウトしたい内容を入力して、最後に「*/」で閉じます。

1行のCSSやテキストをコメントアウト

/*コメントアウト */

複数行のCSSやテキストをコメントアウト

/*
p{
    color: red;
}
*/

上記のように、1行でも複数行でも「/*」と「*/」で囲うことに変わりありません。

CSSをコメントアウトするショートカットキー

CSSをコメントアウトする際、文字やコードの前後にコメントアウトを入力するのが手間に感じる方もいるのではないでしょうか？

ショートカットキーを使うと文字やコードのコメントアウトが楽になります。

コメントアウトのショートカットキーは下記の通りです。

コメントアウトしたい内容を選択したあとショートカットキーを使うことで、手作業よりも早くコメントアウトできます。

CSSでコメントアウトする際の注意点

CSSをコメントアウトする際に注意すべきポイントは下記の通りです。

コメントアウトの閉じタグである「*/」の前に全角文字やスペースが指定されていると、ブラウザによっては閉じタグと認識されないことがあります。

そのため「*/」の前は常に半角スペースを開けるようにして、コメントアウトのエラーが起きないようにすることをおすすめします。

また、コメントアウトの中にコメントアウトを入力する入れ子もNGです。

入れ子にすることで、外側の開始タグと入れ子にした閉じタグでコメントアウトされてしまいます。

上記画面のstyleタグ内ではコメントアウトを入れ子で指定しており、文字が緑の範囲がコメントアウトされている範囲です。

一番最後の閉じタグのみコメントアウトされていないのが分かりますね。

使い方を間違えると、コメントアウトする予定の情報がブラウザ上に公開される可能性もあるので、利用する前にチェックすることをおすすめします。

CSSのコメントアウトが効かないときにチェックすべきこと

CSSのコードをコメントアウトしても効かないときは、下記の項目をチェックしてみましょう。

コメントアウトの記号は半角を使わないと反映されないので、半角入力されているか今一度確認するとよいでしょう。

また、HTMLやJavaScriptのように、ほかのコメントアウト方法をCSSに利用しているパターンも多くあります。

CSSのコメントアウトは「/*」と「*/」を利用するということを再確認しましょう。

CSSでコメントアウトする際のデザインパターン

コメントアウトを使ってソースコードの内容をわかりやすく説明すると、あとで振り返ったときにコードの内容が理解しやすくなります。

また、Web制作現場では複数人でコードを触ることもあるので、わかりやすいコメントアウトの入力方法も大事になります。

現場でも使われることが多い、CSSでコメントアウトする際のデザインパターンを3つ解説します。

デザイン1

/*---------------------------------

  ヘッダー

---------------------------------*/

デザイン2

/********** メニュー **********/

デザイン3

/*
*
*	メインビジュアル
*
*/

上記デザインパターンのように、Webページ内で場面が変わるときにデザイン性の高いコメントアウトを入力することで、どの場面のCSSなのかわかりやすくなります。

コメントアウトのデザインに正解はないので、自分が見やすいと感じたコードをコピペして使ってみるとよいでしょう。

まとめ

今回は、CSSをコメントアウトする方法について解説してきましたが、いかがでしたでしょうか？

CSSのコメントアウトは、半角文字の「/*」と「*/」で囲った内容になります。

ショートカットキーは、コメントアウトしたい内容を選択したあとCtrl(command) + ?で利用可能です。

また、コメントアウトを使ってCSSが利用されている場所を把握しやすいように、デザイン性の高いコメントアウトを利用することをおすすめします。

ぜひ参考にしてみてくださいね！