web codery

最初に覚えておきたいHTML/CSSコメントの使い方

category: HTML/CSS

コメントとは、コードの一部を作業者のメモ扱いにして、ブラウザに解釈/表示させないようにするための書き方です。今回は、コメントの書き方と、始めたばかりの人でも、これだけは覚えておきたいコメントの使い方をご紹介します。

特定の項目を読みたい場合は、目次のリンクから飛ぶことができます。

目次

  1. コメントの書き方【HTML/CSS】
  2. コメントアウト【HTML/CSS】
  3. 終了タグに印をつける【HTML】
  4. どんなファイルなのかの説明【CSS】
  5. 分類ごとの区切り線【CSS】
  6. 先頭に目次をつける【CSS】

コメントの書き方

HTMLとCSSのコメントの書き方を簡単におさらいしておきます。これは、コードを見ればわかると思うので、さらっと確認していただければと思います。途中で改行して、複数行のコメントにすることもできます。

HTMLのコメント

<!-- ここにコメントを書く -->

<!--
複数行のコメント
を書く場合
-->

 

CSSのコメント

/* ここにコメントを書く */

/*
複数行のコメント
を書く場合
*/

コメントアウト

使わなくなったコードをコメント化して一時無効にして、消さないで取っておくことをコメントアウトといいます。下では、CSSのコード例を書いておきます。

.logo {
  width: 32%;
  max-width: 150px;
}
/*
* 2020/03/08ロゴ差し替え前のスタイル
.logo {
  width: 30%;
  max-width: 140px;
}
*/

コメントアウトは、HTML/CSSに限らず、プログラミングでもよく使われているやり方です。専用のエディターには、マウスなどでコメントアウトしたい部分を選択しておいて、キーボードのALT+〇〇といったショートカットキーを押すとコメントアウトできる機能がだいたいあるので、積極的に使っていくと作業効率が上がります。私の場合は、普通のコメントを書く場合も、まずコメント内容を書いてしまってから、それを選択してショートカットキーからコメント化しています。

終了タグに印をつける【HTML】

HTMLの入れ子が多くなって、特に複数のdiv要素が入れ子になっているような場合、どれがどのタグの終了タグかといった、開始タグと終了タグの対応が分からなくなることがあるので、終了タグのあとにその要素のクラス名などをコメントで書いておくことがよくあります。

<div class="content">
  <div class="wrapper">
    さらにたくさんの要素が入れ子になっている...
  </div>
  <!-- /.wrapper -->
</div>
<!-- /.content -->

正しい書き方というものはないのですが、私のこの書き方は、「/」が終了という意味で「.クラス名」の部分はCSSの書き方になっています。

どんなファイルなのかの説明【CSS】

サイトの規模が少し大きくなってくると、CSSをジャンルごとなどで複数のファイルに分けて記述する場合が多くなってきますが、ファイルの先頭にそのファイルについての説明があると、後から見たときでも分かりやすくなります。

/*
 * guidesカテゴリー下のページ用スタイルを記述したファイル
*/

WordPressのテーマ用CSSなど、ある程度決まった形式の書き方がある場合もあります。CSSに限らず、決まった形式がある場合は、それにそって書いておくと他の人が見てもぱっと理解できたり、Webなどにある専用のコンバーターを通すと定型のwikiなどが出てくる場合があるので、そういった標準的な書き方をしておくことをお勧めします。

/*
Theme Name: web codery
Description: サイト「web codery」用のテーマ
Author: koji
Author URI: http://web-codery.com
Version: 1.0
*/

分類ごとの区切り線【CSS】

CSSは普通、スタイルの分類ごとに分けて書いていきますが、その分類の境界がわかるように区切り線を書いておくと見やすくなります。

/* reset styles
-----------------------------------------------------*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}
.....

/* common styles
-----------------------------------------------------*/
body {
  width: 100%;
  line-height: 1.7;
}

先頭に目次をつける【CSS】

ファイルの先頭に目次を付けておくと、そのファイルにどんなスタイルが書いてあるかすぐにわかるようになったり、エディターの文字列検索でそのカテゴリーまで飛ぶのに便利だったりします。

/**
 * サイト全体の基本スタイルを記述したファイル
 * 
 * 1 reset styles
 * 2 common styles
 * 3 icon styles
*/

/* 1 reset styles
-----------------------------------------------------*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}

以上、これだけは覚えておきたい、HTML/CSSコメントの書き方と使い方でした。

サイトは作った後に運営していく期間の方が長いので、自分で書いたコードでも後から見たときによく覚えていないことが多くなってきます。複数人で作業する場合には、適切なコメントを書くことが更に重要になりますので、特にプロを目指す方は、必要なコメントをわかりやすくきれいに入れられるように、コメントスキルも磨いていくことをお勧めします。

管理人にメッセージを送る





ページトップ