CSSコメントの書き方とは？現場の実例や効かないときの対処法を紹介

CSSでコメントを上手く活用すると視認性や作業効率がアップし、制作現場で取り入れられています。

本記事では、CSSコメントの書き方や実務での使用例、コメントが効かないときの解決策など初学者が知りたいことをまるっと紹介します。

CSSのコメントとは

CSSのコメントは、エディタでCSSにコードの説明やメモを書くことです。コメントとして残したものは、ブラウザに反映されず、他のコードにも影響されません。このようにコメントすることを、コメントアウトと呼びます。

コメントがあると、チームで制作するときに他の人にも分かりやすく、コードを見直すときにも便利です。

書くときは「/*」と「*/」を使用し、記号の間に記述するものは全てコメントアウトとして処理されます。

CSSコメントの書き方

ここではCSSコメントの書き方について紹介します。

• 一行のコメント
• 複数行のコメント

それぞれ順番に見ていきましょう。

一行のコメント

一行でコメントアウトするときの書き方は以下の通り。

「/*」と「*/」の間にコメントで残したいことを記述します。

複数行のコメント

コメントが複数行にわたる場合の書き方は以下の通り。

複数行のコメントアウトも一行のときと同様で、最初に「/*」を記して最後に「*/」で締めくくるだけです。

上記の例のように、「/*」を書く場所はコメントアウトしたいものの隣に記述しなくてもコメントとして反映されます。

CSSコメントの便利なショートカットキー

一般的なエディタであれば、以下のショートカットキーでコメントアウトできます。

コメントを入れたい場所を選択して、ショートカットキーを押すだけで簡単にコメントアウトできます。

エディタがVisual Studio Codeで一行をコメントアウトする場合は、行のどの場所からショートカットキーを押しても反映されます。

コメント解除も同様で、解除したいところを選択して同じショートカットキーを押すだけで可能です。

現場で使用されているCSSコメントの実例5つ

現場のCSSコメントの使用例を紹介します。

• セクションの見出し
• 処理内容のメモ
• 一時的なコードの無効化
• セクションの目次
• 対応ブラウザの記載

コードを見返すときや複数で開発するときにCSSでコメントを活用していると、視認性がアップしたり、コード理解を向上させたりする手助けになります。

CSSコメントの使い方をぜひ参考にしてみてください。

セクションの見出し

ヘッダーやフッター、サイドバーなどのセクションごとに見出しをつけると、それぞれのコードがどのセクションについて書いているか明確で、コード管理がしやすくなります。

処理内容のメモ

コードの処理内容を記しておくと、コードがどんな動きをするのか、何を意味しているのかが明確になります。特に複雑な処理のときに有効です。

一時的なコードの無効化

上記のようにCSSの一部をコメントアウトするのと、装飾を確認したいときに役立ちます。ボタンの枠を丸くしたいときやサイズや色の変更など、スタイルがどう変化するか簡単に確認できます。

さらに、CSSが意図した動きをしていないときは部分的にコメントアウトしてチェックすることで、原因追求も可能です。

CSSの動きを確認したあとは、忘れずに不要なコードは削除しておきましょう。

セクションの目次

セクションの目次を記しておくと、CSSファイルを開いたときに構造がすぐに理解できます。

スタイルシートへの記述が長くなると、どこにどんなコードを書いているのか探し出すのが一苦労で、時間がかかります。

CSSファイルの冒頭に記述するだけで何を書いているのか分かるため、チームで開発するときにも便利です。

対応ブラウザの記載

特定のブラウザで動作するときはコメントで記載し、今後のメンテナンスがしやすくなるようにしておくと安心です。

視認性が高いCSSコメントの見出しテンプレート

CSSコメントに見出しつけると、コードの視認性が向上するほか、それぞれのセクションのコードをすぐに見つけられてスムーズに作業が進みます。

ここでは5つの例をまとめて紹介します。

制作現場では、プロジェクトの規模やチームによって使用ルールが異なるため、共同開発するときはルールを見ておきましょう。

また、コメントアウトの装飾は手入力するには時間がかかるため、エディタのショートカットに登録したりコードストックしたりしてすぐに再利用できるようにしておくと効率的です。

CSSコメントが効かないときの対処法

CSSでコメントアウトできないときは、以下の3つをチェックしましょう。

• 他のコードに干渉していないか
• 文字化けしていないか
• キャッシュはクリアしたか

それぞれ順番に見ていきましょう。

他のコードに干渉していないか

CSSコメントが効かないときには、コメントの形式が他のコードと干渉していないかを確認します。

たとえば、以下のような書き方をするとコメントは無効になります。

コメントの開始タグと終了タグの一対のほかに「/*」や「*/」が含まれているときは、不要なコードは削除してください。

文字化けしていないか

以下のような文字化けが発生しても、ブラウザやエディタがコードを正しく認識できず、コメントが無効になる原因になりえます。

この場合は、エディタの文字コードが「UTF-8」と設定されているか確認しましょう。

「UTF-8」に統一することで、ブラウザやエディタがCSSファイルを正しく解釈するようになります。

キャッシュはクリアしたか

他のコードの干渉も文字化けもない場合は、ブラウザのキャッシュをクリアしてみてください。

ブラウザに表示されることはありませんが、最新のCSSファイルを読み込めておらず、古いバージョンを反映している場合があります。

キャッシュのクリアが問題でコード全体が更新されなければ、変更した内容が反映されないため、気をつけましょう。

まとめ：CSSコメントを活用して品質アップしよう

CSSコメントは、セクションに見出しをつけたり、処理内容のメモをしたりとさまざまな場面で活用できます。

どこに何を書いているのかコードが一目で分かるようになり、複雑な処理の理解度が向上して保守性が高まります。

とはいえ、とりあえずコメントを残しておけば良いというものではなく、必要なポイントにコメントアウトするのが有効でしょう。

このような要所をおさえてコーディング力アップを目指すなら、デイトラWeb制作コースがおすすめです。

未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。

さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！