CSSのコメントアウトの書き方と制作現場での使用サンプルを紹介

cssのコードを綺麗に書いて行く上で欠かせないコメントアウトについての解説です。1行での書き方、複数行での書き方などの基本的な内容を学んだあとにプロの現場ではどのようにcssのコメントアウトが活用されているかの事例を4つ解説していきます。

本記事を読むことでcssのコードをよりわかりやすく、綺麗に書くことができるようになるはずです。

コメントアウトとは?

コメントアウトとはテキストエディタ側(コード側)に書くメモのようなもので、実際のcssのコードのようにブラウザ側(私たちがみている側)には表示されません。

<p>テキスト</p>
/*この部分がコメント*/
p{
  color : red;
}

 

 

テキスト

 

cssのコードに「/*この部分がコメント*/」と書かれています。その部分はブウラザ側には反映されず、color : red;という文字色を赤くするというcssだけが反映されていますね。こういったものをコメントアウトといいます。

htmlとcssではコメントアウトのルールが違う

コメントアウトはどのマークアップ言語・プログラミング言語にもありますが、それぞれ書き方のルールが異なります。そのため、htmlとcssもコメントアウトの書き方が全く違います。

htmlでのコメントアウトの書き方は以下の記事でしっかりと学習することができます。

htmlとcssどちらのコメントアウトもとても簡単なのでこちらの記事を読み終わった後に読んでもOKです。

関連記事

【HTMLのテクニック】コメントアウトを覚えてコードを見やすくしよう

コメントアウトの書き方

それではcssのコメントアウトの書き方をみていきましょう。書き方は2パターンありますがとっても簡単に覚えられます。

1行で書く場合

/*comment out*/

keyboard

1行でコメントアウトを書く場合

/*〜*/」の間にコメント内容を書きます。

キーの位置はキーボートの右半分にあり、入力状態を半角英数字にした時に

  • 「め」= /
  • 「け」= *

を打つことで入力できます。

複数行で書く場合

/*
複数行のコメント
複数行のコメント
*/
/*複数行のコメント
複数行のコメント*/

複数行をコメントアウトする方法はとってもシンプルです。

コメントアウトの最初を「/*」で囲い

最後を「*/」で閉じるだけです。

左の2種類の書き方はどちらもOKですが可読性のある1つめの書き方を選びましょう。

コメントアウトに使ってはダメな文字はある?

cssのコメントアウトでは内容に含んではいけない記号はありませんが「/*」と「*/」だけはコメントアウトの途中で書くとエラーが起きるので注意しましょう。また、英数字(全角半角両方)・日本語どちらも使用することができます。

「//」という形のコメントアウトは?

コメントアウトについて調べた方の中には「//」は使えないのか?という疑問を持っている方もいるかもしれませんがcssでは「//」はコメントアウトとして機能しません。この書き方でコメントアウトができるのはjavascriptphpといった別のプログラミング言語になります。

 コメントアウトの実践的な使い方

コメントアウトの書き方を覚えたら実際のプロのwebサイト制作の現場ではどのようにコメントアウトが活用されているか見てみましょう。

セクションごとに見出しをつける

基本的にwebページは1つのページの中でいくつかのセクション(内容)にわかれています。

 webページのセクション

上記のようなフォトスタジオのwebページを例にするとページ上から

  • メインビジュアル(ページを開いた時、最初に目にする部分)
  • photostudioとは(サービスの概要を説明する箇所)
  • 撮影プラン

というようなセクションでページ構成が分かれています。実際にcssを書いて行く時は、このようにセクションごとにcssをまとめて書いていきます。そして各セクションの書き出しの部分にコメントアウトで見出しをつけることでより見やすいcssを書くことができます。以下の例を見てみましょう。

/*---------------------------------

  メインビジュアル

---------------------------------*/
.first-view{
  background : url(bg-firstview.png);
}


/*---------------------------------

  photostudioとは?

---------------------------------*/
.about{
  background : url(bg-about.png);
}

/*  
  ボタン
---------------------------------*/
.btn-more{
  background-color : #e057c4;
  color : white;
}


/*---------------------------------

	撮影プラン

---------------------------------*/
.plan-each{
  float : left;
  width : 460px;
}

