本節の目的
その他のHTML要素や文字参照などについて意味と使い方を習得する。
その他のHTML要素 (コメント)
コメント (<!-- -->)
要素の説明
文書記述言語で「コメント」というのは、文書を記述してもブラウザで表示されない内容のことです。(プログラム言語を含むコンピュータ言語にも同様の機能があります。) 「コメント」は、文書中に作成者のメモを書いたり、テストを行なうときなどにたいへん役に立ちます。
例えば、HTML文書が長くなると、あるブロックが何を記述したいのか分らなくなってきます。そのようなときに、「ここからは、○○○についての内容」のようなメモを書いておくと、他の部分と区別がつきやすく、修正時に便利です。もちろん、その部分は「コメント」なのですから、Webブラウザでは表示されません。そのため、公開したい内容が変わることもありません。
あるいは、HTML文書作成中にブラウザでの表示がおかしくなったときに、問題点のある個所を見つけるために使うこともあります。表示がおかしくなったら、問題のありそうな個所を一旦「コメント」にして (通常このように、文書をコメントにすることを「コメントアウトする」と言います) 正常に表示されることを確認した後、少しずつコメントを外しては、ブラウザでの表示を確認するという作業を繰り返します。そして、コメントを外したときにブラウザでの表示がおかしくなったら、コメントを外した部分にミスがあることがわかります。
テキストを「コメント化」するためには、コメント化したいテキストを「<!--」と「-->」で囲むだけです。ただし、「<!--」と「-->」の間に「--」(2個連続したハイフン)を使うことは禁止されていますので注意して下さい。
サンプルHTML
このサンプルHTMLは、学生番号b02.html に貼り付けないで、Webブラウザでの表示結果と見比べるだけにして下さい。
(ここで、学生番号b02.htmlに貼り付けると、次の「コメントアウト」の演習がうまく動作しません。)
<p> 例えばここまでが、Aについての内容です。 </p>
<!-- 「ここからBでーす。」などとコメントを書きます。-->
<!-- ここに書いたテキストは、Webブラウザでは表示されません。-->
<p> ここからBについての話が始まります。 </p>
<!--
このように、大きなブロックを囲めば、
複数の行にわたってコメント書くことも可能です。
もちろん、この3行もWebブラウザでは表示されません。
-->
Webブラウザでの表示結果
例えばここまでが、Aについての内容です。
ここからBについての話が始まります。演習：コメントアウト
演習で作成中のHTMLファイルに、コメントを入れたり、一部をコメントアウトしてみて下さい。
学生番号b02.htmlをHTMLエディタで開き(既に開いていれば、改めて開く必要はありません)、以下の指示に従い、コメント要素の意味を確認してください。
- まず、本文(body要素の内容)の先頭に、コメントを挿入してみましょう。
<body>タグのすぐ下に、以下のようなコメント行(赤字の部分)を挿入して下さい。
<!-- と --> は、半角文字で書くこと。<body>
<!-- ここからが本文です。 -->
<p>
詳しくは、<a href="http://www.kumamoto-u.ac.jp/"> 熊大のトップ </a>を参照下さい。
</p>
．．．．．．．．．．．．．．
．．．．．．．．．．．．．．
挿入して、上書き保存したら、ブラウザで表示 (再読み込み) してください。
何か変化がありましたか？？「何も変わらない」ですか？
それで、よいのです！コメントは、本文に影響を与えないようにメモを書くための要素ですから、コメントを書いたことで表示に影響があってはいけないのです。
もし、ブラウザの表示が挿入前と変わった人は、コメントの挿入に失敗しています！間違い箇所を探してください。- 次に、本文(body要素の内容)を全部コメントアウトしてみましょう。
本文の先頭(既にコメントがあるときは、その下)に、コメントの開始を表す <!-- を挿入し、本文の最後 (</body>のすぐ上) に、コメントの終了を表す --> を挿入して下さい (下図参照)。
<body>
<!-- ここからが本文です。 -->
<!--
<p>
詳しくは、<a href="http://www.kumamoto-u.ac.jp/"> 熊大のトップ </a>を参照下さい。
</p>
．．．．．．．．．．．．．．
．．．．．．．．．．．．．．
-->
</body>
挿入して、上書き保存したら、ブラウザで表示(再読み込み)してください。
どうなりましたか？？真っ白になった！？
それで、よいのです！本文をすべてコメントにした(コメントアウトした)のですから、Webブラウザに何も表示されなくなるのです。(ただし、ブラウザのタイトルバーやタブには、title要素に書いた表題が、表示されていると思います。)
もし、ブラウザに何か表示されている人は、コメントの挿入に失敗しています！間違い箇所を探してください。- 今度は上記の状態から、本文の一部を元に戻して(表示して)みましょう。
コメントの開始を表す <!-- を、本文最初のブロックレベル要素の下に、移動(切り取り ＆ 貼り付け) させて下さい。下図では、最初のブロックレベル要素がp要素ですので、</p> の次に移動させています。
<body>
<!-- ここからが本文です。 -->
<p>
詳しくは、<a href="http://www.kumamoto-u.ac.jp/"> 熊大のトップ </a>を参照下さい。
</p>
<!--
．．．．．．．．．．．．．．
．．．．．．．．．．．．．．
-->
</body>
挿入して、上書き保存したら、ブラウザで表示 (再読み込み) してください。
最初のブロック要素が表示されましたか？(上図のサンプルなら、「詳しくは、熊大トップを参照下さい。」と表示されるはずです。)
HTML文書作成中に、ブラウザでの表示がおかしくなったときは、疑わしい部分をコメントアウトして正常に動作できるのを確認し、上記のように、少しづつ有効にすることで、HTMLの文法ミスをしている箇所を見つけるということができます。
文字参照と機種依存文字
HTML文書中で使ってはいけない文字があります。その文字が何かを知ると同時にその対処方法について学びましょう。
文字参照
これまで学習してきたように、HTML文書はワードプロセッサ (ワープロ)での文章と異り、文書内に要素の境界を示す「タグ」を挿入して構造を指定します。挿入する「タグ」は、「<」や「>」で囲まれていて本来の文書と区別されていますが、考えてみると、これらの「<」や「>」も通常使われる文字ですね。ということは、これらの文字(記号)を(「タグとして区別する記号」としてでなく) 通常の文字としてHTML文章の中に使うときはどうすれば良いでしょう？
例えば、「HTMLの文法入門」というHTML文書中でbr要素の説明として、「p要素 の中で改行を行ないたいときは、<br>タグを用います。」と表示しようとして次のように書いたとします。
<p>
p要素の中で改行を行ないたいときは、<br>タグを用います。
</p>
一見、問題無さそうですが、実際にWebブラウザで表示すると下図のようになります。
p要素の中で改行を行ないたいときは、
タグを用います。
「<br>」 が表示されず、その代わりにそこで改行されています。HTML文書を良く見たら当然の動作ですよね。<br>は改行を行なうタグなので、そのタグが表示されず改行しているだけです。
そこで、このようなときのために、「<」や「>」のようにHTML文書中で特別の意味をもつ文字は、特別な方法で書くことになっています。これを「文字参照」と呼びます。
以下に代表的なものを一覧表にしますので、これらの記号を表示したいときは文字参照を行なって下さい。
| 記 号 | 文字参照 | 記号の読み方 |
|---|---|---|
| < | < | 少なり (less-than) |
| > | > | 大なり (greater-than) |
| " | " | ダブルクォーテーション (二重引用符) |
| & | & | アンパサンド (ampersand、アンド記号) |
| | 改行禁止スペース (no-break space) |
最後の「改行禁止スペース ( )」は、複数の空白を連続して空けたいときになどに利用されます。
上記の文字参照を使って、先の例を書き直すと以下のようになります。
<p>
p要素の中で改行を行ないたいときは、<br>タグを用います。
</p>
今度は、Webブラウザでも所望の表示になりましたね。
p要素の中で改行を行ないたいときは、<br>タグを用います。
機種依存文字
日本語文字の中にはインターネットで使ってはいけない、「機種依存文字」と呼ばれる文字があります。
なぜ「機種依存文字」と呼ばれる文字を使ってはいけないかというと、利用する端末の種類により、意図した字形と異なる表示になったり、まったく表示できなかったりする為です。
「機種依存文字」を使った際の典型例として、「〓（ゲタ）」「・（中黒）」「□（四角、豆腐）」等の文字に置換されて表示されたり、別の文字として表示（文字化け）します。
ところで、「機種依存文字」で問題が発生するのは、OSが異なる事によるものがほとんどですので、一般的には、利用端末の製造メーカや機種が異なることには関係ありません。
以下が典型的な機種依存文字です。このような文字は、HTMLファイル中や電子メールでは使わないようにしましょう。
最後の行のカタカナは「半角カナ」です。これは、機種依存文字ではありませんが、インターネットで利用することのできない文字です。
Copyright Kenichi Sugitani 2011, All Rights Reserved.