スタイルシートのコメントを活用しよう！

コメントを活用して見やすいソースに

スタイルシートのソース中で、コメントを活用していますか？ HTMLと同じように、スタイルシートのソース中にもコメントを書くことができます。

ソースが長くなると、後日読み直したときに、どこに何を記述したのか分からなくなることがよくあります。 また、他人が書いたソースは、どういう意図でそう書いているのか分からない場合があります。 そんなとき、コメントで補足されていれば、ソースだけからは分からない情報を伝えたり思い出したりすることができます。

また、長いソースを目的別や適用場所別に区切って、読みやすくするためにも活用できます。 「ヘッダ部分」・「フッタ部分」など、適用箇所を示したタイトルをコメントとして書いておけば、読みやすいソースになります。

ぜひ、コメントを活用してソースを書いてみて下さい。

コメントを活用したスタイルシートソースの例

次の例では、「右側のサイドバー」用のスタイルにコメントを加えています。最初に、「ここから右側のサイドバーに関するスタイルを記述する」という意味で、 大きく「右側のサイドバー」という見出しを書いています。 非常に長いソースを記述する場合には、このように、目立つコメントを「ソース内の見出し」として活用する方法がよく使われます。 また、内側の記述でも、それぞれのスタイルが何をデザインしているのかを補足しています。

このようにコメントを記述することで、ソースの量は多くなってしまいますが、後々のメンテナンスは楽になります。