とほほのHTMLリファレンス(基本)

とほほのWWW入門 > とほほのHTMLリファレンス > 基本
1999年1月24日

<HTML>〜</HTML> - HTML文書 - H2/e2/N2

■ 説明

<HTML>〜</HTML>で囲まれた部分がHTML文書であることを示します。ほとんどのHTML文書は次の使用例のような構造で記述されます。詳細は「ホームページ作成入門」を参照してください。

■ 使用例

【HTMLソース】 
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>

■ 補足

<HTML>、<HEAD>、<TITLE>、<BODY>はそれぞれ、HTML文書中に一度しか記述してはなりません。

HTML4.0の定義によると、<HTML>、<HEAD>、<BODY>は省略可能なのだそうです。もちろん、開始タグを省略した時は終了タグも省略します。しかし、不幸な事故を起こさないように、省略しないほうがよいでしょう。<TITLE>は省略できません。

<HEAD>〜</HEAD> - ヘッダ - H2/e2/N2

■ 説明

<HEAD>〜</HEAD>で囲まれた部分がHTML文書のヘッダであることを示します。ヘッダには必ず<TITLE>を記述します。

他にも必要に応じて<BASE>、<SCRIPT>、<STYLE>、<META>、<LINK>、<OBJECT>、<NEXTID>、<ISINDEX>などのタグを記述します。

■ 使用例

<HTML>を参照してください。

<TITLE>〜</TITLE> - タイトル - H2/e2/N2

■ 説明

<TITLE>〜</TITLE>で囲まれた部分がタイトルとして扱われます。タイトルはページ上には表示されませんが、ブラウザのツールバー、ヒストリ(履歴)一覧、検索エンジンの結果などに表示されますので、必ず記述するようにしましょう。

■ 使用例

<HTML>を参照してください。

■ 補足

タイトルに日本語を用いると文字化けするブラウザがありましたが、最近は少なくなっているようです。

<BODY>〜</BODY> - 本文 - H2/e2/N2

■ 説明

<BODY>〜</BODY>で囲まれた部分がHTML文書の本文であることを示します。この本文のところに、<H1>や<B>などのいろいろなタグを使用してHTML文書を完成させます。

■ 属性

属性説明
BACKGROUND="url" H3/e2/N2。背景に表示する画像ファイルを指定します。BACKGROUNDを指定する場合は必ずBGCOLORも指定しましょう。(理由後述)
BGCOLOR="color" H3/e2/N2。背景の色を指定します。省略時の色は通常、IE4やNN4では白ですが、IE3やNN4では灰色です。BGCOLORを指定する場合は必ずTEXTなども指定しましょう。(理由後述)
TEXT="color" H3/e2/N2。TEXTは通常テキストの、LINKはリンクテキストの、VLINKはキャッシュ済みリンクテキストの、ALINKはマウスクリックしている間のリンクテキストの色を指定します。IE1.0〜IE3.0ではALINKは無視されるようです。
LINK="color"
VLINK="color"
ALINK="color"
LEFTMARGIN=n e2。テキスト領域の左右および上下のマージン(余白)をピクセル単位で指定します。0にすると画像を左上に隙間無く表示できます。
TOPMARGIN=n
RIGHTMARGIN=n e4。テキスト領域の右マージン(余白)、下マージンを指定します。左右や上下で異なるマージンを設定する場合に使用します。
BOTTOMMARGIN=n
MARGINWIDTH=n N4。NNでは LEFTMARGIN / TOPMARGIN の代わりにこれらを使用します。汎用性を高めるなら両方指定します。
MARGINHEIGHT=n
BGPROPERTIES=... e2。BGPROPERTIES=FIXEDとすると背景が固定され、スクロールバーでテキストをスクロールしても背景だけはスクロールしなくなります。
SCROLL=... e3。SCROLL=NOとするとスクロールが禁止されます。

■ 使用例

【HTMLソース】 
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
</HEAD>
<BODY BACKGROUND="back.gif"
      BGCOLOR=white TEXT=black>
ここに本文を記述します。
</BODY>
</HTML>

■ 補足

BACKGROUND属性を指定した場合は、必ずBGCOLOR属性で背景画像と同系色の背景色を指定しましょう。さもないと、画像を読み込まないモードで表示する際に文字が読みづらいことがあります。

BGCOLOR属性を指定した場合は、必ずTEXTやLINKなどの属性も指定するようにしましょう。TEXTは常に黒とは限りません。黒系のバックグランドに白系の文字で作業している人もいます。

<Hn>〜</Hn> - 見出し - H2/e2/N2

■ 説明

章の見出し(Heading)を指定します。n は章のレベルで、1〜6までの数字を指定します。

■ 属性

属性説明
ALIGN=... H3/e2/N2。表示する位置を指定します。...にはleft(左揃え)、right(右揃え)、center(中揃え)のいずれかを指定します。HTML4.0ではjustify(均等配列)も定義されていますが、サポートしているブラウザは少ないようです。

■ 使用例

【HTMLソース】 
<H1 ALIGN=center>第１章 HTML入門</H1>
<H2>1.1 HTMLとは</H2>
HTMLはHyperText Markup Languageの略で...
<H2>1.2 CGIとは</H2>
CGIはCommon Gateway Interfaceの略で...

【ブラウザでの表示】

第１章 HTML入門

