勝手にHTML4.0講座 - 文字修飾

1.<DIV><SPAN>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
align = 配置コード表示するときに、水平方向での配置を指定します。[非推奨]
内在イベントonclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

DIV要素とSPAN要素は、属性と併用して文書をグループ化したりして構造的な意味を補強するものです。 たとえば align 属性を用いると囲んだ部分のみを中央寄りにすることなどができます。 インライン要素を扱う場合はSPAN要素、ブロックレベル要素を扱う場合はDIV要素を用います。

<DIV align="left">
左寄りの文章
</DIV>
<DIV align="center">
中央寄りの文章
</DIV>
<DIV align="right">
右寄りの文章
</DIV>
<SPAN style="font-size:9;">
SPAN要素
</SPAN>
上記を実際に表示するとこうなります。

左寄りの文章
中央寄りの文章
右寄りの文章
SPAN要素

2.<H1>,<H2>,<H3>,<H4>,<H5>,<H6>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
align = 配置コード表示するときに、水平方向での配置を指定します。[非推奨]
内在イベントonclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

見出しは、その章・節などで記される内容に関する短い説明を述べるものです。文書の目次を自動生成するのに使われる場合もあります。
HTMLの見出しには6つのレベルがあり、数字が小さいほど上位のレベルを表しています。視覚系ブラウザは通常上位の見出しを大きく、下位の見出しを小さく表示します。

下の例は、DIV要素を用いてある見出しから始まる各項目に意味構造を与えたものです。 こうすると、スタイルシートを利用して、各章・節毎に別々のスタイル指定を行うことができます。
<DIV class="section">
<H1>犬</H1>

...大項目続く...

<DIV class="subsection">
<H2>柴犬</H2>

...中項目続く...

</DIV>
</DIV>

上記を、次のようにスタイルシートで飾りたてることができます。

<HEAD>
<TITLE>〜犬〜</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>
下記は、実際にH1〜H6をつかって表示しています。

Ｈ１見出し

Ｈ２見出し

Ｈ３見出し

Ｈ４見出し

Ｈ５見出し
Ｈ６見出し

3.<ADDRESS>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

ADDRESS要素は、当該文書・フォームなどに関する問い合わせ先を記す場合に使います。 文書の先頭か末尾に記されるのが普通です。
例えば、W3CのHTML関連のサイトには、下記のような問い合わせ先情報が記されています。

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
contact persons for the <A href="Activity">W3C HTML Activity</A><BR>
$Date: 1997/12/16 05:38:14 $
</ADDRESS>
下記は実際のアドレス要素です
ADDRESS要素

4.<BDO>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
dir = 書字方向基本書字方向を指定します。必須です
その他lang

ヘブライ語など右から左へ読まれる言語ではUNICODEの双方向書字アルゴリズムによって方向転換され、ちゃんと読めるようになります。 しかし、すでに方向転換されている文章の場合、それまでも方向転換して読めなくなってしまいます。
これを解消するためには、本文全体を PRE要素としてマークアップし、更に各行を BDO要素とした上で dir属性をLTRにします。

<PRE>
<BDO dir="LTR">english1 2WERBEH english3</BDO>
<BDO dir="LTR">4WERBEH english5 6WERBEH</BDO>
</PRE>

上記のようにすることによって制御記号による方向転換の指令に対し、「左から右のままにしてくれ!」と命令の更新を行い、元々の表示を生かすことができます。

5.<EM><STRONG><DFN><CODE><SAMP><KBD><VAR><CITE><ABBR><ACRONYM>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

これらのフレーズ単位要素は、文章の特定部分に対して文章構造上の情報を付加するためのものです。 各要素の意味は、下記一覧のようになっています。

EM 強調部分
STRONG より強い強調部分
CITE 他からの引用、参照部分
DFN 定義を行っている部分
CODE コンピューターのコード
SAMP プログラムやスクリプトなどの文例
KBD ユーザーの入力操作で充当する部分
VAR 変数部分、プログラムの引数部分
ABBR 略語(WWW,HTTP,URI,Mass等)
ACRONYM頭文字化省略語(WAC,radar,F.B.I等)

EMとSTRONGは強調部分を示すために使います。 ABBRとACRONYM要素は、省略語を扱う際に発生する問題を解決するためのものです。 他の要素は技術文書などで特定目的のために使います。

