カテゴリー別アーカイブ: カラー指定

[CSS]RGBaでの色指定

こんにちは
もうすぐ夏休みで軽く浮き足立っているスタッフ「ほ」です。

これまでも2回ほどWebでの色指定をご紹介してきました。

[Web]カラーコード
[Web]カラーネーム

今回は、RGBaでの色指定をご紹介します。

RGBaは、以下のように指定を行います。

h2{background-color:rgba(255,0,0,0.5);}

のように指定を行います。

RGBaの「RGB」部分に関しては、

  • Red
  • Green
  • Blue

の各色を表しています。

RGBカラーは赤、緑、青の光の強さをそれぞれ256段階で指定して、その色の混ぜ合わせで様々な色を表現します。

各色の指定は「0」~「255」までの数値で指定します。

「a」はalphaという単語の頭文字で「不透明度」のことです。

不透明度は「0」から「1」までの数値で小数値で指定します。

rgba(赤,緑,青,不透明度)

という並びで指定します。

例えば

rgba(255,0,0,0.5)

の指定だと、

  • 赤の光が最大
  • 緑の光は無し
  • 青の光は無し
  • 不透明度は50%

となるので、「半透明の赤」が表現されます。

半透明の表現ができるようになると、可能なデザインが広がりますので、ぜひお試しください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Web]カラーネーム

今日の朝、起きると外に雪が降ってました。

身支度をしているうちに、雪はどんどん強くなって、家を出るころには道路も真っ白、視界もかなり悪くなるほどの大雪になりました。

ところが、飯田橋についてみると、雪どころか晴れていて、地面も全く濡れてない…
長靴はいてこなくてよかったーと思ったスタッフ「ほ」です。

さて、今日は前回の続きです。

前回のエントリーでカラーコードのお話をしました。

Webでの色指定には、カラーコード以外に「カラーネーム」という方法がありまして、名前で指定できる色が用意されてるんですね。

aliceblue #f0f8ff
antiquewhite #faebd7
aqua #00ffff
aquamarine #7fffd4
azure #f0ffff
beige #f5f5dc
bisque #ffe4c4
black #000000
blanchedalmond #ffebcd
blue #0000ff
blueviolet #8a2be2
brown #a52a2a
burlywood #deb887
cadetblue #5f9ea0
chartreuse #7fff00
chocolate #d2691e
coral #ff7f50
cornflowerblue #6495ed
cornsilk #fff8dc
crimson #dc143c
cyan #00ffff
darkblue #00008b
darkcyan #008b8b
darkgoldenrod #b8860b
darkgray #a9a9a9
darkgreen #006400
darkkhaki #bdb76b
darkmagenta #8b008b
darkolivegreen #556b2f
darkorange #ff8c00
darkorchid #9932cc
darkred #8b0000
darksalmon #e9967a
darkseagreen #8fbc8f
darkslateblue #483d8b
darkslategray #2f4f4f
darkturquoise #00ced1
darkviolet #9400d3
deeppink #ff1493
deepskyblue #00bfff
dimgray #696969
dodgerblue #1e90ff
firebrick #b22222
floralwhite #fffaf0
forestgreen #228b22
fuchsia #ff00ff
gainsboro #dcdcdc
ghostwhite #f8f8ff
gold #ffd700
goldenrod #daa520
gray #808080
green #008000
greenyellow #adff2f
honeydew #f0fff0
hotpink #ff69b4
indianred #cd5c5c
indigo #4b0082
ivory #fffff0
khaki #f0e68c
lavender #e6e6fa
lavenderblush #fff0f5
lawngreen #7cfc00
lemonchiffon #fffacd
lightblue #add8e6
lightcoral #f08080
lightcyan #e0ffff
lightgoldenrodyellow #fafad2
lightgreen #90ee90
lightgrey #d3d3d3
lightpink #ffb6c1
lightsalmon #ffa07a
lightseagreen #20b2aa
lightskyblue #87cefa
lightslategray #778899
lightsteelblue #b0c4de
lightyellow #ffffe0
lime #00ff00
limegreen #32cd32
linen #faf0e6
magenta #ff00ff
maroon #800000
mediumaquamarine #66cdaa
mediumblue #0000cd
mediumorchid #ba55d3
mediumpurple #9370db
mediumseagreen #3cb371
mediumslateblue #7b68ee
mediumspringgreen #00fa9a
mediumturquoise #48d1cc
mediumvioletred #c71585
midnightblue #191970
mintcream #f5fffa
mistyrose #ffe4e1
moccasin #ffe4b5
navajowhite #ffdead
navy #000080
oldlace #fdf5e6
olive #808000
olivedrab #6b8e23
orange #ffa500
orangered #ff4500
orchid #da70d6
palegoldenrod #eee8aa
palegreen #98fb98
paleturquoise #afeeee
palevioletred #db7093
papayawhip #ffefd5
peachpuff #ffdab9
peru #cd853f
pink #ffc0cb
plum #dda0dd
powderblue #b0e0e6
purple #800080
red #ff0000
rosybrown #bc8f8f
royalblue #4169e1
saddlebrown #8b4513
salmon #fa8072
sandybrown #f4a460
seagreen #2e8b57
seashell #fff5ee
sienna #a0522d
silver #c0c0c0
skyblue #87ceeb
slateblue #6a5acd
slategray #708090
snow #fffafa
springgreen #00ff7f
steelblue #4682b4
tan #d2b48c
teal #008080
thistle #d8bfd8
tomato #ff6347
turquoise #40e0d0
violet #ee82ee
wheat #f5deb3
white #ffffff
whitesmoke #f5f5f5
yellow #ffff00
yellowgreen #9acd32

