CSS /* */ CSS内のコメント [ホームページ制作の装飾プロパティ]

/*　*/

ホームページ制作（ウェブサイト制作）の際に使用するCSS内のコメント「/*　*/」についてのご説明です。

ホームページ制作・作成において、 /* */　を用いることで、CSS内にコメントを挿入することができます。

このCSS中のコメント機能は、ホームページ制作において、該当部分を無効にするコメントアウトにも使用されます。

/* で始まり、*/ で終わる範囲内のテキストはブラウザによって無視されるためホームページのスタイル適用には影響を与えません。主にコメントはCSSファイルの可読性と保守性の向上のために開発者間の情報共有やメンテナンス時の確認に利用されています。

/* */　CSS内のコメント

CSS内にコメント入れます。

/*　コメント開始

*/　コメント終了

CSSの記述において、/* */で囲んだ範囲がコメントになります。

htmlの<!– –>と同様に、ソース中のコメント部分はコメント（注釈）として、ブラウザ表示上は表示されませんが、ソースの中に表示されます。

たとえば、特定のスタイルの役割を説明するためにコメントを付け加えることで、後からCSS・スタイルを見直す際にも、なぜその指定が行われているのかがすぐに分かるようになります。CSSを複数人で運用しているようなプロジェクトでは、セレクタの対象や適用範囲、変更履歴のメモなどを明示する目的でも活用されます。

/* */によるコメントアウト

コメントアウトは、該当箇所をブラウザ表示において一時的に無効にするという機能です。

コメント/* */はhtmlにおける<!– –>と同様に、本来は開発者の備忘録、コメントとしての使い方をしますが、「ソース表示されてブラウザには表示されない」という機能を応用して、該当箇所を/* */で囲うことによって、その場所をブラウザ表示では無効化する、という応用を「コメントアウト」と呼びます。

CSSにおけるコメントアウトは、該当箇所をブラウザ表示においてCSSプロパティを無効にするという機能であり、該当箇所の装飾などを無効化して表示テストしたりする場合に用います。

CSSプリプロセッサ（Sass・SCSS）コンパイル時のコメント除去

CSSプリプロセッサ（たとえばSassやSCSS）を使っている場合、コンパイル時にコメントが除去される設定になっているケースもあります。そのため、公開されるCSSにはコメントが残らない場合があり、開発中に記述するコメントとホームページ公開時に残すべきコメントは区別して設計することが望ましいと考えられます。

CSSファイルの最適化と運用におけるコメントの取り扱い

CSSファイルに記述するコメントは、コードの意図や構造を把握するために大変便利ですが、実際の運用やホームページ（ウェブサイト）のパフォーマンスという観点からは、いくつか注意すべき点があります。ここでは、より専門的にはどのようにCSSのコメントやコードを管理し、ホームページの価値を高めていくかについてお伝えします。

ファイルサイズと表示速度への影響

CSS内のコメントアウトは、ブラウザの画面上には一切表示されません。しかし、記述したコメントのテキスト自体はデータとしてファイル内に残るため、コメントが増えれば増えるほどCSSファイルのサイズは大きくなります。ファイルサイズが増大すると、ホームページの読み込み速度が遅くなる原因となります。

読み込み速度の低下は、ユーザーの利便性を損なうだけでなく、検索エンジンの評価にも影響を与える重要な問題です。事業の集客基盤としてホームページを活用していく上で、表示速度の改善は常に意識しておく必要があります。長文のメモや不要になった古いコードをコメントアウトしたまま大量に残しておくことは、パフォーマンスの観点からは避けるべきです。

開発環境と本番環境の切り離しとファイルの軽量化

では、コメントを一切書いてはいけないのかというと、そうではありません。後々の修正や、他の人がファイルを見たときの保守性を保つために、適切なコメントを残しておくことは非常に重要です。

この問題を解決するために、開発環境と本番公開用の環境でCSSファイルを分けて管理する手法を取り入れます。CSSを記述する作業用ファイルには、わかりやすくコメントをしっかりと残しておきます。そして、実際にホームページ（ウェブサイト）に読み込ませる公開用のファイルを作成する際に、コメントや余分な空白、改行をすべて削除する圧縮処理を行います。

この仕組みを導入することで、人が見るための読みやすさと、ブラウザが素早く読み込むための軽さを両立できます。現在主流となっている開発手順では、こうしたファイルの軽量化処理を自動化して行うことが一般的です。

CSS設計に基づく効果的なコメントの残し方

ホームページの規模が大きくなり、何十ページにもわたるようになってくると、CSSの記述量も膨大なものになります。こうした状況下では、単に「ここは見出しの装飾」といったコメントを残すだけでなく、CSSの設計自体をあらかじめルール化しておくことが求められます。

部品ごとに名前の付け方やファイルの分け方を決めておくことで、コードそのものが説明書の役割を果たすようになります。その結果、コメントは「なぜこの数値を設定したのか」「どのブラウザ向けの特殊な対応か」といった、コードだけでは伝わらない背景や意図を補足するためだけに使われるようになります。

適切な設計と必要な箇所への的確なコメントを組み合わせることで、長期にわたって破綻のない、強固なホームページの運用が可能になります。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページ制作・Webデザインの1ポイント

コメントアウトを使うとブラウザで表示される部分には、該当テキストが表示されないものの、ページのファイルには残存するため、ホームページ制作中のページの修正などのテストの時に便利です。コメントアウトを利用しながらCSSの調整を行いWebデザインを調整するときなどに使用する事が多いでしょう。

ただし短期的にはコメントアウトで一時的な非表示などを行ったとしても、基本的にはファイルをバックアップしておくほうが無難です。

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