(実例)
EM要素
STRONG要素
CITE要素
DFN要素
CODE要素
SAMP要素
KBD要素
VAR要素
ABBR要素
ACRONYM要素

6.<BLOCKQUOTE><Q>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
cite = uri原文の所在を示すURIを記します。
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

BLOCKQUOTEとQは、引用文を示す要素です。 BLOCKQUOTEは長文の引用、Qは短い語句などの引用を示します。 また、IEやNNでは字下げで表示されます。

BLOCKQUOTEBLOCKQUOTEBLOCKQUOTEBLOCKQUOTEBLOCKQUOTE
BLOCKQUOTEBLOCKQUOTEBLOCKQUOTEBLOCKQUOTEBLOCKQUOTE

7.<SUB><SUP>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

多くの言語では、下付き文字と上付き文字を必要としています。 SUB要素とSUP要素が、そうした場合に使われます。

H2O
E = mc2

8.<P>要素

開始タグ: 必要
終了タグ: 省略可能

属性 = 属性値説明
align = 配置コード表示するときに、水平方向での配置を指定します。[非推奨]
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

P要素は段落を表します。P要素中にはブロックレベル要素を含めることができません。（P要素を入れ子にすることもできません。）

9.<BR>要素

開始タグ: 必要
終了タグ: なし

属性 = 属性値説明
clear = 配置コード改行の後の新しい行の表示位置を指定します。[非推奨]
その他lang , dir , id , class , style , title

BR要素は、テキストの行を、当該箇所で強制的に折り返します。

10.<PRE>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
width = 数字[非推奨]
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

PRE要素はその内容が 「整形済みであること」を視覚系ユーザエージェントに指示します。 これを使うと、次のようになります。 下は実際に使った例です

       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.

11.<INS><DEL>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
cite = uri原文の所在を示すURIを記します。
datetime = 日時変更された日時を記します。
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

INS要素とDEL要素は文書のバージョン管理を行う際に、 挿入部分や削除部分の目印として使われるものです。

(例)州知事が副官として任命できる人数を定めた法案において、3名から5名に変更したことを示すものです。
州知事は<DEL>3</DEL><INS>5</INS>名の副官を任命できる。
州知事は35名の副官を任命できる。

12.<TT><I><B><BIG><SMALL><STRIKE><S><U>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

これらの要素は、文字をいろいろな形で表示します。 あくまで参考として、表示の例を下に掲げます。


(実例)
等幅(TT)
斜体(I)
太字(B)
太字で斜体(I+B)
大きい文字(BIG)
小さい文字(SMALL)
取消線付き文字(S)
下線付き文字(U)

スタイルシートを使えば、より豊富なフォント効果を出せます。 ある段落を青いイタリック体 [斜体] の文字で表示させるCSSのスタイル指定は、次のようになります。
<HEAD>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...青字でイタリック体 [斜体] の文章...

13.<FONT><BASEFONT>要素[非推奨]

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
size = 文字列文字サイズを指定します(1から7まで)。また、相対的に指定することもできます(+1や-3)。[非推奨]
color = 色文字色を指定します。[非推奨]
face = 文字列表示させたいフォントの名前をリストで指定します。[非推奨]
その他lang , dir , id , class , style , title

FONT要素は、そこに含まれる文字の大きさや色を変更するものです。
BASEFONT要素は、size属性によって基準となる文字の大きさを指定するものです。 FONT要素による相対的な文字サイズ変更は、BASEFONTによる基準サイズを参照します(指定がないときは3になります)。

非推奨例 : 以下はFONT要素で指定可能な7種類の文字サイズを例示するものです。
size=1
size=2
size=3
size=4
size=5
size=6
size=7

14.<HR>要素

開始タグ: 必要
終了タグ: なし

属性 = 属性値説明
align = 配置コード表示するときに、水平方向での配置を指定します。[非推奨]
noshadeベタ塗りで表示されます。[非推奨]
size = 太さ区切り線の太さを指定します。[非推奨]
width = 長さ区切り線の長さを指定します。[非推奨]
内在イベントonclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup
その他lang , dir , id , class , style , title

HR要素が存在すると、水平区切り線を描きます。

非推奨例
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

★INDEX★