コメントアウトでホームページの運用・管理をしやすくする

コメントアウトタグを今回ご紹介します。地味ながらもとても役立つのでサイトを制作する方はぜひ覚えておいて損はないかと思われます。Webデザイナーを目指されている方は制作会社などではよく使われていることなので覚えておいて損はないかと思います。

ちょっと地味なことですが、習慣づけると良いことかと思います。

コメントアウトの記述方法

コメントアウトの方法はHTML、CSS、JavaScriptなどそれぞれ違うので注意してください。

<!-- この部分がコメントアウトされます -->

HTMLの場合 <!– から –> までの内容が非表示になります。

複数行でも対応可能で始まりと終わりをしっかり記述してください。

/* ここがコメントアウトされます */
 
/*
 複数行でも
 コメントアウトされます
*/

CSSの場合は /* から */ までが非表示になります。CSSの場合干渉しないと言ったほうが良いでしょうか。

JavaScriptのコメントアウトは2種類あります。

// 行末までコメントアウトします。
 
/*
複数行の
コメントアウトも
可能です。
*/

// の場合はその行末までが非表示になります。ひところメモに便利です。

もっと長く説明を残しておきたい場合は次の /* から */ までの記述をすることによって複数行をコメントアウトして残すことが出来ます。

ひとまず非公開にしておきたいときに使う

では実際にどのように使っていくか紹介していきます。

<body>

<!--
<div class="content">

<!-- span内の日付を修正してください -->
<h1>キャンペーン実施中</h1>
<p><span>20xx/xx/xx まで</span></p>
<p>お得なキャンペーン情報です。</p>

</div>
-->

</body>

上記の場合body内のcontentにキャンペーン情報が記述されています。

本来であればキャンペーン情報がブラウザ上で表示されるのですが、このコメントアウトの始点 <!– と終点 –> を使うことによって非表示にすることが出来ます。

この状態でブラウザで確認すると……何も表示されなくなります。

とりあえず人に見せたくない情報や更新しなければならないけど常に表示するものではないときに使うと役立ちます。

HTMLやCSSの修正のコメントを残す

もう一つコメントアウトを使用するメリットがあります。コメントを残すことがポイントとなります。

Web制作会社などでは一般的でもありますが、複数人でサイトを扱うときにこのコメントアウトされたコメントを読むことでタグの構造などを共有することが出来ます。

<body>

<!--content-->
<div class="content">

<!-- span内の日付を修正してください -->
<h1>キャンペーン実施中</h1>
<p><span>20xx/xx/xx まで</span></p>
<p>お得なキャンペーン情報です。</p>

</div><!--content-->

</body>

例えば上記のタグの場合は DIVタグ開始と終了に <!– content –> が書かれているかと思います。ここからここまでが content の領域ですとマークしています。

さらにその下にキャンペーン情報が記載されています。<!– span内の日付を修正してください –> とキャンペーン情報の近くに日付を書くところがあり、そこを修正して欲しいヒントが書かれています。

このようにコメントアウトタグで書かれている内容をもとに修正を加えたりすることによって作業の効率化にもなりますし、複数人で作業していてもミスが少なくなります。

HTMLタグに書かれる場合は修正内容などを残しておいてもよいかと思います。また、どこからどこまでがタグで括られているかをしるすマークにもなります。

CSSのファイルでコメントアウトを使う場合は様々な記述方法があります。ただどれが正解というわけでもないので参考としてみて頂けたら幸いです。

/* hogehoge */

.hogehoge {
  width: 100%;
}
.hogehoge h1 {
  font-size: 120%;
}

/* hagehage */
.hagehage {
  width: 100%;
}
.hagehage h1 {
  font-size: 120%;
}

/*
 20xx年xx月xx日 修正
 フォントサイズを大きくしました
*/
.hagehage h1 {
  font-size: 140%;
}

上記の場合、hogehoge、hagehageと言うクラス上部にコメントアウトでクラス名を記述しています。

この場合ここからここまでがhogehoge、ここからここまでがhagehageとクラスの整理をすることが出来ます。目印として役に立つ記述です。

次に「20xx年xx月xx日 修正 …」とありますがこれはhagehageのクラスをいつ大きくしたか修正内容が記載されています。CSSは上から順に読んでいき上書きされていくので本来であれば hagehage h1 のフォントサイズは120%ですが、140%に上書きをされます。

修正日などを記述するといつ変更になったかを知ることができ、運用の助けになります。

コメントアウトを使って運用、管理する方法は様々あります。サイトを作っている人が理解しやすいようにコメントを残すように心がけたらサイトはもっと良くなるかと思います。

ぜひ個人でも作っているサイトの場合でも友好的に活用していただけたらと思います。

お気に入りに登録
クリップボードにコピー

※「お気に入りに登録」ボタンは、お気に入り一覧ページで登録した記事を確認することができます。
※「クリップボードにコピー」は記事の題名とURLがコピーされます。

Time Sale

アマゾンや楽天市場などのタイムセール情報を紹介しています。

タイムセール情報

Googleのおすすめ

Joliee

Joliee 東京都内で福祉関係のWEB制作を担当しています。WEB制作についてはCSSで何とかしたいがモットーです。柴犬男子と暮らしています。少しでも体格よくするために始めた筋トレなど学んできたことを少しでもアウトプットできるようにブログに残しています。

樂(ガク)

樂(ガク) 2021年11月26日生まれの(2歳)、2022年2月4日に家族となりました。 豆柴犬の樂(ガク)です。かまってちゃんな性格な柴犬男子です。好きなものは歯磨きガムです。ドッグフードは生きていくために渋々食べています…