本文へ

CyberLibrarian

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

HTML講座

2. フォントと色

【2005-04-02更新】

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

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

まず、文字の大きさを変えてみましょう。メモ帳を起動し、第1章で作成した「welcome.html」を開いてください。そして、下記のように赤字の部分を追加してください。

■ HTMLの記述「welcome.html」
<html>
<body>
<font size="5">ようこそ!</font>
</body>
</html>

■ ブラウザでの表示
ようこそ!

■ 解説
<font>タグに「size="5"」などと記述することにより、フォントのサイズを1~7までの範囲で指定できます。フォントのサイズの見本は以下の通りです。
この「size="1"」や「size="5"」の部分を「属性」と呼びます。指定しない場合に選択される属性のことをデフォルトといいます。フォントサイズを指定しない時に選択されるサイズ(つまり、デフォルト)は、「3」です。

HTMLの記述 ブラウザでの表示
デフォルトはフォントサイズ3 デフォルトはフォントサイズ3
<font size="1">フォントサイズ1</font> フォントサイズ1
<font size="2">フォントサイズ2</font> フォントサイズ2
<font size="3">フォントサイズ3</font> フォントサイズ3
<font size="4">フォントサイズ4</font> フォントサイズ4
<font size="5">フォントサイズ5</font> フォントサイズ5
<font size="6">フォントサイズ6</font> フォントサイズ6
<font size="7">フォントサイズ7</font> フォントサイズ7

非推奨<font>タグは、HTML4.0で「非推奨」となりました。

ページのトップへ

2.文字の種類を変える

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

■ HTMLの記述 「welcome.html」
<html>
<head>
<title>トップページ</title>
</head>
<body>
<font size="5"><b>ようこそ!</b></font>
</body>
</html>

■ ブラウザでの表示
ようこそ!

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

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>および<u>、<strike>タグは、HTML4.0で「非推奨」となりました。

ページのトップへ

3.文字の色を変える

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

■ HTMLの記述 「welcome.html」
<html>
<head>
<title>トップページ</title>
</head>
<body>
<font size="5" color="#ff0000"><b>ようこそ!</b></font>
</body>
</html>

■ ブラウザでの表示
ようこそ!

■ 解説

<font>タグにcolor属性を指定すれば、文字の色を変えることができます。
共通するタグに対する属性が二つ以上ある場合は、<font size="5" color="#ff0000">のように、一つのタグ内に連続して記述することができます。また。属性で指定する値が、文字列の場合は「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-