CSSでコメントアウトする方法と書き方を解説!

CSSでコメントアウトする方法と書き方を紹介していきます。CSSのコメントアウトの書き方はHTMLとは異なりますので注意が必要です。

コンテンツ [表示]

  1. 1CSSのコメントアウトとは?
  2. 1.1コメントアウトした箇所は処理の中で無視される
  3. 1.2今は非表示にしたいが後で表示したい時のために一時的にコメントアウト
  4. 2CSSのコメントアウトの書き方
  5. 2.1コメントアウトが1行の場合
  6. 2.2コメントアウトが複数行の場合
  7. 2.3ショートカットでコメントアウトする方法を覚えよう

CSSのコメントアウトとは?

みなさんはCSSを書く際にコメントアウトを書いていますでしょうか?

コメントアウトとは、CSSの記述の中でメモ書きや注意書きを残すことができる機能です。もちろん日本語でもコメントを残せますので、自分へのメモ書きや他の開発者へのメモ書きとしてとても使える機能です。

Photo byTeeFarm

コメントアウトした箇所は処理の中で無視される

下記はCSSにコメントを記述した際の例になります。CSSでのコメントの書き方については次の章で解説しますが、日本語で書いたコメントはブラウザ上には全く表示されていないところがポイントです。

上記の例のindex.cssでは日本語で書かれている「こちらはコメント」という文章は特にエラーも起こさず、かつブラウザ上にも表示されていない状態です。

このように実際の動作には影響せずに、メモを残せる機能がコメントアウトです。

今は非表示にしたいが後で表示したい時のために一時的にコメントアウト

またコメントアウトは一時的に非表示にしたいスタイルがある場合にも使えます。例えば下記の例ではindex.cssの後者のスタイルは非表示になります。

このように一時的に非表示にしたいときの手段としてもコメントアウトは使えます。

CSSのコメントアウトの書き方

それではCSSでのコメントアウトの書き方を解説していきます。

まず知っておいてほしいのは、コメントアウトはCSSだけではなくHTMLにもJavaScriptにもありますが、それぞれ書き方が異なります。

しっかりと「CSSのコメントアウト」の書き方を今回身につけましょう。

コメントアウトが1行の場合

まずはコメントが短く1行で済む場合の書き方です。下記のように記載します。

コメントが1行

 /* ヘッダーの背景色を青にする */
.header {
  background-color: blue;
}

上記の「ヘッダーの背景色を青にする」という日本語はコメントで、実際の処理では無視されます。

コメントは下記の形式で書きます。/*の記号と*/の記号の間に書かれた部分がコメントとなります。

コメントアウトの形式

/* ここにコメント */

コメントアウトが複数行の場合

コメントアウトが複数行の場合でも同様の形式です。下記はコメントアウトが複数行にまたがっている例です。

複数行のコメント

/* 
ヘッダーの背景色を青にする 
複数行のコメント
*/
.header {
  background-color: blue;
}

複数行でも/**/の記号ではされれた箇所がコメントして扱われます。

見やすいコメントデザインを採用しよう

コメントは文法さえ守ればコメントのデザインは特に決まりはありません。下記の記事では見やすいコメントのデザインのパターンを紹介している記事です。

ぜひご自身で一番見やすいコメントのデザインを考えてみて下さい。

あわせて読みたい
CSSで見やすいコメントのデザインのおすすめを紹介!のイメージ
CSSで見やすいコメントのデザインのおすすめを紹介!
CSSで見やすいコメントの見本となるデザインのパターンを紹介してきます。ぜひ一番見やすいコメントのデザインを採用してみて下さい。

ショートカットでコメントアウトする方法を覚えよう

コメントアウトは各エディターでショートカットのコマンドが用意されていることが多いです。主要なエディターでのショートカットコマンドを紹介します。

ぜひ使いこなして、すぐにコメントアウトできるようにしておきましょう。

Sublime TextやAtomやCotEditorなど

コメントアウトのショートカット

行を選択orカーソルをあわせ下記ショートカットを実行

[Windows]
Ctrl + /

[Mac]
Command + /
今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次