「 HTMLとCSSにコメントを入れる方法」について書いています。（ブログ作成の体験レポートです）

ヘルプ

ブログが作りたい！＞＞スポンサーサイト＞【26】 CSS入門＞ HTMLとCSSにコメントを入れる方法

HTMLとCSSにコメントを入れる方法

今回は、HTMLとCSSにコメントを入れときの記述方法について書いています。お話は、次の順番で進みます。

コメントを入れる理由
HTMLのコメントの書き方
CSSのコメントの書き方
あとがき
次回予告
関連記事
この記事へのコメント

▲ページの先頭に戻る

コメントを入れる理由

HTML（またはCSS）コードには、次のような理由でコメントを入れておきます。

コードが長く（多く）なってくると、どのような役割で書いたコードか読解に時間がかかる。
日が経つと、人間は忘れる。
自分以外の人でも、コードが理解し易くなる。

などなど。

▲ページの先頭に戻る

HTMLのコメントの書き方

1：コメントの書き方

コメントを、「」で囲みます。（コメントは、HTMLをブラウザ表示したときに表示されません）

▲ページの先頭に戻る

2：実際にコメントを入れる

復習もかねて、コメントを入れてみてください。うまくコメント（説明）できない場合は、理解が不足しているかもしれません。

すべてのタグにコメントを付けるのではなく、分かり難い箇所や、グループ、更新時の注意事項などを書くようにすると良いように思います。

▲ページの先頭に戻る

3：入力例

（1）入力例1

短いHTMLコードであれば、次のように書く程度でも十分です。

（2）入力例2

ただ、HTMLコードが長くなってくると、特に<div>タグは、どことどこがペアなのか分からなくなってきます。

次の例のように、「▼」と「▲」を使って、視覚的にどこからどこまでが<div>タグのペアなのか示しておくと分かりやすいかもしれません。

<html>
 <head>
  <title>私のブログ「ブログが作りたい！」</title>
  <link rel="stylesheet" type="text/css" href="matome.css" media="all">
 </head>
 <body>
  <h1>『私のブログをご紹介します』</h1>

<div id="blog-info">
   <h2>1：ブログの情報</h2>

<div class="text-center">
    <table border="1">
     <tr><th><p>サイト名</p></th><td><p>「<a href="http://kumacrow.blog111.fc2.com/">ブログが作りたい！</a>」</p></td></tr>
     <tr><th><p>URL</p></th><td><p>http://kumacrow.blog111.fc2.com/</p></td></tr>
     <tr><th><p>キャプ画</p></th><td><img src="matome.gif" alt="ブログが作りたい！キャプ画"></td></tr>
    </table>
    </div>

</div>

<div id="blog-pre">
   <h2>2：紹介文</h2>
    <p>ブログ作成の体験記です。「表示テストを疎かにしてはいけないなぁ」と思いながら、さぼっています。</p>
    <p>私には、次のような特徴があります。いまは、柴咲コウさんに夢中です。</p>
    <ul>
     <li>もっさりしている。</li>
     <li>廊下に立たされている。</li>
     <li>肩たたき券</li>
    </ul>
  </div>

<br class="float-clear">

</body>
</html>

▲ページの先頭に戻る

4：FC2ブログサービスをご利用の方へ

さて、問題です。FC2ブログで使用しているテンプレートを見ていたら、次のようなコードを見つけました。これは、何でしょう？

～

まるで、コメントのようで紛らわしいのですが、これはコメントではありません。FC2ブログツールで設定している変数（変数タグ）と呼ばれるものです。

「邪魔なコメントだな」と考えて削除してしまうと、ブログが表示されなくなる可能性もあります。ご注意ください。

また逆に、「変数だと思っていたら、ただのコメントだった」という場合もあります。分かりやすい見分け方がないので、判断がつくようになるまでは、不用意に削除しないことが肝要かと思います。

変数（変数タグ）については、今後のカスタマイズの記事で書く予定です。

▲ページの先頭に戻る

CSSのコメントの書き方

1：コメントの書き方

コメントを、「/*」と「*/」で囲みます。

