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

ブログが作りたい!CSS入門 > HTMLとCSSにコメントを入れる方法

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

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

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

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

▲ページの先頭に戻る

コメントを入れる理由

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

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

などなど。

▲ページの先頭に戻る

HTMLのコメントの書き方

1:コメントの書き方

コメントを、「<!--」と「-->」で囲みます。

<!-- (コメント内容) -->

コメントは、閲覧者がブラウザで一般的な見方をしたときには表示されません。HTMLコードを見ようとしないかぎりは見えません。

▲ページの先頭に戻る

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

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

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

▲ページの先頭に戻る

3:入力例

(1)入力例1

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

(2)入力例2

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

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

▲ページの先頭に戻る

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

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

<!--topentry--> ~ <!--/topentry-->

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

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

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

▲ページの先頭に戻る

CSSのコメントの書き方

1:コメントの書き方

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

/* (コメント内容) */

▲ページの先頭に戻る

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

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

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

▲ページの先頭に戻る

4:入力例

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

▲ページの先頭に戻る

あとがき

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

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

しかし、結局のところ「慣れ」です。

もし、「HTMLやCSSって、おもしろいかも」と思ったなら、続けてみてください。続けて行けば、今まで積み重ねてきたことが無駄になりません。

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

▲ページの先頭に戻る

前の記事へ
前の記事へ

次回予告

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

今まで学んできた、HTML、CSSがようやく実を結ぶときです。

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

▲ページの先頭に戻る

関連記事

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

▲ページの先頭に戻る

作成日:2008/05/19 更新日:2009/02/26

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

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

こんちは

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


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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSについて、かなり理解が深まりましたぁ!ありがとうございます。

KumaCrowさん、コンニチハ~
CSS入門、二日かけて読ませて頂きました。
まずは、ざっと、何が出来るのかを知る事が出来ましたので、
これから構想を練ってから、挑戦してみたいと思います。
そのときには、またお邪魔して、コピペさせて頂きま~す。

それにしても、超わかりやすく、丁寧な説明で、”わき目”もふらず読みふけりました。

HTMLのコメント、私もアルファ・エディットでHP作りながら細かく、入れてましたが、・・・・

KumaCrowさんなら、わかりますよねぇ・・・・・

HTML入力支援ソフトだと、タグ入力するたびに、
タグの並びが変わるので、
グシャグシャになって、訳がわからなくなってしまいましたぁ~、
ほとんど余計なゴミと化してます・・

まぁ、最初と最後・・範囲はなんとかわかるので良いのですが、
たまに何かを削除した時に、一緒に削除されてしまってたり、
”とんでもない”ところに”飛んでってたり”してますぅ。

少しずつ掃除・整理してますが・・・

WYSIWYGで編集すると・・・またグシャグシャに・・・

フーツ・・・

最近は簡単な修正などはメモ帳でやってますが、
たくさん修正があるときなどは
WYSIWYGが圧倒的に簡単なので・・・・

まぁ、こんな時にCSS使ってると、
便利なんだろうなぁと思います。

ただ、何となくですが、

CSSって、全てのページを統一して一元管理するには超便利だと思いますが、
各ページ・コンテンツ毎にレイアウトを変えたい時などには、
カナリ複雑な作業が必要になりそうで、
このような場合は、作業は大変かもしれませんが、
1枚、1枚、HTMLでシンプルに作り上げた方が良い(簡単?速く出来る?)ような気もします。
(自由度も大きいような気もします。)

現状アルファ・エディット(HTMLだけ)で、
作ってしまったHPはcss適用が、
かなり難しそうな気がしますので・・・

新しい物を、ゼロから作ってみたいと思います。

また、色々質問させて頂く事になると思いますが、
宜しくお願い致します。

CSSを各ページで違う指定にする

extreme1webfc2comさん、おはようございます!(・∀・)/
コメントありがとうございます。


【1】HP作成支援ソフト

あー、そうですねー。(´Д`;)

支援ソフトは、
余計なことをしてグシャグシャにしてくれたりします。

最近のものは使ったことがないので分からないですけれど、
昔のは、本当にひどかったなー。

Webサイトを作った経験のない人が、
ソフトを開発しているんだろうなーという感じがしました。

機微がないのだもの。


Dreamweaverは、高額だしなぁ。(´・(ェ)・`)

もしFirefoxを、お使いなら、
アドオンのFirebugを入れて使ってみると良いかも。

