CSSのコメントアウトの書き方！HTMLとの違いについても解説

言語・開発

プログラミング言語

CSS

アンドエンジニア編集部

2024.08.03

この記事でわかること

CSSはコメントアウトに対応しており、”/*”と”*/”で囲んだ部分にコメントを入れます

HTMLでは、””で囲んだ部分がコメントのため、CSSとの違いがあります

CSSはHTMLと組み合わせて用いることから、混同しないように使い分けします

Facebook

LINE

Hatena

CSSのコメントアウト

CSSはコメントアウトに対応しており、HTMLと合わせて使用します。コメント機能の構文は、言語ごとに定義されており、CSSはHTMLと異なる構文が定義されています。

ここでは、CSSのコメントアウトを学び、実際にHTMLと組み合わせる際のコメントアウトの使い方を学んでいきます。

【参考】：MDN Docs: CSS コメント

CSSとは？概要や基本書式、具体的な記述方法について解説！

CSSでできること一覧！HTMLやJavaScriptとの違い、メリットも解説

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

CSSのコメントアウトの書き方はシンプルで、”/＊”と”＊/”の間にコメントを入れるだけです。言語仕様でいうと、1行のコメント機能と、複数行のコメント機能が同じ”/* */”構文で定義されます。

1行のコメントは、以下のように記述します。

/* この行はコメントです */
/* この行もコメントです */

複数行のコメントは、次の通りで用法に違いはありません。

/* 
このように記述すると、
複数行にわたるコメントに
用いることができます
*/

【参考】：MDN Docs: CSS コメント

CSSの概要

CSS（Cascading Style Sheets：カスケーディングスタイルシート）は、ウェブで用いるHTMLやXMLのようなマークアップ言語の要素を修飾するための仕様です。

わかりやすく言うと、CSSは見栄えの良いウェブページを作成するための仕様です。この仕様は、World Wide Web Consortium（W3C）から仕様として勧告されています。

【参考】：W3C Cascading Style Sheets 【参考】：MDN Docs: CSS の第一歩【参考】：MDN Docs: CSS とは何か

コメントアウトとは

コメントアウトとは、プログラミング言語ソースコードにコメント機能を用いて、コード解釈から除外する指示を追記することを表します。マークアップ言語においても、この機能が実装されています。

コメント機能で追記した内容は実行処理から除外されるため、注釈をソースコードに入れたり、あらかじめ作成したデバッグコードを無効化したりする際に行います。

コメントアウトのメリット

コメントアウトは、ソースコードに注釈を入れたりコードを無効化したりするために利用します。マークアップ言語で使用する際にも、注釈を入れることで保全性が高まります。複雑なコードや大規模なプロジェクトでは重要な機能です。

コードレビューやメンテナンスに活用され、変更の目的や履歴がすぐに分かり、コードの品質を高めることができます。

CSSのコメントアウトは、上記メリットの他、最近ではライブ配信などにCSSを用いて、かわいいデザインなどのカスタマイズにも用いられます。

開発ツールでも活用が可能

統合開発環境（IDE）やエディタでは、コメント機能を使うためにショートカットキーを設定しています。例えば、VSCode（Visual Studio Code）は、豊富なショートカットキーを搭載しています。

Windowsの場合は、コード編集時に範囲指定を行い「Ctrl」＋「/」をキー入力すると、コメントアウトができます。詳しくは以下リンク先のショートカット一覧を確認しましょう。

【参考】：Visual Studio Code 【参考】：Visual Studio Code: Keyboard shortcuts for Windows 【参考】：Visual Studio Code: Keyboard shortcuts for macOS 【参考】：Visual Studio Code: Keyboard shortcuts for Linux

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

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

CSSのコメント機能は、”/* */”で示すだけのシンプルな構文です。最初の”/＊”がコメントの開始、最初の”＊/”でコメント終了となりますので、コメントの入れ子ができません。次のような記述をしてしまうと、コメントアウトが効かないことで正しくコードが解釈されません。

/* 
ここでは複数行にわたるコメントに用いますが、
  /*
　このように、入れ子でコメントをいれることは、
　できません。
  */
入れ子にならないように、コードのチェックをしましょう。
*/

上の例では、最後の「入れ子にならないように、コードのチェックをしましょう。」以降は、実際の実行コードとして判断され、期待通りに解釈されずに誤った処理が行われます。

HTMLのコメント機能

