CSSのコメントアウト!見やすい書き方から使い方まで徹底解説

こんにちは! ライターのナナミです。

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を書いてくださいね。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー