[8]コメントを入れよう

最終更新日:2017年09月14日  (初回投稿日:2010年10月25日)

今日はHTMLの中に書く「コメント」を書いてみましょう。

使用する記述 <!-- -->

コメントはブラウザで表示されない

HTMLソースの中にコメントを入れたいときは、コメント文を <!----> で囲みます。「--」はハイフンが2つ。

メモや注意書きを入れておくと、更新時や複数の人で編集する時に便利です。
このコメント用の記号「<!-- -->」で囲む文章は、ブラウザで表示されず機能にも干渉しません。

さっそくコメントを入れてみましょう。前回保存したファイルに下記のように、
<!--本文START--><!--本文END--> というコメントを追加します。

<!DOCTYPE html>
<html>
<head>
〜省略〜
</head>
<body>
<div> <!--本文START-->
<h1>段落を作ってみよう</h1>
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
<span>(島崎藤村「夜明け前」序の章より)</span>
</p>
</div> <!--本文END-->
</body>
</html>

ファイルを保存してブラウザでプレビューし、
コメントが表示されていない事を確認しましょう。↓

コメント内のテキストは日本語でもソースコードでも何でもOKですが、ハイフンを複数連続で書くのはやめたほうがいい と言われています。

コメントは 「<! 」が開始タグ、「 > 」が終了タグ、「 --(ハイフン2個)」で囲まれた部分がコメントテキストというルールがあります。
古いブラウザではコメント文の中に「--(ハイフン2個)」があると、ブラウザがそこでコメントが終わったと判断し、表示したくないものを表示したり、コメントタグ以降のソースが無効になったりしたんです。
なので、区切り線を書きたければ、ハイフンを連続させるのではなく、全角の罫線「───」とか、「*******」などにしておいたほうが無難だと言われてきました。
今のブラウザはそんなに気を使わなくても大丈夫かもしれないけど。

コメントタグの使いどころ

コメントは主に、
[1]人から人へのメモとして使う(自分用や他人宛てに)
[2]コメントアウトとして使う

という2種類の使い方があります。

まず [1]人から人へのメモとして の使い方は、
自分以外の人が編集する可能性がある場合、第三者に「ここは何を記述している箇所か」とかを説明するためにコメントを残します。
または、後で編集する可能性がある箇所を、自分(や他人)が見つけやすいようにコメントで目印を付けておくとか。
あくまでも人間の使い勝手だけのモノなので、必要なことだけ簡潔に書きましょう。

[2]コメントアウトとして の使い方は、
今は表示したくないけど後日使うコードなどを「<!--」「-->」で囲んでおくんです。これをコメントアウトと言います。
コメントタグの「ソースコードは存在するけどブラウザがプレビューしない」という性質を利用した使い方です。
後で「<!--」と「-->」を外すだけでコードが復活するので便利です。

コメントアウトにはもうひとつ、条件付きコメントというのもあります。
IE独自のものです。例えばこんなやつ↓

<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

<!--[if lt IE 9]><![endif]--> は、IEだけが「もしIE9未満なら実行する」と解釈するんだそうです。ご興味あればこちらに詳細→ 条件付きコメント - Wikipedia

ちなみに、コメントの指定はHTMLだけじゃなく他の言語にもあります。
CSSだと「/*」と「*/」で囲めばコメントになります。
JavaScriptでは、CSSと同じ「/*」と「*/」で囲んでもイイし、先頭に「//」を記述した行は行末まで(改行するまで)コメントになります。
PHPは、JavaScriptと同じく 「/*」と「*/」、先頭に「//」、そしてもう1つ 先頭に「#」を付けても行末までコメントです。
「<!--」と「-->」なのはHTMLだけ。他の言語を使う時は間違えないでね。

次回は画像を使ってみよう

文字ばっかりだと そろそろプレビューがつまんなくなってきましたねぇ。
テキストに関する要素は他にもたくさんあるのですが、その説明は後日にして、
次回から画像を貼ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

脱字報告と感じた事

HTML5の勉強と久々のプログラミングの復習をかねて先日より拝見しています。
非常にわかりやすい説明をありがとうございます。

・脱字報告
一つ目の図のすぐ上にある、
  <!--本文START--> と <!--本文END-> という~
文において本文ENDのあとのハイフンがひとつ足りないようです。

・感じた事
HTMLではコメント化していてもソースなどを見るとコメントも閲覧可能です。
個人情報、重要なことなど見られては困るものを書き込まないように注意が
あるとなおよいのかなと感じました。

水を差すようなコメントで恐縮ですが、応援しています。
これからもよろしくお願いします。

Re: 脱字報告と感じた事

yutaphilusさん、
ほんとに「-」になってましたね! 早速修正いたしました。
お知らせくださってありがとうございます。


それから、コメントタグに対して、もしかしたら誤解をお持ちかもしれません。
何でも書いてイイってわけじゃない。
関連性のないこと(もちろん個人情報なども)を書くというシチュエーションは無いんです。
HTML文書はセマンティックであるべきなので、ぶっちゃけコメントタグなんて無いほうがイイんです。が、それでは使い勝手が悪いので各ブラウザで実装しているわけです。
でも確かに初心者のかたは「表示されないんだから何を書いてもイイんだ\(^o^)/」って思うかもね。
これを期に、具体的な「コメントタグの使いどころ」を本文に書き足しておきました。
ご指摘ありがとうございます。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.