/* （コメント内容） */

▲ページの先頭に戻る

2：実際にコメントを入れる

復習もかねて、コメントを入れてみてください。うまくコメント（説明）できない場合は、理解が不足しているかもしれません。

h1, h2 { margin: 0; padding: 0; }
body {
 background-color: #ffff00;
 font-size: 100.01%;
 font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Pゴシック","MS PGothic",Osaka,sans-self,Verdana,Arial,Helvetica;
}
h1 {
 background-color: #191970;
 color: #ffffff;
 font-size: 120%;
 padding: 5px;
 text-align: center;
}
h2 {
 background-color: #ffffff;
 font-size: 100%;
 border-top: 2px solid #191970;
 border-right: 2px solid #191970;
 border-bottom: 2px solid #191970;
 border-left: 8px solid #191970;
 padding: 2px 5px;
}
a {
 text-decoration: none;
}
a:link {
 color: #000000;
}
a:visited {
 color: #ff0000;
}
a:hover {
 text-decoration: underline;
}
img { margin: 4px 15px 6px; }
table {
 margin: 5px;
 background-color: #000000;
}
table th {
 background-color: #191970;
 color: #ffffff;
 padding: 2px 10px;
}
table td {
 background-color: #ffffff;
 padding: 2px 10px;
}
ul li {
 font-size: 90%;
 list-style-image: url(free_triangle_005_indigo.gif);
}
p {
 font-size: 90%;
}
#blog-info {
 background-color: #008400;
 border: 1px solid #333333;
 padding: 5px;
 margin: 5px;
 width: 47%;
 float: left;
 background-image: url(free_flower_001.gif);
 background-repeat: no-repeat;
 background-position: left center;
}
#blog-info table {
 margin-left: auto;
 margin-right: auto;
}
#blog-pre {
 background-color: #ffffff;
 border: 1px solid #333333;
 padding: 5px;
 margin: 5px;
 width: 47%;
 float: right;
}
#blog-pre p {
 text-indent: 1em;
 margin-right: 10px;
 margin-left: 10px;
 line-height: 140%;
 letter-spacing: 0.1em;
 text-align: justify;
 text-justify: inter-ideograph;
}
.float-clear {
 clear: both;
}
.text-center {
 text-align: center;
}
*html #blog-info,
*html #blog-pre {
 width: 47.5%;
}

すべてにコメントを付けるのではなく、分かり難い箇所や、更新時の注意事項、CSSハックの内容などを書くようにすると良いように思います。

▲ページの先頭に戻る

4：入力例

分かり難そうな箇所を中心に書いてみました。

/* 初期化
------------------------------------------------------------ */
h1, h2 { margin: 0; padding: 0; }				/* 間隔（余白）の初期化 */

/* 全体的な設定
------------------------------------------------------------ */
body {
 background-color: #ffff00;
 font-size: 100.01%;						/* 古いOpera用に100%ではなく100.01%にしている */
 font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Pゴシック","MS PGothic",Osaka,sans-self,Verdana,Arial,Helvetica;
}

/* 大見出し
------------------------------------------------------------ */
h1 {
 background-color: #191970;					/* 背景色（midnightblue） */
 color: #ffffff;						/* 文字色（white） */
 font-size: 120%;
 padding: 5px;
 text-align: center;
}

/* コンテンツ内見出し
------------------------------------------------------------ */
h2 {
 background-color: #ffffff;					/* 背景色（white） */
 font-size: 100%;
 border-top: 2px solid #191970;					/* 罫線色（midnightblue） */
 border-right: 2px solid #191970;
 border-bottom: 2px solid #191970;
 border-left: 8px solid #191970;				/* 罫線（左だけ8px） */
 padding: 2px 5px;						/* 内側余白（上下：2px、左右：5px） */
}

/* リンク
------------------------------------------------------------ */
a {
 text-decoration: none;						/* リンクの下線を消す */
}
a:link {
 color: #000000;						/* リンク未訪問：文字色（black） */
}
a:visited {
 color: #ff0000;						/* リンク既訪問：文字色（red） */
}
a:hover {
 text-decoration: underline;					/* リンクマウスオーバ時に下線表示 */
}

