図書館員のコンピュータ基礎講座

HTML講座

2. フォントと色

【2005-04-02更新】

この章では字体を変える実習をおこないます。

2.文字の種類を変える

次に、（Bold）タグで文字を太字（ボールド）にしてみましょう。赤字部分を追加してください。

■ HTMLの記述「welcome.html」

<html>
<head>
<title>トップページ</title>
</head>
<body>
ようこそ！
</body>
</html>

■ ブラウザでの表示

ようこそ！

■ 解説
以外の良く使われるフォントの種類の見本は以下の通りです。

HTMLの記述	ブラウザでの表示
<b>太字（Bold）</b>	太字（Bold）
<del>取消線（Delete）付き</del>	~~取消線（Delete）付き~~
<em>強調（Emphasize）</em>	強調（Emphasize）
<i>斜体（Italic）</i>	斜体（Italic）
<ins>内容の追加（Insert）</ins>	内容の追加（Insert）
<u>下線（Underline）付き</u>	下線（Underline）付き
<s>取消線（Strikeout）付き</s>	~~取消線（Strikeout）付き~~
<strike>取消線（Strike-through）付き</strike>	~~取消線（strike-through）付き~~
<strong>強調（Emphasize）</strong>	強調（Strong）
通常の位置<sup>上つき</sup>（Superscript）	通常の位置^上つき（Superscript）
通常の位置<sub>下つき</sub>（Subscript）	通常の位置_下つき（Subscript）

<del>および<ins>タグは、Netscape Communicator 4.xではサポートしていません。

<s>および、<strike>タグは、HTML4.0で「非推奨」となりました。

3.文字の色を変える

次に文字の色を変えてみましょう。赤字部分を追加してください。

■ HTMLの記述「welcome.html」

<html>
<head>
<title>トップページ</title>
</head>
<body>
ようこそ！
</body>
</html>

■ ブラウザでの表示

ようこそ！

■ 解説

タグにcolor属性を指定すれば、文字の色を変えることができます。
共通するタグに対する属性が二つ以上ある場合は、のように、一つのタグ内に連続して記述することができます。また。属性で指定する値が、文字列の場合は「color="#ff0000"」のようにダブル・クォートで囲む必要があります（値が数値の場合は省略可。例えば「size=5」）。
色の指定は、色の三原色（厳密には「光の三原色」）である、RGB（赤=Red、緑=Green、青=Blue）の混ぜ合わせで指定します。
この方法で色を指定する場合には、まず先頭に「#」（シャープ記号）を付け、赤、緑、青の順に2桁づつの英数字を割り当てます。そして、それぞれの色を、「00～ff」（1桁の数字の順番は、0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F）の範囲で記述します。
例えば、「#ff0000」は、赤=ff、緑=00、青=00で、赤（■）になります。さらに、「#ffff00」は、赤=ff、緑=ff、青=00で、黄（■）になります。
また、「#000000」（■）、「#444444」（■）、「#888888」（■）、「#cccccc」（■）、「#ffffff」（■）のように三色を同じ分量だけ混ぜると、黒から白までのグレーのグラデーションになります。
加法混色の図色の指定方法

色指定の見本（抜粋）は以下の通りです。これらの色は、Webセーフ・カラーと呼ばれる、OSやブラウザなどの違いに左右されない色（216色）です。利用者の環境が異なっても同じ色を表示させたい場合などに指定します。

