チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

ブログの内のCSSやHTMLにはコメント書いておいた方が良いと思った

 スポンサード リンク

 今日はブログ内のデザイン変更のついでにソースの整理をおこないました。

 このブログを始めたばかりの頃はHTMLやCSSに関しての知識が殆ど無かったので、ブログをカスタマイズするときは他の方たちが書いたカスタマイズ記事に書いてあったコードを理解しないままコピペしまくってたんです。

 で、今になって見直してみるとデザインCSSとheadの中で重複しているコードが結構出てきたり…


 不要なコードもたくさん見つかりました(汗。

 何もわからないまま良くやったもんだなぁと。。


 特に不具合は起きていないのでこのままにしていても問題ないんですが、どうにも気になってしまった為、重複したものと不要なコードを消していく作業をしたんです。

これ何のコード??

 コードにコメントが書いてあるものは見ただけで瞬時に「あぁ、あそこのCSSだな」ってわかるから良いとして、問題はコメントが書かれていないもの。

 要素名であらかた想像はつくんですが何ともややこしいので、今回からしっかりコメントを付けていくことにしました。

CSSやHTML内でのコメント記述方法

サンプルCSS


<style>
/* ↓サンプルコードここから */

.sampleblue {
background-color:#DCDCDC;
color:#0000FF;
}

/* ↑サンプルコードここまで */

/*
 背景色:グレー
 文字色:青
*/

 CSS(<style>~</style>の中)でのコメント記述方法は「/* ここにコメント */」こんな感じです。

 /*
 背景色:グレー
 文字色:青
*/

 ↑このように複数行になってもOK。

サンプルHTML


<!-- サンプルここから -->
<div class="sampleblue">

 実際のブログを見るとコメント部分は消えている

</div>
<!-- サンプルここまで -->

<!--
 背景色:グレー
 文字色:青 -->

 HTMLでのコメントの記述方法は「<!-- ここにコメント -->」こんな感じ。

 <!--
 背景色:グレー
 文字色:青 -->

 ↑CSS内のコメントと同様に複数行になってもOK。


ブログで実際に見たとき

 上記のコードを記述した後、実際にブログで確認してみると、


 実際のブログを見るとコメント部分は消えている

 このようにコメントは消えています。

まとめ

 一つ一つにコメントが書いてあるとブログのデザインを変えたいときや整理するときに便利です。

 HTMLに関しては書いた位置に表示されることがほとんどなので、すぐにわかるのであればコメント振る必要はないかなと。

 ただ、scriptに関しては「これ何だっけ??」っていうのが多かったので一つずつコメント書くことにしました。


 最初からやっとけばもっと楽だったんだろうなぁ。。

 何だかんだで結構な時間がかかってしまった(汗。

PAGE TOP