©2002 @Web. All rights reserved.
はじめに
ホームページはHTML(Hypertext Markup
Language)によって書かれています。HTMLを学習していきましょう。HTMLは、タグによって構成されています。このタグを詳細に説明したタグ辞典が種々販売されています。
タグ辞典というものは必要なのですが、初心者にタグ辞典が与えられてもいきなりホームページが書けるようになるわけではありません。それぞれのタグ項目には、あらゆるオプションが説明されており、初心者がまず憶えるべき基本をかえって分かりにくくさせています。小さなホームページを、色々な基本的タグの最も基本的な使い方を試しながらいくつも書いていくことで、次第に自分でもホームページが書けるようになります。初心者には、むしろなるべく少ないタグで基本的なホームページが書けることを理解してもらう方が学習効率は上がるように思えます。理解を明確にするためには、１つのテーマで簡潔なホームページを作成することがいいようです。本書では、思い切ってタグを限定してみました。
さらに、様々なタグを学習したい人は、タグ辞典などを参照して下さい。
また、フレームなど独習ではやや難しいテーマもあります。
何らかの誤りで、どうしてもうまくホームページが思った通りに表示されない場合にも、誤りを指摘してくれる指導者がいる方が学習意欲も増し、効率的学習ができます。
できるかぎり、落ち入りそうな誤りの例も指摘しながら、学習を進められるように配慮しています。
i-mode対応についても学習します。
HTML文書は、ヘッド部とボディ部から構成されます。
ヘッド部は、単純でとりあえずタイトルを書くと覚えておいてください。
ここにホームページの本体を構成する情報が記述される。
などの例からもわかるように、終了タグには"/"（スラッシュ：斜線）が追加されています。
<BR>は、改行(BReak)タグです。改行タグを入れなければ、ホームページ上では改行がおこりません。面倒ですが、改行させるためには、<BR>タグを使用してください。
<P>は、パラグラフ(Paragraph)タグで、段落換えをします。改行するとともに、スペースが空きます。
見出しは、自動的に左寄せに配置されます。
フォントサイズ１の大きさです
フォントサイズ２の大きさです
フォントサイズ３の大きさです
フォントサイズ４の大きさです
フォントサイズ５の大きさです
フォントサイズ６の大きさです
フォントサイズ７の大きさです
SIZEオプションを付けた<FONT>から</FONT>までに挟まれた部分が指定の文字サイズに変更になります。標準サイズは"3"です。
太字 強調する時などに使用する太字（ボールド体）にするためのタグです。<B>から</B>までのタグに挟まれた部分が太字になります。"B"は、"Bold"（太字）の"B"です。
斜体 同様に、斜体にして他の文字列と区別されることがあります。<I>から</I>までのタグに挟まれた部分が斜体になります。"I"は、"Italic"の"I"です。
下線（アンダーライン）を引いて強調することもあります。<U>から</U>までのタグに挟まれた部分に下線が引かれます。"U"は、"Underline"（下線）の"U"です。
中央揃え
中央に表示します
左揃え
左に表示します
右揃え
右に表示します
番号付きリスト(Ordered List)
番号なしリスト(Unordered List)
16進数 16進数２桁は、
文字色の指定−−三原色の配合比 以上のように、<FONT>タグ間の文字の色が、三原色の配合比率で指定した色になります。
あるいは、色名を用いてもまったく同様です。
文字色の指定−−色名
例．背景色−−緑 ここで、00FF00という三原色の配合比は、緑のみを最大にし、他の色が00であるので、緑を表している。
あるいは、色名を使って、 でも同様です。
まず、"IMG"ですが、これは"Image"（画像）からきています。また、"SRC"は、"Source"（源）からきています。「画像の源はここ(URL)」と言っているだけです。実に単純なタグです。後は、ブラウザの仕事になります。指定されたURLから画像を転送してきて、ホームページの該当する箇所に表示します。
ホームページ作成練習中の簡便な方法
ピクセル数とは、画面を構成する最小の点と考えて下さい。 640ピクセル × 400ピクセル
例 TH(Table Header
Cell)
ここで作成されたテーブルには、枠線がありません。枠線のあるテーブルを作成するには、<TABLE>タグにBORDERというオプションを付けましょう。
<FRAMESET> ・・・ </FRAMESET>
COLS属性 <FRAMESET COLS="">
ROWS属性 <FRAMESET ROWS="">
フレーム要素
一般型
演習課題 リンク集−−リストの入れ子
例 入れ子になったリンク集
これは、画面の左側を構成するホームページのソースです。１つの完全なホームページの画面を構成しています。
こちらは、画面の右側を構成するホームページのソースです。
3分割した下側の右画面を作成します。ここは、メニューの画面です。リンクを設定しておきますが、"TARGET"というオプションが付いて、リンク先の内容をどの画面に表示するか指定します。ここでは、"content"というNAMEをつけた、下側左画面を指定しています。
"content"というNAMEを付けた画面を作成します。この画面には、メニュー画面でクリックされた内容が表示されるのですが、とりあえず最初の画像を表示しておくことにします。
インライン・フレームは、画面の中に独立した画面を作ります。画面の中にちょうど別の画面が浮いているという意味で、フローティング・ウィンドウとも言われます。
５．１．太字（ゴシック：Bold）
例
表示例
ここが太字になります
５．２．斜体（イタリック：Italic）
例
表示例
ここが斜体になります
５．３．下線（アンダーライン：Underline）
例
表示例
下線（アンダーライン）
この部分に下線（アンダーライン）が引かれます
字消線（Strike-through）
例
表示例
字消線(Strike-through)
ここに字消線が引かれます
解説
<S>から</S>までのタグに挟まれた部分に字消線が引かれます。"S"は、"Strike-through"（字消線）の"S"です。
５．４．上付き添え字(SUPerscript)
上付き添え字は、数学の２乗などに使われる書式です。<SUP>から</SUP>までに挟まれた部分が上付き添え字となります。
例
表示例
上付き添え字(SUPerscript)
X2+Y2=Z2
５．５．下付き添え字(SUBscript)
下付き添え字は、化学式を書く場合などに使用されます。<SUB>から</SUB>までに挟まれた部分が下付き添え字となります。
例
表示例
下付き添え字(SUBscript)
2H+O -> H2O
行揃え
Paragraphタグ<P>に、ALIGNオプションを追加して画面の中での表示位置を指定します。
表示位置は、左(left)・中央(center)・右(right)の3種類です。
中央揃え
例
表示例
左揃え
例
表示例
右揃え
例
表示例
引用文の表示
文章を引用する時に、<BLOCKQUOTE>というタグを用います。
上下にそれぞれ１行のスペース行が挿入されるとともに、左右にもインデント（字下げ）が行われる。
書式
例
表示例
「これは、プーリタ夫人の息子よ。あなたは、想いを凝らし聞かれたか。強運の士よ、無知から生じた、あなたの迷いは、消滅したか。」
アルジュナ王子は答えた。
「不揺不滅の方よ、あなたの恵みにより、迷いは消え、記憶が蘇った。疑念は去り、私は確固となった。あなたの言葉を果たしましょう。」
スペース・改行を指定通りに表示
番号付きリスト(Ordered List)
番号付きリストを、"Ordered
List"といいます。従って、<OL>タグから</OL>タグに挟まれた項目が、番号付きリストとなります。各項目には、"List"からくるタグ<LI>を付けて下さい。"LI"（エル・アイ）であり、数字の"1"ではないことに注意してください。
改行することは当然ですので、改行のための<BR>タグは必要ありません。
例
表示例
番号なしリスト(Unordered List)
番号なしリストは、"Unordered
List"といわれます。従って、<UL>タグから</UL>タグまでに挟まれた項目が、番号なしリストとなります。リスト項目には、番号付きリストと同様に<LI>タグを付けます。
必ず改行しますので、改行のための<BR>タグは必要ありません。
例
表示例
横罫線(Horizontal Line)
横に罫線を引いて、区切りとすることがあります。その時は、"Horizontal
Line"からくるタグ<HR>を使用してください。このタグは単独タグです。
例
表示例
色指定−１−配合比指定
色は三原色から構成されます。RGBすなわち、Red・Green・Blueの三原色の配合の仕方で様々の色を作り出せるのです。色を作るには三原色の配合比率を指定すればいいのですが、この配合比は6桁の16進数で指定します。最初の2桁がRedの比率です。次の2桁がGreenの比率です。最後の2桁がBlueの比率です。
16進数
10進数
まず10進数の復習からしましょう。
1,2,3,4,5,6,7,8,9
ここで、桁上がりが起こります。桁上がりとは、その桁を0にして1つ上の桁に1を立てます。したがって、
10
となるわけです。ですから、10で桁上がりが起こる数、10進数と言われるわけです。
では、16進数はどうでしょうか。
1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
と数字が進みます。1から9までは10進数と同じですね。しかし、そこで桁上がりするわけにはいきません。10進数になってしまいます。数字がなくなってしまったので、アルファベットで代用します。それが、
A,B,C,D,E,F
です。Fが15に該当していることに注意してください。10進数では、10の直前の9の次に桁上がりが起こりましたね、16進数では、16の直前Fの次に桁上がりがおこります。すなわち、その桁を0にして1つ上の桁に1を立てるわけですね。
10
となります。
00 ・・・ 80 ・・・ FF
とだんだん大きくなります。80が中間です。
文字色の指定
文字色を特定の色に指定するには、<FONT>タグのCOLORオプションを使用します。
例
表示例
この部分の文字色は、FF0000という色、即ち赤になる
色指定−２−色名指定
例
表示例
この部分の文字色は、Red、即ち赤になる
色名と三原色(RGB)の配合率指定
色名
RGB配合率
サンプル
Black
#000000
Gray
#808080
Silver
#C0C0C0
White
#FFFFFF
Blue
#0000FF
Navy
#000080
Teal
#008080
Green
#008000
Aqua
#00FFFF
Lime
#00FF00
Yellow
#FFFF00
Magenta
#FF00FF
Olive
#808000
Purple
#800080
Maroon
#800000
Red
#FF0000
背景色の指定
ホームページの背景の色の指定も同様の指定方法を用います。<BODY>タグのオプションBGCOLORを使用して下さい。BGCOLORとは、
BGCOLOR ＝ BackGroundCOLOR（背景色）
背景色を意味しています。
背景に画像を貼り付ける
画像の挿入
テキストばかりでなく、画像を挿入することで人目を引くホームページが作成可能になります。画像挿入のためのタグは、
書式
URL(Uniform Resource
Locator)
簡単には、インターネットのアドレスという言い方もされます。正式な用語はURLで、インターネット上での「統一された資源の指し示し方」という方式を指す言葉です。
ホームページを作成練習している段階では、ホームページを構成するHTML文書と画像ファイルを同一フォルダ内に入れておけば、画像のファイル名だけで表示できます。
書式
例
表示例
画像をサイズを指定して挿入する−−ピクセル数による指定
書式
画面サイズの典型的な例
例
表示例
画像をサイズを指定して挿入する−−画面サイズとの相対比による指定
書式
例
表示例
書式
表示例
画面上に表示される文字
メール送信のリンク
書式
表示例
画面上の文字
画像にリンク
書式
表示例
テーブル
表（テーブル）の定義は、<TABLE>タグから始まって、</TABLE>で終わります。
書式
TR(Table Row)
<TR>タグは、表（テーブル）の各列を定義します。
書式
<TH>タグは、テーブルの見出し項目を作ります。
見出し項目は、太字で中央にセンタリングされて表示されます。
書式
TD(Table Data Cell)
<TD>タグで定義された項目欄に、各データが記入されます。
書式
例
表示例
学籍番号
氏名
年齢
s123456
山田太郎
18
s345678
今井美智子
18
枠線のあるテーブルの書式
書式
例
表示例
学籍番号
氏名
年齢
s123456
山田太郎
18
s345678
今井美智子
18
表の説明（キャプション）
例
表示例
学籍番号
氏名
年齢
山田太郎
s123456
18
今井美智子
s345678
18
フレーム
<FRAME SRC="ファイル名">
文書内リンク
リンクは非常に大事な機能です。外部の文書にリンクするばかりでなく、自らの文書内にリンクすることも可能です。文書内リンクは、位置名というものを自ら設定してその位置にリンクすることになります。
例
例 目次としての利用
目次
第１章
第２章
第３章
第４章
第１章
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・リスト・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
第２章
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・リンク・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
第３章
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・テーブル・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
第４章
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・フレーム・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
索引
テーブル
フレーム
リスト
リンク
演習課題 リンク集
リンクをリスト形式に羅列すれば、リンク集が出来上がります。リストですから、番号付きリストを作るタグを利用してリストにしましょう。
複雑なリンク集になる場合は、リストをいくつかに小分けして整理しなければならないかもしれません。これは、リストのリストという形にします。これを「入れ子」といいます。
例
表示例
バックグラウンド・サウンド
ホームページを表示した時に、音を鳴らすことができます。
動画像の表示
動画像を表示しましょう。
フレーム
縦分割−−パーセント表示
フレーム機能とは、画面を分割してそれぞれ個別の内容を表示する機能です。まず、画面を縦に分割してみましょう。
横分割−−ピクセル表示
次は、画面を横分割してみましょう。分割の割合の指定をパーセントではなく、ピクセル数（画素数）で指定することもできます。上側の画面を150ピクセルに指定します。では、下画面は何ピクセルでしょうか。それは、ユーザが使用している画面サイズにより異なります。そこで、画面の残りのピクセル数という意味で、"*"（アスタリスク）が使用できます。
画面の3分割
画面の縦分割と横分割を組み合わせることで、画面の3分割が可能になります。まず、100ピクセルと残りのピクセルで縦に分割し、分割の下側を、30%と70%に横に分割します。
インライン・フレーム
ラジオ・ボタン
チェック・ボックス
の二種類があります。
| フォント名 | 見本 | |
|---|---|---|
| ＭＳゴシック | 漢字見本ABCDEFGabcdefg | |
| ＭＳ Ｐゴシック | 漢字見本ABCDEFGabcdefg | |
| ＭＳ明朝 | 漢字見本ABCDEFGabcdefg | |
| ＭＳ Ｐ明朝 | 漢字見本ABCDEFGabcdefg | |
| Arial | ABCDEFGabcdefg | |
| Times New Roman | ABCDEFGabcdefg |
| <RUBY>〜</RUBY> | ルビをふる対象の文字列 |
| <RT> | ルビ（ふりがな） |
| <RP> | ルビ機能未対応の場合の区切り記号 |
ルビ機能が未対応のブラウザのために、ルビの区切り記号として、前後に"（"と"）"を用いるように指定しています。
| 番号の形式 | 例 | |
|---|---|---|
| 1 | 算用数字 |
|
| a | 英小文字 |
|
| A | 英大文字 |
|
| i | ローマ数字小文字 |
|
| I | ローマ数字大文字 |
|
| text | リンクしていない文字列の文字色 |
| link | リンクしていて、リンク先がまだ訪問されていない場合の文字色 |
| vlink | リンクしていて、リンク先が既に訪問されている場合の文字色 |
| alink | リンクしていて、クリック中の文字列の文字色 |
| 特殊文字 | 表記法 |
|---|---|
| < | < |
| > | > |
| " | " |
| & | & |
| size | 罫線の太さ（ピクセル単位） |
| width | 罫線の長さ（ピクセル単位、あるいはウィンドウに対する％表示） |
| align | 行揃え位置（left、right、center） |
| noshade | 影を付けない |
横罫線の長さが、ウィンドウサイズより短い場合は、中央に表示される。
width="20%"
width="40%"
width="80%"
align="right"
align="center"
| 見出し項目１ | 見出し項目２ | 見出し項目３ |
|---|---|---|
| データ項目１ | データ項目２ | データ項目３ |
| データ項目１ | データ項目２ | データ項目３ |
| width | 表の幅（ピクセル単位、あるいはウィンドウに対する％表示） |
| height | 表の高さ（ピクセル単位、あるいはウィンドウに対する％表示） |
| width | 表の幅（ピクセル単位、あるいはウィンドウに対する％表示） |
| height | 表の高さ（ピクセル単位、あるいはウィンドウに対する％表示） |
| left | 左揃え（TDにおいて、デフォルト） |
| right | 右揃え |
| center | 中央揃え(THにおいて、デフォルト） |
| justify | 両端揃え |
| cgar | 特定の文字位置 |
| top | 上 |
| middle | 中央（デフォルト） |
| bottom | 下 |
| baseline | 横方向1行目のベースライン |
| RGB配合率 | サンプル | |
|---|---|---|
| #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 |
| 色名 | RGB配合率 | サンプル |
|---|---|---|
| White | #FFFFFF | |
| Snow | #FFFAFA | |
| GhostWhite | #F8F8FF | |
| WhiteSmoke | #F5F5F5 | |
| FloralWhite | #FFFAF0 | |
| Linen | #FAF0E6 | |
| AntiqueWhite | #008080 | |
| PapayaWhipn | #FFEFD5 | |
| BalancedAlmond | #FFEBCD | |
| Bisque | #FFE4C4 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| PeachPuff | #FFDAB9 | |
| MistyRose | #FFE4E1 | |
| LavenderBlush | #FFF0F5 | |
| Seashell | #FFF5EF | |
| OldLace | #FDF5E6 | |
| Ivory | #FFFFF0 | |
| Honeydew | #F0FFF0 | |
| MintCream | #F5FFFA | |
| Azure | #F0FFFF | |
| AliceBlue | #F0F8FF | |
| Lavender | #E6E6FA | |
| Black | #000000 | |
| DarkSlateGray | #2F4F4F | |
| DimGray | #696969 | |
| Gray | #808080 | |
| Darkgray | #A9A9A9 | |
| Silver | #C0C0C0 | |
| LightGrey | #D3D3D3 | |
| Gainsboro | #DCDCDC | |
| LightSlateGray | #778899 | |
| SlateGray | #708090 | |
| LightSteelBlue | #B0C4DE | |
| SteelBlue | #4682B4 | |
| RoyalBlue | #4169E1 | |
| MidnightBlue | #191970 | |
| Navy | #000080 | |
| Darkblue | #00008B | |
| MediumBlue | #0000CD | |
| Blue | #0000FF | |
| DodgerBlue | #1E90FF | |
| CornflowerBlue | #6495ED | |
| DeepSkyBlue | #00BFFF | |
| LightSkyBlue | #87CEFA | |
| SkyBlue | #87CEEB | |
| LightBlue | #ADD8E6 | |
| PowderBlue | #B0E0E6 | |
| PaleTurquoise | #AFEEEE | |
| LightCyan | #E0FFFF | |
| Cyan | #00FFFF | |
| Aqua | #00FFFF | |
| Turquoise | #40E0D0 | |
| MediumTurquoise | #48D1CC | |
| DarkTurquoise | #00CED1 | |
| LightSeaGreenk | #20B2AA | |
| CadetBlue | #5F9EA0 | |
| Darkcyan | #008B8B | |
| Teal | #008080 | |
| SeaGreen | #2E8B57 | |
| DarkOliveGreen | #556B2F | |
| DarkGreen | #006400 | |
| Green | #008000 | |
| ForestGreen | #228B22 | |
| MediumSeaGreen | #3CB371 | |
| DarkSeaGreen | #8FBC8F | |
| MediumAquamarine | #66CDAA | |
| Aquamarine | #7FFFD4 | |
| PaleGreen | #98EB98 | |
| LightGreen | #90EE90 | |
| SpringGreen | #00FF7F | |
| MediumSpringGreen | #00FA9A | |
| LawnGreen | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| GreenYellow | #ADFF2F | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| YellowGreen | #9ACD32 | |
| OliveDrab | #6B8E23 | |
| Olive | #808000 | |
| DarkKhaki | #BDB76B | |
| PaleGoldenrod | #EEE8AA | |
| Cornsilk | #FFF8DC | |
| Beige | #F5F5DC | |
| LightYellow | #FFFFE0 | |
| Lightgoldenrodyellow | #FAFAD2 | |
| LemonChiffon | #FFFACD | |
| Wheat | #F5DEB3 | |
| Burlywood | #DEB887 | |
| Tan | #D2B48C | |
| Khaki | #F0E68C | |
| Yellow | #FFFF00 | |
| Gold | #FFD700 | |
| Orange | #FFA500 | |
| SandyBrown | #F4A460 | |
| DarkOrange | #FF8C00 | |
| Goldenrod | #DAA520 | |
| Peru | #CD853F | |
| DarkGoldenrod | #B8860B | |
| Chocolate | #D2691E | |
| Sienna | #A0522D | |
| SaddleBrown | #8B4513 | |
| Maroon | #800000 | |
| DarkRed | #8B0000 | |
| Brown | #A52A2A | |
| Firebrick | #B22222 | |
| IndianRed | #CD5C5C | |
| RosyBrown | #BC8F8F | |
| DarkSalmon | #E9967A | |
| LightCoral | #F08080 | |
| Salmon | #FA8072 | |
| LightSalmon | #FFA07A | |
| Coral | #FF7F50 | |
| Tomato | #FF6347 | |
| OrangeRed | #FF4500 | |
| Red | #FF0000 | |
| Crimson | #DC143C | |
| MediumVioletRed | #C71585 | |
| DeepPink | #FF1493 | |
| HotPink | #FF69B4 | |
| PaleVioletRed | #DB7093 | |
| Pink | #FFC0CB | |
| LightPink | #FFB6C1 | |
| Thistle | #D8BFD8 | |
| Magenta | #FF00FF | |
| Fuchsia | #FF00FF | |
| Violet | #EE82EE | |
| Plum | #DDA0DD | |
| Orchid | #DA70D6 | |
| MediumOrchid | #BA55D3 | |
| DarkOrchid | #9932CC | |
| DarkViolet | #9400D3 | |
| DarkMagenta | #8B008B | |
| Purple | #800080 | |
| Indigo | #4B0082 | |
| DarkSlateBlue | #483D8B | |
| BlueViolet | #8A2BE2 | |
| MediumPurple | #9370DB | |
| SlateBlue | #6A5ACD | |
| MediumSlateBlue | #7B68EE |