WYSIWYGとはいきませんけれど、
テキストエディタだけで作るよりは、楽かもしれません。


【2】CSS方法1

> 各ページ・コンテンツ毎にレイアウトを変えたい時などには、
> カナリ複雑な作業が必要になりそう
>

いえ、大丈夫ッス。
それほど、複雑にはなりません。(*'‐'*)

例えば、それぞれ違うページにしたいbodyタグなんかに、
id名をそれぞれ付けてあげれば、OK牧場です。

例えば、ページAには、id="page-a"、
ページBには、id="page-b"とします。

そうすると、CSS側で、例えば、pタグの指定をするときに、

#page-a p {・・・}

#page-b p {・・・}

こう書けば、それぞれ別の指定ができます。


【3】CSS方法2

あるいは、外部CSSを呼び出すときに、
違うCSSファイルを呼び出すようにしておけば、

それぞれのページで、違う指定が可能です。

例えば、すべてのページに共通するCSSの指定は、

common.cssとかで、作ります。

それぞれ違う指定については、
page1.css、page2.cssなどで作ります。


あとは、page1のHTMLでは次のように指定し、

<link rel="stylesheet" type="text/css" href="common.css" media="all">
<link rel="stylesheet" type="text/css" href="page1.css" media="all">

page2のHTMLでは次のように指定します。

<link rel="stylesheet" type="text/css" href="common.css" media="all">
<link rel="stylesheet" type="text/css" href="page2.css" media="all">

そうか!複数CSSでもイインデスね。

KumaCrowさん、コンニチハ~
早速お返事頂き、感謝です。流石ですね。

なるほどぉ!

別々に指定したり、
一つのページに二つのCSSでも良いのですね。
要は、共通部分と個別のCSS二つ作れば、
それぞれ読み込んでくれるわけですね。

う~ん、初心者には、
ちとフクザツになるかもしれませんが、
もう少し検討してみます。

また複数CSSで表示時間とかに影響は無いのでしょうか?

なにせ、各ページを結構、勝手気ままに作ってしまったので・・
各ページ毎に個別のCSSが必要になりそうです・・

FirefoxとアドオンのFirebugともインストールしてましたが、
使い方イマイチわからなかったので、そのままでしたぁ。
もう一度見てみます、
悪評高いIE?(笑)を使い慣れてしまったものですから、
Firefoxは慣れなくて・・
私のHPなどはIEでは綺麗に表示してくれるのですが、
Firefoxは正直すぎてhtmlタグのゴミを拾って表示が崩れてしまいます。

htmlのゴミ掃除してくれるソフトが欲しいですぅ・・・

(現在Sleipnir(+IE8)を愛用していますが、
超速・超便利で、なかなか他のブラウザ使う気に慣れませんが(笑)・・・)

また伺います、ありがとうございました!!

複数CSSで、グリーンだよ~♪

extreme1webfc2comさん、こんにちは!(・∀・)/ぐんもに
コメントありがとうございます。


【1】複数CSS
> また複数CSSで表示時間とかに影響は無いのでしょうか?
>
う~ん、どうでしょうねぇ。(´Д`;)

画像とかでは、たしかにCSS Spriteとかいって、

ちまちまとした小さい画像より、
でかい画像でボーンって、一発で済まそうという話はあるから、

CSSファイルについても、
同じようなことは言えるかもしれませんね。


大きいサイトとかでは、
スピード重視ってことで、

わざと、CSSをHTMLファイル内に書いているところもあると、
聞いたことがあります。

その辺は、サイト規模、コンテンツやユーザの状況、

更新や管理の簡便さなどを考慮して、
運営者が判断することになるのではないでしょうか。


ちなみに、@importでCSSファイル内から、
さらに外部CSSファイルを呼び出せるのですが、

これについては、「遅くなるので止めた方が良い」と、
言われているようです。


【2】各ページ毎に個別のCSS
> なにせ、各ページを結構、勝手気ままに作ってしまったので・・
> 各ページ毎に個別のCSSが必要になりそうです・・
>
ユーザビリティ / アクセシビリティは、
考慮した方が良いかもしれません。

もし、レイアウトやカラーイメージが、
ページごとに違うとしたなら、

ユーザには、使い勝手の悪いサイトに見えるはずです。
統一感は、大切でありんす。

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/300-b955e7b9
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて