CSSで見やすいコメントのデザインのおすすめを紹介！
CSSで見やすいコメントの見本となるデザインのパターンを紹介してきます。ぜひ一番見やすいコメントのデザインを採用してみて下さい。
CSSのコメントで見やすい形にしたい
みなさんはCSSのコメントをどのように書いていますでしょうか？
個人や会社で決まったルールに則りコメントを書いている方もいれば、その場で一番いいと思うコメントをアドリブで書いている方もいるかと思います。
この記事ではCSSのコメントについて統一性と見やすいコメントの例として、コメントのデザインについて紹介していきます。
CSSのコメントの書き方
まず最初にCSSのコメントの書き方を復習しておきましょう。
CSSのコメントはHTMLとは異なりますので注意です。CSSでは下記の記号の中の文章がコメントとして扱われます。
CSSのコメント
/* この間がコメントして扱われる */よくある間違いとしては//（スラッシュ２つ）やHTMLのコメントアウトの<!-- コメント-->方法とは異なりますので注意しましょう。
CSSのコメントアウトの例
下記のようにCSSでは1行、複数行でコメントを書くことが出来ます。
コメントサンプル
/* 1行コメント */
.heading {
background-color: blue; /* 文末1行コメント*/
}
/*
* 複数行コメント
*/
.footer {
background-color: red;
}
それでは次にCSSのコメントのデザイン例を見ていきましょう。
ぜひ見やすいデザインを見つけてみましょう。
CSSで見やすいコメントのデザインのおすすめを紹介
それではCSSで見やすいコメントのデザインの見本を順番にご紹介していきます。
冒頭に使えそうなデザイン
CSSファイルの冒頭などで使えそうな複数行のコメントパターンです。
複数行
/*!
* タイトルなど
*
* Copyright (C) ●●など
*/複数行
/*********************************************
* タイトルなど
*
* Copyright (C) ●●など
*********************************************/大見出しを強調するデザインパターン
大見出しを強調するCSSのコメント
/*********************************
ヘッダーの設定
*********************************/複数行のコメントの書き方でかつ*（アスタリスク）を枠線のように使い、強調するデザインです。
ハイフンパターン
/*--------------------------------
ヘッダーの設定
--------------------------------*/イコールパターン
/*================================
ヘッダーの設定
=================================*/シャープパターン
/*#################################
ヘッダーの設定
#################################*/小見出しで強調するデザインパターン
1行のコメントで、小見出しとして使えそうなパターンです。大見出しパターンとの階層構造として使ってもよいかと思います。
小見出し
/******** ヘッダーの設定 **********/ハイフンパターン
/*------ ヘッダーの設定 -------*/イコールパターン
/*====== ヘッダーの設定 ======*/シャープパターン
/*###### ヘッダーの設定 ######*/文末にコメントを追加するパターン
プロパティと値の指定をしたあとの文末に追加するパターンです。
このパターンはコメントが長くなると見通しが悪くなるため、多用せず、コメントが長くならない時がおすすめです。
文末に追加
.header {
background-color: white; /* ここにコメントを追記 */
}まとめ
いかがでしたでしょうか？CSSのコメントのデザインを紹介してきました。
コメントのデザインについては正解はありませんので、ぜひ見やすいと思うものを採用してみて下さい。また今回紹介したデザインをコピペして、独自に改良してみるのもいいかなと思います。
ぜひお試し下さいませ！