赤色を指定する時にカラーコードでは

p {color:#ff0000;}

または

p {color:#f00;}

と記述しますが、カラーネームでは

p {color:red;}

と指定します。

色数が限られているので、使うシーンは選びますが、白や黒、赤、青、緑、黄色などの基本色なんかは気軽に使えるので便利です。

僕たちインストラクターも、#ff0000と書くよりもredと書いた方が伝わりやすいと感じた時には使ってます。

みなさんも使えそうなシーンがあったら、ぜひ使ってみてください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Web]カラーコード

あっという間に年の瀬です。

今年の初めには、いろいろと目標を立てたのですが完遂出来た!と胸を張って言えるのはほとんどありません。

それでも!年が明けたらまた懲りもせずに目標を立てようと思うスタッフ「ほ」です。

今日はWebで使われるカラーのお話です。

講習では、文字や背景の色指定を行う際に
カラーコードを使っていただいてます。


p {color:#ff8800;}

このカラーコードというのは#の後ろにある6桁に意味がありまして、

最初の2桁が「赤」
中央の2桁が「緑」
最後の2桁が「青」
の光の強さを数値で表しています。以下の図のような感じです。

この「赤」「緑」「青」の3色は「光の3原色」と呼ばれる色で、RGBカラーなんて表現をします。
テレビやPCのモニタなどは、この3つの光を発して混ぜ合わせることで様々な色を作り出しています。

さて、このカラーコードは、赤・緑・青それぞれの光の強さを数値で表してる、と表現しましたが、なぜ「数値」なのに「アルファベットが含まれているのか?」という謎が出てきますね。

ここで使われている数値は「16進数」という方式が取られています。

通常、私たちが使っている数値は「10進数」という方式を取っていて、「10進むと1桁繰り上がる」というものですね。

書くまでもないですが、
1→2→3→4→5→6→7→8→9→10→11…
と進んでいきます。

カラーコードで利用されている16進数というのは
数字が「16進むと1桁繰り上がる」という方式です。

ただ、数字は16種類もありませんから、アルファベットを利用します。
16進数では、以下のように数字が進みます。

1→2→3→4→5→6→7→8→9→a→b→c→d→e→f→10→11…
(省略)…18→19→1a→1b→1c→1d→1e→1f→20→21…
(省略)…98→99→9a→9b→9c→9d→9e→9f→a0→a1→a2…

10進数では、2桁数値の最大値は「99」ですが、16進数での2桁数値の最大値は「ff」となります。

例えば、カラーコードが「#ff0000」の場合、
赤が「ff」ですから、赤い光が最大に発光しており、
緑と青が「00」ですので、まったく発光してない状態です。

つまり、上記の色コードは「赤」を示しています。

RGBは混ぜ合わせるといろいろな色が作り出せますが、簡単な図で表すと以下のようになります。

これを見ると、赤と緑を混ぜ合わせた色が黄色となりますので、これをカラーコードで表すと「#ffff00」になります。

緑と青を混ぜた色がシアン(水色)ですから、この色を表現したければ「#00ffff」となるわけですね。

それでは、白のカラーコードは何色になるかわかりますか?

白は赤・緑・青すべてを混ぜ合わせた色ですから、「#ffffff」となります。

では黒は?

黒は、光の世界では「真っ暗闇」のことを示しますので、「光がない状態」を作ればいいわけです。

よってカラーコードは「#000000」となります。

では、カラーコード「#999999」は何色かわかりますか?

これは白と黒の中間の色になりますから、グレーです。

基本、6桁全てが同じ色になる場合は無彩色になるため、白か黒かグレーになります。
数値が大きいほど白に近い明るいグレー、数値が小さくなるほど黒に近く暗いグレーになっていきます。

まぁ、そうは書きましたが、自分がつけたい色のカラーコードが頭でただちにコード化できる人なんてそうはいませんから、通常はインターネットを頼ってもらうのが一番だと思います。

GoogleやYahooの検索窓に「カラーコード一覧」と入力してみましょう。

親切なサイトがカラーコードの一覧表を作ってくれているはずです。

また、アプリケーションを使ってカラーコードを確認する方法もあります。

ここではPhotoshopを例にとって説明してみます。

Photoshopのツールバーの下部には、描画色と背景色を指定するボックスがありますが、このボックスをマウスでクリックすると、「カラーピッカー」というダイアログが開きます。

このダイアログの中央にあるカラフルなバーと、左側にある広いパレットを使って使用したい色を指定します。

すると、ダイアログ下部にカラーコードが表示されますので、ここの数値をCSSの指定で利用すればいいわけです。

また、画面右部にある「カラー」パネルでも確認が可能で、パネル右上にあるメニューを開き、中から「Webカラースライダ」を選択してください。

RとGとBの数値が16進数表記に変わります。

ここで色の調整を行い、R・G・Bの数値をつなぎ合せたものがカラーコードとなります。

上記の設定の場合は、#31f496になるということですね。

ちなみにカラーコードは6桁で表現をしますが、R・G・Bそれぞれがゾロ目になっている場合に限り、3桁で表現をすることが可能です。

#000000→#000
#ffffff→#fff
#ff0000→#f00
#442200→#420

といった感じで2桁を1桁にまとめて指定をします。

どれか1つでもゾロ目になっていない部分があると3桁で書くことはできません。

色の指定は、実はこのカラーコード以外にも指定方法があるのですが、ちょっと長くなってしまったので、その話は次回したいと思います。

HTMLやCSSをしっかりと身につけたい!という方はバンフートレーニングスクールのWeb基礎講座にてお待ちしております。

さて、スタッフ「ほ」としては、これが今年最後の更新となります。
少し早いですが、皆様よいお年を。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