空白文字はその名前のとおり、一文字分の空白を表示します。HTMLにおいて空白文字はワープロなどでの通常の空白文字とは扱いが異なります。通常は複数の空白文字はその文字数分の空白が表示されますが、HTMLでは複数の空白文字は一つの空白文字に置き換えられてしまいます。このため、通常の空白文字と同じ効果を得たい場合には適切な要素かスタイルを使います。
HTMLでは単語の強調、プログラムのサンプル、キーボードからの入力など他の文章を表現するための要素があり、これらを使って文章を構造化します。
その要素を以下に示します。
| 構造化の要素 | 要素名 |
|---|---|
| 強調 | EM |
| 強く強調 | STRONG |
| 別のソースの引用 | CITE |
| 用語の定義 | DFN |
| コンピュータのコードを示す | CODE |
| プログラムやスクリプトなどの例 | SAMP |
| ユーザーが入力するテキスト | KBD |
| 変数やプログラム上の例 | VAR |
| 略語、頭文字 | ABBR |
要素の使用例を示します。
まず、<EM>強調</EM>です。EM要素を使います。 次に<STRONG>強く強調</STRONG>
表示例を示します。
まず、強調です。EM要素を使います。 次に強く強調
文献や他の文章から実際に文を引用するするときにBLOCKQUOTEとQ要素を使いま す。それぞれの違いは長文を引用するか短文を引用するかです。BLOCKQUOTE要素 を使うと引用された文は字下げした一つのブロックとして表示されます。Q要素 は行中に引用された文が引用符で囲まれて表示されます。
注意:Q要素はNN、IE では正しく表示されません。
BLOCKQUOTE要素を字下げだけの目的に使わないでください。字下げが必要ならば 適切なスタイルを定義し、それを使うべきです。
上付文字はSUP要素、下付き文字はSUB要素で指定します。簡単な数式などを表現 することができます。
y=Ax<SUP>2</SUP>+Bx+c<BR> A<SUB>0</SUB>,B<SUB>1</SUB>
これは次のように表示されます。
y=Ax2+Bx+c
A0,B1
HTMLの文書を入力していくときに、行末をきれいに揃える必要はありません。そ れはブラウザが一行に表示する文字数をウインドウの幅、設定されている文字の サイズなどの状態によって決定するからです。このため、HTML文書では明示的に 改行や段落を指示しなければ、入力した文章中の改行文字は無視されます。
改行とは行の終りを示すもので、改行に続く文字は次の行の先頭から表示されま す。段落は文章中、意味の上で一つのまとまりを示すものです。
段落はP要素を、改行はBR要素を使って指定します。PはParagraph、BRはBReakの意味。
P要素の終わりを示すタグを省略できます。また、BR要素には終了のタグはありません。
以下にBRとP要素を使った例を示します。
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>段落と改行</TITLE> </HEAD> <BODY> <H2>指定なし</H2> <P> 文書を入力するとき、行末をきれいに揃える必要はありません。 一行の長さはそれを見るブラウザの状態で変化します。 ブラウザではHTML文書をその状態に適した表示をします。 HTML文書では段落を明示的に指示しなければ 入力した文章が一つの段落であると判断されます。 </P> <H2>指定あり</H2> 文書を入力するとき、行末をきれいに揃える必要はありません。<BR> 一行の長さはそれを見るブラウザの状態で変化します <P>ブラウザではHTML文書をその状態に適した表示をします。 HTML文書では段落を明示的に指示しなければ 入力した文章が一つの段落であると判断されます。 </BODY> </HTML>
文書を入力するとき、行末をきれいに揃える必要はありません。 一行の長さはそれを見るブラウザの状態で変化します。 ブラウザではHTML文書をその状態に適した表示をします。 HTML文書では段落を明示的に指示しなければ 入力した文章が一つの段落であると判断されます。
文書を入力するとき、行末をきれいに揃える必要はありません。
一行の長さはそれを見るブラウザの状態で変化します。
ブラウザではHTML文書をその状態に適した表示をします。 HTML文書では段落を明示的に指示しなければ 入力した文章が一つの段落であると判断されます。
段落をページの左、中央、右側に揃えて表示させる場合、P要素にalign属性を指定します。
この要素には次の値を指定できます。属性を指定しないときはleftが指定されているものとみなされます。
| 値 | 意味 |
|---|---|
| left | 左揃え |
| center | 中央揃え |
| right | 右揃え |
使用例を示します。
<P align="left">左揃え <P align="center">中央揃え <P align="right">右揃え
これを表示すると次のようになります。
左揃え
中央揃え
右揃え
文字の大きさを指定したい場合、FONT要素か、スタイルシートを使います。
FONT要素を使って文字の大きさを指定するにはsize属性を使います。この属性に 指定できる値は1～7と-2～+3までの値です。数値が大きいほど文字は大きくなります。
<FONT size="7">大きさを変えたい文字</FONT>
ブラウザでは次のように表示されます。
大きさを変えたい文字
スタイルシートを使うとFONT要素より柔軟に文字の大きさを指定できます。
次の例は10�@、8�@、6�@、4�@の大きさを定義して、段落要素
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>スタイルシートでフォトサイズ</TITLE>
<STYLE type="text/css">
.F10 { font-size: 10mm; }
.F8 { font-size: 8mm; }
.F6 { font-size: 6mm; }
.F4 { font-size: 4mm; }
</STYLE>
</HEAD>
<BODY>
<P>ここは<SPAN class="F10">10�@</SPAN>の文字。つぎは
<SPAN class="F8">8�@</SPAN>の文字。今度は
<SPAN class="F6">6�@</SPAN>、最後に<SPAN class="F4">4�@</SPAN>です。
</BODY>
</HTML>
色の指定には色の名前あるは色を示す16進数のコードを指定します。色の名前と コードを表に示します。
色を示す16進数のコードは#で始まり、最初の2桁が赤、次の2桁が緑、最後の2桁 が青の成分を表します。この三色を0からFF(255)までの256段階で指定します。
| 色名 | 16進数 | 色名 | 16進数 |
|---|---|---|---|
| BLACK | #000000 | RED | #FF0000 |
| GREEN | #00FF00 | BLUE | #0000FF |
| YELLOW | #FFFF00 | FUCHSIA | #FF00FF |
| AQUA | #00FFFF | WHITE | #FFFFFF |
| PURPLE | #800080 | OLIVE | #808000 |
| MAROON | #800000 | SLIVER | #C0C0C0 |
| TEAL | #008080 | NAVY | #000080 |
| GRAY | #808080 |
文字に対する色指定はFONT要素かスタイルシートで行います。
color属性に色名か16進数の色コードを指定します。
<FONT color="色名">文字</FONT>
まず、スタイルを定義します。たとえば、クラスC1が赤を、C2が青を指定するものとすると、次のように定義しておきます。
<STYLE type="text/css">
.C1 { color: red; }
.C2 { color: blue; }
</STYLE>
スタイルを定義したら色を指定したい段落などで次のようにクラスを指定します。
<P class="C1">なんたらかんたら
スタイルを使うほうが、色を変更したいときに非常に簡単に対応できます。
文書内にキーボードから入力できない特殊な文字を入力したいときは次の表のタ グを使います。すべての記号はこちらにあります。
ネットスケープとエクスプローラでは表示が異なります。
| 表示 | タ グ | 表示 | タ グ |
|---|---|---|---|
| 空白文字 | | & | & |
| ® | ® | < | < |
| > | > | © | © |
| " | " | ¢ | ¢ |
| x² | x² | ¥ | ¥ |
| £ | £ | x³ | x³ |
| ± | ± | ¬ | ¬ |
| ´ | ´ | | ­ |
| · | · | ¶ | ¶ |
| » | » | « | « |
| ¼ | ¼ | § | § |
| µ | µ | ½ | ½ |
段落と段落、項目と項目の区切りをはっきりさせるために水平線を引くHR要素があ ります。HRはHorizontal Ruleの略です。
<HR align="値" width="値" size="値">
この要素には揃え、幅、太さを指定するalign、width、size属性があります。
| 属性 | 意味 | 指定する値 |
|---|---|---|
| align | 表示位置指定 | left、center、right |
| width | 線幅 | 数値 |
| size | 線の太さ | 数値 |
HR要素の使用例を以下に示す。