このようにセクションごとにコメントアウトで見出しをつけることで、そのcssがどのセクションに対してのコードなのかが一目でわかりますよね。

また「photostudioとは?」の見出しの中に「ボタン」というデザインの異なる見出しがありますがこれは小見出しです。

セクションごとに大見出しを書き、そのセクションの中でさらにグループ分けしたほうがわかりやすい場合には小見出しを書きます。

見出しの書き方

見出しの装飾は人によって様々ですが、おすすめは

/*———————————
大見出し
———————————*/

/*
小見出し
———————————*/

という書き方です。

セクションごとの目次をつける

cssは普通のwebサイト制作なら1000行以上になることは”ざら”です。そのためセクションごとに見出しをつけたことでわかりやすさは増しましたが長くなってしまえばその分見出しを探すのも一苦労ですよね。

/*---------------------------------
  
  0.header

  1.index.html
    1.1メインビジュアル
    1.2photostudioとは?
    1.3撮影プラン

  2.footer

---------------------------------*/

そんな時はcssファイルの上部にコメントアウトで目次を書いておきましょう。

そのcssファイルがどんなセクションで構成されているか一目で判断できるので、複数人で作業する時の効率が大幅にアップします。

セクションごとの見出しと目次はセットで書くことを意識しましょう。

具体的な処理内容を記述する

パッと見て「なぜそのスタイルが適用されているのか?」を判断しにくいコードというのはよくあります。

わからないまま消して、後でそれが原因でバグが起きるのもいやなので、本当は無駄なコードなのに消さないまま残しておく…

こういった場面は時間が経った後に自身でcssファイルを編集する特や複数人での作業をする時によく遭遇します。

.box{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; /*上下左右中央寄せ*/
}

左のコードのように「どんな目的で書いてあるのか」わかりにくいものは補足事項を書いてあげると他の人がスムーズに手を加えることができます。

ただ、わかりにくいコードというのは基本的に、書き手に原因があることがほとんどです。

cssがコメントアウトだらけになるのを避けるため、この形式での補足コメントは必要最低限にしてわかりやすく簡潔なcssをかけるようこころがけましょう。

一時的にcssの処理を無効化する

書いてあるcssの一部を無効化してブラウザ側で変化を確認するということもコメントアウトのテクニックの一つです。

.g-nav{
  float:right;
}

/*.g-nav li{
  float: left;
  font-size: 14px;
}*/

.g-nav a{
  font-weight: bold;
  display: block;
  padding:20px 0;
}

左のコードのようにcssの一部のをコメントアウトすることでその部分のスタイルの適用を無効化することができます。

そのコードがどんな役割をしているかの確認や、2つのデザインパターンのどちらにするか迷っている時などに有効なテクニックです。

学習のまとめ

コメントアウトは勤める会社や個人によって書き方のルールが統一されていたりするので、基本を踏まえた上でそのルールに従うようにしましょう。複数の人が共通の認識を持っているとそれだけ効率的に作業をすることができますからね!

さて、今回学習したことを定着させるためにまとめを流し読みしておきましょう。

  • cssとhtmlのコメントアウトは違う
  • /*」と「*/」で囲った部分がコメントアウトされる
  • 全ての記号を使ってOK。英数字と日本語もOK。
  • セクションごとの見出しとして使う
  • 見出しと目次はセットでコメントする
  • コメントアウトでわかりにくいコードの補足をする
  • 一時的にcssのコードを消してそのコードの役割を確認したりする

以上です。

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 【初心者向け】HTMLのimgタグを使って画像を表示する方法

  • リンクタグのCSSまとめ!リンクの色の変更やオシャレな装飾方法を紹介

  • 入れ子構造をイラストを使ってわかりやすく説明!

  • 【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • 【HTMLのテクニック】コメントアウトを覚えてコードを見やすくしよう

  • HTMLのリンク作成|リンクタグの使い方と【a href】の意味を優しく解説

  • HTMLとCSSの文法チェックツール7選!よくある文法エラーも紹介

  • パンくずリストを構造化データでリッチスニペット対応する方法

記事をもっと見る +

目次を開く