色名称とカラーコードとRGB値をまとめた色見本です。
| 色 | 色名称 | カラーコード | RGB値(R,G,B) | コメント |
|---|---|---|---|---|
| lightcyan | #e0ffff | 224,255,255 | ||
| cyan | #00ffff | 0,255,255 | aquaと同じ | |
| aqua | #00ffff | 0,255,255 | cyanと同じ | |
| darkcyan | #008b8b | 0,139,139 | ||
| teal | #008080 | 0,128,128 | ||
| darkslategray | #2f4f4f | 47,79,79 |
| 色 | 色名称 | カラーコード | RGB値(R,G,B) | コメント |
|---|---|---|---|---|
| turquoise | #40e0d0 | 64,224,208 | ||
| paleturquoise | #afeeee | 175,238,238 | ||
| mediumturquoise | #48d1cc | 72,209,204 | ||
| aquamarine | #7fffd4 | 127,255,212 |
色名称とカラーコードとRGB値をまとめた色見本です。
| 色 | 色名称 | カラーコード | RGB値(R,G,B) | コメント |
|---|---|---|---|---|
| powderblue | #b0e0e6 | 176,224,230 | ||
| lightblue | #add8e6 | 173,216,230 | ||
| lightskyblue | #87cefa | 176,196,222 | ||
| skyblue | #87ceeb | 135,206,235 | ||
| darkturquoise | #00ced1 | 0,206,209 | ||
| deepskyblue | #00bfff | 0,191,255 | ||
| dodgerblue | #1e90ff | 30,144,255 | ||
| royalblue | #4169e1 | 65,105,255 | ||
| cornflowerblue | #6495ed | 100,149,237 | ||
| cadetblue | #5f9ea0 | 95,158,160 |
| 色 | 色名称 | カラーコード | RGB値(R,G,B) | コメント |
|---|---|---|---|---|
| lightsteelblue | #b0c4de | 172,196,222 | ||
| steelblue | #4682b4 | 70,130,180 | ||
| lightslategray | #778899 | 119,136,153 | ||
| slategray | #708090 | 112,128,144 |
| 色 | 色名称 | カラーコード | RGB値(R,G,B) | コメント |
|---|---|---|---|---|
| blue | #0000ff | 0,0,255 | ||
| mediumblue | #0000cd | 0,0,205 | ||
| darkblue | #00008b | 0,0,139 | ||
| navy | #000080 | 0,0,128 | ||
| midnightblue | #191970 | 25,25,112 |
色名称とカラーコードとRGB値をまとめた色見本です。
| 色 | 色名称 | カラーコード | RGB値(R,G,B) |
|---|---|---|---|
| white | #ffffff | 255,255,255 | |
| whitesmoke | #f5f5f5 | 245,245,245 | |
| snow | #fffafa | 255,250,250 | |
| ghostwhite | #f8f8ff | 248,248,255 | |
| mintcream | #f5fffa | 245,255,250 | |
| azure | #f0ffff | 240,255,255 | |
| ivory | #fffff0 | 255,255,240 | |
| floralwhite | #fffaf0 | 255,250,240 | |
| aliceblue | #f0f8ff | 240,248,255 | |
| lavenderblush | #fff0f5 | 250,240,245 | |
| seashell | #fff5ee | 255,245,238 | |
| honeydew | #f0fff0 | 240,255,240 | |
| lightyellow | #ffffe0 | 255,255,224 | |
| oldlace | #fdf5e6 | 253,245,230 | |
| cornsilk | #fff8dc | 255,248,220 | |
| linen | #faf0e6 | 250,240,230 | |
| lemonchiffon | #fffacd | 255,250,205 | |
| lavender | #e6e6fa | 230,230,250 | |
| beige | #f5f5dc | 245,245,220 | |
| lightgoldenrodyellow | #fafad2 | 250,250,210 | |
| mistyrose | #ffe4e2 | 255,228,225 | |
| papayawhip | #ffefd5 | 255,239,213 | |
| antiquewhite | #faebd7 | 250,235,215 |
| 色 | 色名称 | カラーコード | RGB値(R,G,B) |
|---|---|---|---|
| gainsboro | #dcdcdc | 220,220,220 | |
| lightgray | #d3d3d3 | 211,211,211 | |
| silver | #c0c0c0 | 192,192,192 | |
| darkgray | #a9a9a9 | 169,169,169 | |
| gray | #808080 | 128,128,128 | |
| dimgray | #696969 | 105,105,105 |
| 色 | 色名称 | カラーコード | RGB値(R,G,B) |
|---|---|---|---|
| black | #000000 | 0,0,0 |
色名称とカラーコードとRGB値をまとめた色見本です。
Web上では、色は基本的に「赤」「緑」「青」の3つの組み合わせで表現されます。 これは一般的には光の三原色(RGB値)と呼ばれるもです。
赤・緑・青にそれぞれ0～255の値を指定することで、あらゆる色が表現出来る様になっています。 絵の具を混ぜるといろんな色が作り出せるのと同じ雰囲気と思って頂ければよいかと。 以下のいくつかの例を見れば、直感的に理解できると思います。
| 赤 | 緑 | 青 | 色 | 赤 | 緑 | 青 | 色 | |
|---|---|---|---|---|---|---|---|---|
| 255 | 0 | 0 | 赤色 | 0 | 0 | 0 | 黒色 | |
| 255 | 0 | 255 | 紫色 | 118 | 118 | 118 | 灰色 | |
| 0 | 0 | 255 | 青色 | 255 | 255 | 255 | 白色 |
しかし、ホームページを作る時には0～255の数字ではなく00～ffという16進数が使われます。 ただ、16進数がわからない人でも下の色見本に載っている「カラーコード」や「色名称」をコピー＆ペーストすればOKなので、理系が苦手だという方もご安心下さい。
具体的な色とその色名称、カラーコードの一覧を掲載しています。色の系統毎にまとめておいたので、以下のリンク先のページをご覧下さい。
リンクを張るときや画像を表示させる時に必要になる知識の1つに「パス」というものがあります。
このページではそのパスについて説明していきます。
パスというのは、そのファイルがどこにあるのかを表す文字列のことです。
Webサイトの場合はURLのことになります。
URLの例としては、Yahoo!Japanの場合はhttp://www.yahoo.co.jp/のことで、Googleの場合はhttp://www.google.co.jp/のことになります。 ブラウザの↓部分に表示されている文字列のことです。
さてここで重要なのは、パスには2種類あるということ。
1つは絶対パス、もう1つは相対パスです。
では、次でそれぞれについて説明してきます。
[事前説明]
以下で出てくる/はフォルダ(ディレクトリ)の区切りという意味です。
たとえば、test/page.htmlという場合はtestフォルダ内のpage.htmlというファイルという意味になります。
Windowsの\と似たような意味と考えればOKかと思います。
絶対パスとは、URLを最初から最後まで全て記述したもののことを言います。
さっき上であげたhttp://www.yahoo.co.jp/やhttp://www.google.co.jp/は絶対パスということになります。
この絶対パスの特徴は、どのページに書いても問題が無いことです。
この絶対パスは、他のサイトやブログへリンクを張るとき、他サイトのバナーを表示する時に主に使います。
相対パスは、今書いているWebページから見てファイルがどこにあるかを記述したものです。
ちょっと分かりにくいので、例を示しながら説明していきます。
下のような構成のページがあったとします。
http://www.netgamebm.com/
∟index.html
∟ about.html
∟ bbs － bbs.html
∟ link － link.html
作業用フォルダの中にindex.htmlabout.htmlという2つのファイルとbbslinkという2つのフォルダがある。 bbsフォルダの中にはbbs.htmlというファイルが、linkフォルダの中にはlink.htmlというファイルがあるとします。
index.htmlからabout.htmlにリンクを張りたいと思った時。
■絶対パスでは
http://www.netgamebm.com/about.html
と書かないといけません。
■相対パスでは
about.html
とだけ書けばOKとなります。
つまり、index.htmlから見て同じフォルダの中にabout.htmlファイルがありますよということですね。
他のファイルの例も記してみます。
■index.htmlからみたbbs.htmlへの相対パス
bbs/bbs.html
■bbs.htmlからみたabout.htmlへの相対パス
../about.html
ここで出てきたのが../というものです。
これは、1つ上のフォルダ(ディレクトリ)にあるという意味です。 ..が1つ上という意味になります。
つまりは、1つ上は../、2つ上は../../、3つ上は../../../ってことになります。
このように、相対パスは自分のサイト内のファイルにリンクを張るときに使います。
絶対パスの様に長いURLを書かなくて良いし、サイトを引っ越した時に楽なのです。
絶対パスだと、引っ越した時に全てのサイト内へのパスを書き換えなきゃいけなくなりますので。
(例えばこのサイトの場合http://c.netgamebm.com/部分がhttp://c.netgamebm.com/ohikkoshi/に変わったら、絶対パスで書かれていたパスは全て書き直さなきゃいけなくなると考えると理解できるでしょうか。)