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

使用する記述 <!-- -->
今日はHTMLの中に書くコメント文についてです。

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

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

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

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

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

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

コメントは表示されない

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

コメントタグの使いどころ(この項目は2016年4月追記しました)

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

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

まず [1]人から人へのメモとして の使い方ですが、
後でソースコードを見た時に、なんのための記述なのか などを自分や他人がわかるようにしておくために使います。
本来HTML文書はブラウザに対しての指示書です。だけど書くのは人間ですからメモ的な記述もしたいし、第三者に「ここは何を記述している箇所か」とかを説明したい。こんなニーズのためにコメントタグがあるのね。
あくまでも人間の使い勝手の良さのためだけのモノなので、必要なことだけ簡潔に書きましょう。

[2]コメントアウトとして の使い方は、
今は表示したくないけど後日使うコードなどを「<!--」「-->」で囲んでおくんです。これをコメントアウトと言います。
コメントタグの「ソースコードは存在するけどブラウザがプレビューしない」という性質を利用した使い方です。
コメントアウトしておくと、後で「<!--」と「-->」を外すだけでコードが復活できるので便利です。
コメントアウトはあくまでも一時的な措置として使います。
もう絶対使わない不要なコードなのに、いつまでもコメントアウトしたまま...なんてことはないようにしよう。(自分で言ってて耳が痛い。笑)

そして、コメントアウトの特例バージョンで、条件付きコメントというのもあります。
IEのバージョン5から9を判定して、該当しなければコメントアウトする、というもの。
これはけっこう特殊な使い方なので、初心者のかたは今はまだあまり気にしなくてもイイです。
それに、もう Edge も出ちゃってるし、条件付きコメントは近い将来「過去の遺物」になるでしょうね。

[3] !DOCTYPE宣言をしようHTML5の新要素をIEで表示させるために下のソースを書きましたが、これもこの条件付きコメントを利用しています。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

条件付きコメントの使い方は、おなじみのウィキペディアに詳しく掲載されていましたので、ご興味ある方はこちらも読んでみてください→ 条件付きコメント - Wikipedia

ちなみに、コメント文の指定はHTMLだけじゃなく他にもあります。

CSSだと「/*」と「*/」で囲めばコメントになります。
JavaScriptでは、CSSと同じ「/*」と「*/」で囲んでもイイし、先頭に「//」を記述した行は行末まで(改行するまで)コメントになります。
PHPは、JavaScriptと同じく 「/*」と「*/」、先頭に「//」、そしてもう1つ 先頭に「#」を付けても行末までコメントです。

「<!--」と「-->」なのはHTMLだけ。他の言語を使う時は間違えないようにしよう。

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

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

脱字報告と感じた事

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

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

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

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

Re: 脱字報告と感じた事

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


それから、コメントタグに対して、もしかしたら誤解をお持ちかもしれません。
何でも書いてイイってわけじゃない。
関連性のないこと(もちろん個人情報なども)を書くというシチュエーションは無いんです。
HTML文書はセマンティックであるべきなので、ぶっちゃけコメントタグなんて無いほうがイイんです。が、それでは使い勝手が悪いので各ブラウザで実装しているわけです。
でも確かに初心者のかたは「表示されないんだから何を書いてもイイんだ\(^o^)/」って思うかもね。
これを期に、具体的な「コメントタグの使いどころ」を本文に書き足しておきました。
ご指摘ありがとうございます。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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