熊本大学大学院教授システム学専攻
目次:
【第7回】文字飾り、箇条書、表、フレーム
第1章
第3章
第4章
現在の場所: ホームページ > [2]HTMLとCSS > 【第7回】文字飾り、箇条書、表、フレーム > 第4章 > グループ化要素、コメント等

グループ化要素、コメント等

【本節の目的】
その他のHTML要素や文字参照などについて意味と使い方を習得する。

その他のHTML要素など (グループ化要素、コメント)

グループ化要素 (div要素、span要素)

要素の説明
これまで、文書の構造を記述するHTMLの各種要素について学習して来ましたが、 第9回からは、構造化された文書の見栄えを記述する CSSを取り上げます。 CSSでは、基本的にHTMLで記述した構造単位に見栄えの設定を行ないますが、 場合によっては、文書の構造とは異った単位(ブロック)で、 見栄えの設定をしたくなることがあります。 そのとき利用するのが、グループ化要素である div要素と span要素です。 ですから、グループ化要素は CSSと関連付けして利用します。 そのため、div要素やspan要素の実際の使用例は第10回に示すことにします。

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

要素の説明
文書記述言語で「コメント」というのは、 文書を記述してもブラウザで表示されない内容のことです。 (プログラム言語を含むコンピュータ言語にも同様の機能があります。) 「コメント」は、文書中に作成者のメモを書いたり、 テストを行なうときなどにたいへん役に立ちます。
例えば、HTML文書が長くなると、 あるブロックが何を記述したいのか分らなくなってきます。 そのようなときに、「ここからは、〇〇〇についての内容」 のようなメモを書いておくと、他の部分と区別がつきやすく、 修正時に便利です。もちろん、その部分は「コメント」なのですから、 Webブラウザでは表示されませんから、 公開したい内容が変わることもありません。
あるいは、文書作成中にブラウザでの表示がおかしくなったときに、 問題点のある個所を見つけるために使うこともあります。 表示がおかしくなったら、 問題のありそうな個所を一旦「コメント」にして (通常このように、 文書をコメントにすることを「コメント アウトする」と言います) 正常に表示されることを確認した後、少しずつコメントを外しては、 ブラウザでの表示を確認するという作業を繰り返し、 コメントを外したときに表示がおかしくなったら、 その部分にミスがあることを発見することができます。

テキストを「コメント化」するためには、 コメント化したいテキストを「<!--」と「-->」で囲むだけです。 ただし、「<!--」と「-->」の間に「--」(2個連続したハイフン)を使うことは禁止されていますので注意して下さい。

サンプルHTML
<p> 例えばここまでが、Aについての内容です。 </p>

<!-- 「ここからBでーす。」などとコメントを書きます。-->
<!-- ここに書いたテキストは、Webブラウザでは表示されません。-->
<p> ここからBについての話が始まります。 </p>
<!-- 
   このように、大きなブロックを囲めば、
   複数の行にわたってコメント書くことも可能です。
   もちろん、この3行もWebブラウザでは表示されません。
-->
Webブラウザでの表示結果

コメント

文字参照と機種依存文字

HTML文書中で使ってはいけない文字があります。 その文字が何かを知ると同時にその対処方法について学びましょう。

文字参照

これまで学習してきたように、 HTML文書はワードプロセッサ (ワープロ)での文章と異なり、 文書内に要素の境界を示す「タグ」を挿入して構造を指定します。 挿入する「タグ」は、「<」や「>」で囲まれていて本来の文書と区別されていますが、 考えてみると、これらの「<」や「>」も通常使われる文字ですね。 ということは、これらの文字(記号)を(「タグとして区別する記号」としてでなく) 通常の文字としてHTML文章の中に使うときはどうすれば良いでしょう?

例えば、「HTMLの文法入門」というHTML文書中でbr要素の説明として、 次のように書いたとします。

<p> 
   p要素の中で改行を行ないたいときは、<br>タグを用います。
</p> 

一見、問題無さそうですが、実際にWebブラウザ表示すると下図のようになります。

文字参照無し

<br> が表示されず、その代わりにそこで改行されています。 HTML文書を良く見たら当然の動作ですよね。 <br>は改行を行なう要素なので、そのタグが表示されず改行しているだけです。

そこで、このようなときのために、 「<」や「>」のようにHTML文書中で特別の意味をもつ文字は、 特別な方法で書くことになっています。これを「文字参照」と呼びます。

以下に代表的なものを一覧表にしますので、 これらの記号を表示したいときは文字参照をを行なって下さい。

記号 文字参照 記号の読み方
< &lt; 少なり (less-than)
> &gt; 大なり (greater-than)
" &quot; ダブルクォーテーション (二重引用符)
& &amp; アンパサンド (ampersand、アンド記号)
  &nbsp; 改行禁止スペース (no-break space)
(註) 最後の「改行禁止スペース (&nbsp;)」は、 複数の空白を連続して空けたいときになどに利用されます。

上記の文字参照を使って、先の例を書き直すと以下のようになります。

<p> 
   p要素の中で改行を行ないたいときは、&lt;br&gt;タグを用います。
</p> 
今度は、Webブラウザでも所望の表示になりましたね。

文字参照有り

機種依存文字

日本語文字の中にはインターネットで使ってはいけない文字があります。

以下のような文字は、HTMLファイル中では使わないようにしましょう。

機種依存文字

(註) 最後の行のカタカナは「半角カナ」です。これは、 機種依存文字ではありませんが、インターネットで利用することのできない文字です。
Copyright (C) Kenichi Sugitani 2005, All Rights Reserved