/* 画像
------------------------------------------------------------ */
img { margin: 4px 15px 6px; }					/* 画像：外側余白（上：4px、左右：15px、下：6px） */

/* 表（table）
------------------------------------------------------------ */
table {
 margin: 5px;
 background-color: #000000;					/* 背景色（black） */
}
table th {
 background-color: #191970;					/* 背景色（midnightblue） */
 color: #ffffff;						/* 文字色（white） */
 padding: 2px 10px;
}
table td {
 background-color: #ffffff;					/* 背景色（white） */
 padding: 2px 10px;
}

/* 箇条書き（リスト）
------------------------------------------------------------ */
ul li {
 font-size: 90%;
 list-style-image: url(free_triangle_005_indigo.gif);		/* リストマーカ画像 */
}

/* 段落
------------------------------------------------------------ */
p {
 font-size: 90%;
}

/* 1：ブログの情報
------------------------------------------------------------ */
#blog-info {
 background-color: #008400;					/* 背景色（緑系） */
 border: 1px solid #333333;
 padding: 5px;
 margin: 5px;
 width: 47%;
 float: left;							/* 左回り込み */
 background-image: url(free_flower_001.gif);			/* 背景画像 */
 background-repeat: no-repeat;					/* 背景画像：繰り返さない */
 background-position: left center;				/* 背景画像：左中央に配置 */
}
#blog-info table {						/* tableの中央寄せ */
 margin-left: auto;
 margin-right: auto;
}

/* 2：紹介文
------------------------------------------------------------ */
#blog-pre {
 background-color: #ffffff;					/* 背景色（white） */
 border: 1px solid #333333;
 padding: 5px;
 margin: 5px;
 width: 47%;
 float: right;							/* 右回り込み */
}
#blog-pre p {
 text-indent: 1em;						/* インデント（字下げ） */
 margin-right: 10px;
 margin-left: 10px;
 line-height: 140%;						/* 行間 */
 letter-spacing: 0.1em;						/* 文字間 */
 text-align: justify;						/* 文章の均等割付 */
 text-justify: inter-ideograph;					/* 文章の均等割付：日本語対策 */
}

/* 回り込みの解除
------------------------------------------------------------ */
.float-clear {
 clear: both;
}

/* 中央寄せ（センタリング）
------------------------------------------------------------ */
.text-center {
 text-align: center;
}

/* IE6バグ対応
------------------------------------------------------------ */
*html #blog-info,
*html #blog-pre {
 width: 47.5%;
}

▲ページの先頭に戻る

あとがき

お疲れ様でした。HTML、CSSはいかがでしたでしょうか。

「意外に簡単だった」という人もいれば、「やっぱりダメかも・・・」という人もいらっしゃるかと思います。

しかし、結局のところ「慣れ」です。もし、「HTMLやCSSって、おもしろいかも」と思ったなら、続けてみてください。

その日は、まるで理解できなかったことも、次の日には、すんなり理解できる場合もあります。現時点での理解度は、あまり重要ではありません。重要なのは、モチベーションです。

▲ページの先頭に戻る

次回予告

次回より、ブログのカスタマイズについて書いていきます。実際のテンプレートをいじって行くので、実は、これからがおもしろいわけです。

まずは、「カスタマイズの基礎テクニック」について書く予定です。

▲ページの先頭に戻る

CSSに関連する記事を、ご紹介します。

1：カスタマイズ前

2：CSSの基本的なこと

3：色の指定

4：罫線の指定

罫線を描く【border】

5：間隔（余白）の指定

6：継承と子孫セレクタ

継承と子孫セレクタとは？

7：箇条書き（リスト）

8：文字（フォント）の指定

9：idセレクタ、classセレクタ

idセレクタ、classセレクタとは？

10：文章を読みやすくする

11：文字の中央揃え（センタリング）

文字の左右・中央揃え【text-align】

12：レイアウト

13：tableの中央揃え（センタリング）

表（table）の中央揃え