HTMLのコメント機能は、CSSと違いがあるものの使い方は簡単です。HTMLでは、””で囲んだ部分がコメントと解釈されます。具体的には、次のように使用します。

<!-- この行はコメントです -->
<!-- この行もコメントです -->

HTMLもCSS同様に、1行のコメント機能と、複数行のコメント機能に違いがありません。複数行のコメントアウトは次のように記述します。

<!--
このように記述すると、
複数行にわたるコメントに
用いることができます
-->

HTMLの場合も、コメント機能の入れ子ができませんので、注意しましょう。

【参考】：MDN Docs: HTML: ハイパーテキストマークアップ言語【参考】：MDN Docs: Comment

HTMLのコメントアウトの書き方は？使い方と注意事項を解説

CSSとHTMLの役割

CSSとHTMLは、役割が定められています。文章の情報構造や意味づけはHTMLが担当します。

HTMLはウェブの記述に用いる言語で、ハイパーテキスト記述言語（HyperText Markup Language）の略です。複数の文書や情報を参照するリンク（ハイパーリンク）機能を用いて、インターネット上のウェブコンテンツを表示したり自身のPCにあるHTML文書を表示したりすることができます。

CSSは、HTMLで表示されるページの文字の大きさや種類、色合いなど見栄えの指定を担当します。HTMLとCSSは組み合わせて使用し、デザイン性の高いウェブページに仕上げることができます。

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

CSSのコメントアウトを実際に使ってみる

ブラウザは、コンテンツを表示する際にCSSのスタイル情報と結合し、文書を表示させます。ここからは、CSSのサンプルを使って実際にコメントアウトの仕方を解説します。

CSSの構文は、プロパティ: プロパティの値で記述します。プロパティは以下のようなものです。

・color（前面の色）・background（背景色）・border （枠線）・margin （マージン）・width（幅）・height（高さ）・font（フォント）・font-size（フォントサイズ）・font-style（標準・イタリック体・斜体の指定）など

ここからは、CSSを使って実際にHTMLの文字を修飾していきます。

【参考】：MDN Docs: CSS 入門【参考】：MDN Docs: CSS の構成要素

CSSのコメントアウトのサンプル

ここでは、CSSのセレクターを用いてHTMLの要素をカスタマイズする方法を、サンプルで示します。

次の例は、"<p>"で示す色合いを変更する場合にコメントアウトを使います。色合いに複数の候補がある場合に、絞り切れない場合などは、コメントアウトの場所を入れ替えるだけで色調を代えることができます。

/* 次のpの色はページの表示でどちらかを選択します */
/*
p {
  color: white;
}
*/
p {
  color: blue;
}

色調を変更する場合は、次のように該当部分をコメントで囲み直すだけです。

/* 次のpの色はページの表示でどちらかを選択します */
p {
  color: white;
}
/*
p {
  color: blue;
}
*/

【参考】：MDN Docs: CSS セレクター

CSSをHTMLと組み合わせてコメントアウトする

ここでは、CSSを組み込んだHTMLの全体構成を示します。CSSのコメントアウトは、CSSの"<style>～</style>"、あるいはスタイルシートファイルで使用します。

次の例では、HTMLの"<h1>"と"<p>"をCSSセレクターで修飾していきます。コメントアウトの使い方は、先ほどの例と同じですが複数の場所をコメントするにあたって、CSSのコメント機能のほかHTMLのコメント機能も併用しています。

<!DOCTYPE html>
<html>
<head>
<title>CSSをHTMLと組み合わせてコメントアウトする</title>
<style>
body {
  background-color: lightgreen;
}
/* 次のh1の色はページの表示でお好きなどちらかを選択します */
h1 {
  color: orange;
  background: white;
  text-align: center;
}
/*
h1 {
  color: red;
  background: yellow;
  text-align: center;
}
*/
/* 次のpの色はページの表示でお好きなどちらかを選択します */
/*
p {
  color: black;
  font-size: 16px;
}
*/
p {
  color: blue;
  font-size: 16px;
}
</style>
</head>
<body>
<h1>CSSをHTMLと組み合わせてコメントアウトする</h1>
<!--
 この部分はHTMLのコメントで、ブラウザに表示されません
 必要に応じてテキストを変更します
-->
<p>CSSのコメントアウトで色が変わります</p>
</body>
</html>

このように、コメントアウトは自由に使用することができます。ただし、入れ子ができないこと、そしてCSSのコメント機能とHTMLのコメント機能は異なるためにコメント文字が “/* */”と”” で異なることに注意が必要です。