1.1 HTMLとは

HTMLはHyperText Markup Languageの略で...

1.2 CGIとは

CGIはCommon Gateway Interfaceの略で...

■ 補足

<Hn>は見出しを指定するタグであり、これを解釈して目次を表示する機能を持ったブラウザも実際にあります。単にフォントの大きさを変更する目的での使用であれば<Hn>ではなく、<FONT SIZE=n>やスタイルシートを利用しましょう。

<P>〜</P> - 段落 - H2/e2/N2

■ 説明

<P>〜</P>で囲まれた部分がひとつの段落(Paragraph)となります。</P>は省略することができます。

■ 属性

属性説明
ALIGN=... H3/e3/N2。表示する位置を指定します。...にはleft(左揃え)、right(右揃え)、center(中揃え)のいずれかを指定します。IE2.0ではcenterのみが使用可能でした。HTML4.0ではjustify(均等配列)も定義されていますが、サポートしているブラウザは少ないようです。

■ 使用例

【HTMLソース】 
<P>ここがひとつ目の段落です。
HTML文書の中では改行は、
すこし隙間があくだけになってしまいます。
<P>ここがふたつ目の段落です。
段落を変更すると１行分の隙間をあけて改行されます。
<P>　行頭に全角のスペース文字を入れると、
なんとなく日本語の段落開始のような雰囲気になります。

【ブラウザでの表示】

ここがひとつ目の段落です。 HTML文書の中では改行は、 すこし隙間があくだけになってしまいます。

ここがふたつ目の段落です。 段落を変更すると１行分の隙間をあけて改行されます。

　行頭に全角のスペース文字を入れると、 なんとなく日本語の段落開始のような雰囲気になります。

■ 補足

</P>は省略可能ですが、ALIGN属性やスタイルシートを指定する時などに有効です。

<P>では何個並べても１行しか改行しませんので、複数行改行したい時には<BR>を複数個並べてください。

<P>は段落を示すタグであり、単に1行あける目的のために用いることは好ましくありません。しかし、単に1行あける目的で<BR><BR>と記述した場合、改行の位置によっては1行のつもりが2行あいてしまうことがあります。(前行の行末がページの右端にきた場合)

最初の１行を字下げ(インデント)するには、スタイルシートの text-indent を指定しますが、漢字１文字分という単位がないので、全角スペース文字で誤魔化すことも多いようです。

<HR> - 水平線 - H2/e2/N2

■ 説明

水平線(Horizontal rule)をひきます。

■ 属性

属性説明
ALIGN=... H3/e2/N2。水平線を表示する位置を指定します。...にはleft(左揃え), center(中揃え）, right(右揃え)のいずれかを指定します。
SIZE=n H3/e2/N2。線の幅をピクセル単位で指定します。
WIDTH=n H3/e2/N2。線の横の長さを指定します。ピクセル値指定の他、WIDTH="60%" のような画面の横幅に対する割合指定も可能です。
NOSHADE H3/e2/N2。立体的な影をもたない平面的な線にします。
COLOR="color" e3。線の色を指定します。

■ 使用例

【HTMLソース】 
<HR>
<HR WIDTH=100 SIZE=10>
<HR WIDTH="50%">
<HR NOSHADE COLOR=green>

【ブラウザでの表示】

<!-- 〜 --> - コメント - H2/e2/N2

■ 説明

テキストを <!-- と --> で囲むことにより、その部分を注釈とすることができます。閉じるほうにはビックリマーク( ! )が無いことに注意してください。注釈はHTML文書中にコメントを書き込むためのものでブラウザには表示されません。

IEでは<COMMENT>も使用できますが、NNは使用できません。

注釈は複数行にわたってもかまいません。

■ 使用例

【HTMLソース】 
あいうえお <!-- かきくけこ --> さしすせそ
<!-- 
たちつてと
なにぬねの
-->
はひふへほ

【ブラウザでの表示】
あいうえお さしすせそ はひふへほ

■ 補足

コメント中に > を記述すると、そこでコメントが終了していると判断してしまうブラウザがありますので注意してください。

また、コメント中に -- を記述することも避けるべきだそうです。<!----コメント----> は文法的に誤っています。

&xxx; - 特殊文字 - H2/e2/N2

■ 説明

HTML文書の中では < や >などの文字はそのままでは表示できません。&lt; などと記述することにより、< と表示することができます。

■ 主な特殊文字一覧

名前符号表示される文字
&lt;右大不等号 ( < )
&gt;左大不等号 ( > )
&amp;アンパサンド ( & )
&quot;ダブルクォーテーション ( " )
&nbsp;空白文字(注)
※他にも&copy;(コピーライトマーク)など、いろいろなものが定義されていますが、日本語版ブラウザでは対応していないものも多いようです。

■ 使用例

【HTMLソース】 
リンクを張るには &lt;A&gt; を用います。

【ブラウザでの表示】
リンクを張るには <A> を用います。

■ 補足

空白文字を表す &nbsp; は大変便利なのですが、NN2.0やNN3.0では文字化け(&nbsp;の部分が・と表示される)が発生します。NN3.0の利用者がずいぶん少なくなったとはいえ、NN3.0を考慮して空白文字を表すには、全角の空白文字を利用するなどの方法を利用しましょう。

Copyright (C) 1996-1999 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwrefba.htm