Loading...
CSSにコメントを書こう

CSSにコメントを書こう

公開
2018.08.24
更新
2018.10.29
  • 講座

  • CSS

本講座ではCSSコメントの書き方を見ていきましょう。

CSSコメントの書き方

CSSコメントは、コメント部分を/* */で囲むことで認識されます。
いくつか例を見てみましょう。

  • 1行コメント
/* これは1行コメントです */
body {
  background-color: white;
}
  • 複数行コメント
/*
  これは
  複数行の
  コメントです
 */
body {
  background-color: white;
}
  • 行末コメント
body {
  background-color: white; /* 行末に書くこともできます */
}

CSSコメントはどこにでも書くことが出来ますが、行中に書く場合には読みやすさの観点から行末に書くのが良いでしょう。

慣習

上で見た3つのCSSコメントの書き方ですが、どれも慣習に沿って書いています。
これはコメントが読みやすくなるのでおすすめです。

  • 1行コメント

「*(アスタリスク)」の前後には半角スペースを入れると読みやすくなります。

NG

/*これは1行コメントです*/

OK

/* これは1行コメントです */
  • 複数行コメント

他のCSSコードと同様にインデントすると読みやすくなります。

NG

/*
これは
複数行の
コメントです
 */

OK

/*
  これは
  複数行の
  コメントです
 */

また細かいですが、「*(アスタリスク)」の位置を縦軸で合わせておくと整って見えます。

/*
 */
  • 行末コメント

CSSコメントの前に半角スペースを入れておくと読みやすくなります。

NG

  background-color: white;/* 行末に書くこともできます */

OK

  background-color: white; /* 行末に書くこともできます */

CSSコメントを書いてみよう

私たちのindex.htmlにCSSコメントを書いてみましょう。

現在のstyle要素は以下のようになっています。

<style>
h1 {
  color: red;
  font-size: 20px;
}
.outsideLink {
  color: orange;
}
form {
  background-color: #f3f3f3;
}
</style>

h1.outsideLinkはテキスト、formはフォームの装飾、と分けることができそうなので、CSSコメントで境界を作ってみましょう。

/* テキストの装飾 */
h1 {
  color: red;
  font-size: 20px;
}
.outsideLink {
  color: orange;
}

/* フォームの装飾 */
form {
  background-color: #f3f3f3;
}

このように、ソースコードをCSSコメントを使ってカテゴリー分けしたりすると、コードが長くなっても見つけやすくなったり、書く場所にも困らなくなります。

"大・中・小でさらに細かくカテゴリー分けしたい!"という時には少しリッチにコメントで表現してみても良いでしょう。

/* ==============================
       大カテゴリー
   ============================== /*

/* ---------------------
       中カテゴリー
   --------------------- */

/* --- 小カテゴリー --- */

HTMLなのにCSSコメント?

今回私たちがCSSコメントを書いたのはindex.htmlの中でした。

"HTMLであればHTMLコメントでもいいんじゃないか?"と思われたかもしれません。
しかし実際にstyle要素内にHTMLコメントを書いてみると、CSSが正常に反映されなくなってしまいます。
これはstyle要素内がCSSの記述のみ受け付けるようになっているためです。

少し前まで、styleタグにはtypeという属性を指定する必要がありました。 ※
<style type="text/css">と書くことで、"この中にはCSSを記述するよ"と宣言していることになります。

このため、style要素内でコメントを書く場合はCSS用のコメントである必要があるのです。


※ HTML5という記述方法を用いることで、styleタグにtype="text/css"を指定する場合には「省略しても良い」ということになりました

まとめ

本講座では

  • CSSコメントの書き方
  • 慣習

について学びました。

ソースコードが「読みやすく」なるか、「見つけやすく」なるか、「迷いづらく」なるか、などの観点から考え、効果が見込めるときには積極的に使っていきましょう!

最終コード

  • index.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのHTML</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  /* テキストの装飾 */
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }

  /* フォームの装飾 */
  form {
    background-color: #f3f3f3;
  }
  </style>
</head>
<body>
  <!--
    これはGieerの講座で作成したHTMLです。
    実サービスには使えません。
  -->
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
  <h2>ご意見フォーム</h2>
  <!-- ダミーフォーム -->
  <form action="./index.html" method="post" class="opinionForm">
    <div>
      お名前:<input type="text" name="name" required>
    </div>
    <div>
      ご意見:
      <textarea name="opinion" required></textarea>
    </div>
    <div>
      回答:
      <input type="radio" name="lottery" value="need">希望する
      <input type="radio" name="lottery" value="notNeed" checked>希望しない
    </div>
    <div>
      メールアドレス(回答を希望する方のみ):<input type="text" name="email">
    </div>
    <div>
      <button type="submit">送信する</button>
    </div>
  </form>
</body>
</html>
  • link.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのリンク</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html lang="ja">
<head>
  <title>HTML入門課題</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!