14：CSSで飾る

15：まとめ

▲ページの先頭に戻る

作成日：2008/05/19 更新日：2008/05/19

« 「CSS入門まとめ」｜

▲ページの先頭に戻る

コメントありがとうございます。

現在、コメントさんも、お休みしています。

こんちは

こんにちは！
コメントの書き方って大事ですよね・・・とこの記事を読んで思いました。
自分のコメントは、コメントの意味を成していない気がするｗ
これからは見やすくて時間がたってもわかるコメントにしたい！

特に「おお」と思ったのが、▲▲▲と▼▼▼で視覚的にわかる書き方、
自分はstartとendで書いたりするんですが、どうもソース長くなると
コメント自体発見できなくて泣いたりするので・・・
まねっこさせて頂きます！ｲｴｰ！

写真素材、なんか今うまく表示されない障害が発生してるらしく、
お花と楓見れませんでしたorz
kumaさんの画像の鯖は２１なので、今障害真っ只中なはず。
あとでまた見に来て見ますね！

ところで、ブログカスタマイズの講座もされるのですか！
読んだ時、鼻穴広がった・・・
えっらい楽しみー！！！！！
ﾜｸﾃｶしてまってます！

| 2008-05-20 |
ひろこ #-
URL
[ 編集 ]

▲ページの先頭に戻る

松嶋や、あぁ松嶋や、ポイズンやん

ひろこさん、おかえりなさい！(・∀・)/

松島はいかがでしたか？日本三景のひとつですから、
なかなか美しい風景だと思うのですが、天気にもよるかしら。

コメント大事ですよね。
何しろ、divの開始と終了が離れていて、コメントが無くて、
divが入り子になっていると、もう泣きそうになります。

つい面倒で書いていないことが多いですけれども、
書いておくと本当に助かります。

「ありがとう、自分」・・・みたいな。(oﾟωﾟo)

▲▲▲と▼▼▼は、私もまねっこです。
誰かのテンプレートで見かけたので、「こりゃ良いかも」と。

そうなんです。
画像サーバがまた不安定なのです。
FC2さんにメールしておきました。対応中になりました。↓

http://fc2support.blog85.fc2.com/blog-entry-202.html

みなさんに、ご不便をおかけして申し訳ないです。(´・ｪ・)

そうです。
CSS入門が終わって、カスタマイズに入ります。

やはり、実際のテンプレートを例にしてお話した方が、
分かりやすいと思うので、4～5本くらいは書く予定でいます。

その後は、新しいブログに比重をシフトして、
もろもろスキルアップを図りたいと思っています。

ブログ入門	ブログが作りたい！	アクセス解析	HTML入門	検索用語を入力検索フォームを送信 Web サイト内	無料 Web素材
FC2ブログ		SEO対策	CSS入門		無料写真素材
Gimp		Google Analytics	デジタルカメラ		4コマ漫画

「 HTMLとCSSにコメントを入れる方法」について書いています。 （ブログ作成の体験レポートです）

スポンサーサイト

HTMLとCSSにコメントを入れる方法

HTMLとCSSにコメントを入れる方法

コメントを入れる理由

HTMLのコメントの書き方

1：コメントの書き方

2：実際にコメントを入れる

3：入力例

（1）入力例1

（2）入力例2

4：FC2ブログサービスをご利用の方へ

CSSのコメントの書き方

1：コメントの書き方

2：実際にコメントを入れる

4：入力例

あとがき

次回予告

関連記事

コメントありがとうございます。

こんちは

松嶋や、あぁ松嶋や、ポイズンやん

トラックバック

ブログ休載中

Google AdSense 広告

SEO対策

RSSフィード

Google Analytics

おすすめの本

By FC2ブログ

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

ブログ作成情報

最近のコメント

GIMP

デジカメ

ブログのディレクトリ登録

ブログランキング

FC2カウンター

月別アーカイブ

最近のトラックバック

ソーシャルブックマーク

カテゴリマップ

「 HTMLとCSSにコメントを入れる方法」について書いています。（ブログ作成の体験レポートです）