コメントアウトでホームページの運用・管理をしやすくする
- この記事は約5分で読めるワン。
- 楽天市場
-
購入ショップ数に応じ、ポイント倍率が2倍、3倍と最大8倍まで増加！2024年4月14日(日)20:00 ~ 2024年4月17日(水)09:59
- アマゾン
-
レジャー・アウトドアやファッション、飲料、家電等の人気商品をお買い得価格でご提供します。2024年4月19日(金) 9:00 ～ 2024年4月22日(月) 23:59
コメントアウトタグを今回ご紹介します。地味ながらもとても役立つのでサイトを制作する方はぜひ覚えておいて損はないかと思われます。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％に上書きをされます。
修正日などを記述するといつ変更になったかを知ることができ、運用の助けになります。
コメントアウトを使って運用、管理する方法は様々あります。サイトを作っている人が理解しやすいようにコメントを残すように心がけたらサイトはもっと良くなるかと思います。
ぜひ個人でも作っているサイトの場合でも友好的に活用していただけたらと思います。
後で読み直す
Administrator
