こんにちは！ ライターのナナミです。
CSSを学び始めたばかりだと、この記述って何に使ってるんだっけ…と忘れてしまうこともありますよね。そんなとき、ソースコードにメモ書きを残す方法があるってご存知ですか？
今回はCSSでソースコードにメモを残す方法、コメントについて解説していきます。コメントとは何か、どのように書くのかから、どのように書くと見やすいのかまでしっかり理解して、コメントを使いこなせるようになっちゃいましょう！
CSSのコメントアウトとは？
コメントアウトとは、ソース内にメモ書きを残せる書き方のことです。
CSS
/* コメントです */
普通、CSSのソース内に関係のない記述を書くと、きちんとスタイルが適用されなくなってしまいます。しかしコメントを使うことにより、関係ない記述はスルーして必要な部分だけ使ってくれるのです。
コメント前後に書く記号が、関係ない記述だよという目印になっているわけですね。
コメントアウトはどんな時に使う？
コメントは、様々な内容をメモしておくのに使われています。具体的にどんなメモをしているのか、いくつか例を見てみましょう。
その記述の動作説明を書く
CSSなどのファイルは、複数の人が管理したりする可能性がありますよね。その場合、この記述はこういう目的のために書いているというメモがあると、引き継いだ人が実装内容を理解しやすくなります。
特に複雑な仕様で作成している場合などは、積極的にコメントを残しておくと良いでしょう。
どのエリアのCSSなのかを書いておく
例えば共通のボタンのCSSを書いた場合、そのCSSを書き換えられてしまうとボタンが全部変わってしまって困りますよね。そんな時、ここに書いてある記述は共通のボタンのだから触らないで！と書いておくこともできます。
1つのCSSファイルで複数のページのstyleを作成している場合にも、うまく区切って管理することができますね。
いつ編集したのかをメモしておく
複数人管理の場合、誰がいつ編集したのかがわかると、何かバグが起きてしまった場合に確認を取りやすくなります。ただし、ソースコードはブラウザ上で見ようと思えば見れてしまうので、本名は軽率に載せないのがおすすめ。イニシャルなどで運用できるといいですね。
CSSのコメントアウトの書き方
CSSのコメントアウトは、とっても簡単です。「/*」と「*/」で囲んであげるだけです。1行の場合と複数行の場合、それぞれ具体的に見ていきましょう。
1行の場合
1行の場合は、下記のように普通に囲めばOKです。
CSS
/* 1行のコメントです */
複数行の場合
複数行の場合も、「/*」と「*/」で囲むことは変わりません。
CSS
/* 複数行のコメントです。 最初に開始記号をつけておけば 終了記号が入るまで 全て コメントになります */
改行したとしても、最初に「/*」があり、最後に「*/」があれば、その間のテキストは全てコメントになります。言語によっては1行の場合と複数行の場合、それぞれ書き方が違ったりするのですが、CSSは全く同じであることを覚えておきましょう。
超便利！コメントのショートカットキー
コーディングをする時、テキストエディタを使ったり、Google Chromeを活用している人も多いでしょう。そんな方は、コメントにしたいテキストをドラッグで選んで、下記のショートカットキーを押してみましょう。
- 【Windows】：Ctrl+?
- 【Mac】：command+?
たったこれだけで、選択した範囲をコメントにできます。
現場で使うコメントアウトの実例を紹介
ここまで、CSSのコメントアウトの基本をお伝えしてきました。「/*」と「*/」で囲めば、間に何が入っていてもそこはコメントとして扱われます。記号と合わせて使うことで区切り線としても使えて、より見やすいCSSファイルになります。
CSS
/* ============================================= 複数行のコメントです。 最初に開始記号をつけておけば 終了記号が入るまで 全て コメントになります ============================================= */
ここからは、制作現場で使うコメントアウトの実例を紹介していきます。
見出しのように使う
コメントアウトをソースコードの見出しのように使用する方法です。
/* 共通パーツ ====================================================*/ /* --- btn --- */ /* --- spmenu --- */ /* 特徴 ====================================================*/ /* 料金 ====================================================*/
WebページのどのエリアのCSSかがすぐわかります。
テスト環境用のコードをコメントアウトする
制作現場で使うテスト環境と、実際にWebページを載せる本番環境が異なる場合に使います。
/*background-image: url("../images/img1000.png");*/
background-image: url("/wp-content/uploads/2018/06/img1000.png");
処理が対応しているブラウザを記載する
コードによっては対応しているブラウザが限定されるため、複数の書き方を掲載する事があります。そのときに、どのブラウザ向けの処理なのかをコメントアウトします。
.wid33{
width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;
}
.flexbox{
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
justify-content: center;
}
HTMLの要素を記載する
複数の図形を組み合わせたりする場合など、どの要素かわかりやすくするために使います。
.lead-sentence--balloon::before{ /* 色付きの半円 */
}
.lead-sentence--balloon::after{ /* 白い半円 */
}
処理内容を記載する
ボタンにマウスオーバーさせたときや表示内容を切り替えるなど、なんの処理だったかわかりやすくするために記載します。
/*クリックで中身を表示*/
.accordion-box input:checked + label + div {
height: auto;
opacity: 1;
background-color:#e0fdff;
}
.accordion-box div {
transition: 0.5s;/*表示するスピード*/
}
まとめ
CSSのコメントアウト方法と制作現場で使う実例を紹介してきました。CSSのコメントアウトは「/*」と「*/」で囲むだけなのですごく簡単です。記号と合せることで、CSSファイルをより読みやすくするために使うこともできます。
コメントは自分のために残すものでもありますが、一緒に開発している誰かや、この後引き継いでくれる誰かのために残しておくものでもあります。ぜひ読みやすく有用なコメントを残して、管理しやすいCSSを書いてくださいね。