■#000000	■#000033	■#000066	■#000099	■#0000cc	■#0000ff
■#003300	■#003333	■#003366	■#003399	■#0033cc	■#0033ff
■#006600	■#006633	■#006666	■#006699	■#0066cc	■#0066ff
■#009900	■#009933	■#009966	■#009999	■#0099cc	■#0099ff
■#00cc00	■#00cc33	■#00cc66	■#00cc99	■#00cccc	■#00ccff
■#00ff00	■#00ff33	■#00ff66	■#00ff99	■#00ffcc	■#00ffff
■#330000	■#330033	■#330066	■#330099	■#3300cc	■#3300ff
■#333300	■#333333	■#333366	■#333399	■#3333cc	■#3333ff
■#336600	■#336633	■#336666	■#336699	■#3366cc	■#3366ff
■#339900	■#339933	■#339966	■#339999	■#3399cc	■#3399ff
■#33cc00	■#33cc33	■#33cc66	■#33cc99	■#33cccc	■#33ccff
■#33ff00	■#33ff33	■#33ff66	■#33ff99	■#33ffcc	■#33ffff
■#660000	■#660033	■#660066	■#660099	■#6600cc	■#6600ff
■#663300	■#663333	■#663366	■#663399	■#6633cc	■#6633ff
■#666600	■#666633	■#666666	■#666699	■#6666cc	■#6666ff
■#669900	■#669933	■#669966	■#669999	■#6699cc	■#6699ff
■#66cc00	■#66cc33	■#66cc66	■#66cc99	■#66cccc	■#66ccff
■#66ff00	■#66ff33	■#66ff66	■#66ff99	■#66ffcc	■#66ffff
■#990000	■#990033	■#990066	■#990099	■#9900cc	■#9900ff
■#993300	■#993333	■#993366	■#993399	■#9933cc	■#9933ff
■#996600	■#996633	■#996666	■#996699	■#9966cc	■#9966ff
■#999900	■#999933	■#999966	■#999999	■#9999cc	■#9999ff
■#99cc00	■#99cc33	■#99cc66	■#99cc99	■#99cccc	■#99ccff
■#99ff00	■#99ff33	■#99ff66	■#99ff99	■#99ffcc	■#99ffff
■#cc0000	■#cc0033	■#cc0066	■#cc0099	■#cc00cc	■#cc00ff
■#cc3300	■#cc3333	■#cc3366	■#cc3399	■#cc33cc	■#cc33ff
■#cc6600	■#cc6633	■#cc6666	■#cc6699	■#cc66cc	■#cc66ff
■#cc9900	■#cc9933	■#cc9966	■#cc9999	■#cc99cc	■#cc99ff
■#cccc00	■#cccc33	■#cccc66	■#cccc99	■#cccccc	■#ccccff
■#ccff00	■#ccff33	■#ccff66	■#ccff99	■#ccffcc	■#ccffff
■#ff0000	■#ff0033	■#ff0066	■#ff0099	■#ff00cc	■#ff00ff
■#ff3300	■#ff3333	■#ff3366	■#ff3399	■#ff33cc	■#ff33ff
■#ff6600	■#ff6633	■#ff6666	■#ff6699	■#ff66cc	■#ff66ff
■#ff9900	■#ff9933	■#ff9966	■#ff9999	■#ff99cc	■#ff99ff
■#ffcc00	■#ffcc33	■#ffcc66	■#ffcc99	■#ffcccc	■#ffccff
■#ffff00	■#ffff33	■#ffff66	■#ffff99	■#ffffcc	■#ffffff

また、一般的な色はその色の英語名で指定することもできます。例えば、「color="#ff0000"」は「color="red"」と記述することができます。

一般的に使用される色は以下の通りです。デフォルトは、「black」です。

HTMLの記述	ブラウザでの表示
デフォルトは黒（#000000）	デフォルトは黒（#000000）
<font color="black">■黒（#000000）</font>	■黒（#000000）
<font color="gray">■グレー（#808080）</font>	■グレー（#808080）
<font color="silver">■シルバー（#c0c0c0）</font>	■シルバー（#c0c0c0）
<font color="white">■白（#ffffff）</font>	■白（#ffffff）
<font color="fuchsia">■ピンク（#ff00ff）</font>	■ピンク（#ff00ff）
<font color="purple">■紫（#800080）</font>	■紫（#800080）
<font color="maroon">■栗色（#800000）</font>	■栗色（#800000）
<font color="red">■赤（#ff0000）</font>	■赤（#ff0000）
<font color="yellow">■黄（#ffff00）</font>	■黄（#ffff00）
<font color="lime">■ライム（#00ff00）</font>	■ライム（#00ff00）
<font color="green">■緑（#008000）</font>	■緑（#008000）
<font color="teal">■青緑（#008080）</font>	■青緑（#008080）
<font color="blue">■青（#0000ff）</font>	■青（#0000ff）
<font color="navy">■ネイビー（#000080）</font>	■ネイビー（#000080）
<font color="aqua">■アクア（#00ffff）</font>	■アクア（#00ffff）
<font color="olive">■オリーブ（#808000）</font>	■オリーブ（#808000）

※白のみ、背景を黒にしてあります。

CyberLibrarian : tips on computer for librarians, 1998-

HTML講座

2. フォントと色

1.文字の大きさを変える

2.文字の種類を変える

3.文字の色を変える