色について知ろう
夕月「きたきたきたーキタ━━━━(゜∀゜)━━━━!! このネタを使えばまた読者の度肝を抜けるのだ。ふふふ、こうしちゃおれん、割烹を作らねば」
子「ねーねーママ、あの人何やってるのー？」
母「しっ、見ちゃいけません！」
こんにちは！そろそろネタ切れ感がしてきている夕月です。
そういえば最近は活動報告を”書く”ではなく”作る”という感覚になってきていますね。
どうしてこうなった。
そんなわけで、とある割烹芸人のテンプレート、5回目です。
今回は『色』について説明していきます。
活動報告では色を付けることができます。
その時の色の指定の仕方について今回は学んでいきましょう。
指定の仕方は大きく分けて3つあります。
・色名指定：red
・RGB関数指定：rgb(255,0,0)
・16進数指定：#ff0000
<span style="color:red;">色を変えるぞい</span>
<span style="color:rgb(255,0,0);">色を変えるぞい</span>
<span style="color:#ff0000;">色を変えるぞい</span>
図を見てわかる通り、これらはどれも同じ色になります。
自分の好きな指定方法でやってみてください。
それぞれの違いは説明しませんので興味があれば調べてみてください。
ここではテンプレなのでよく使うカラーを置いておきます。
カラー名 ,16進数, RGB値
black ＝ #000000 ＝ rgb(0,0,0)
gray ＝ #808080 ＝ rgb(128,128,128)
silver ＝ #C0C0C0 ＝ rgb(192,192,192)
white ＝ #FFFFFF ＝ rgb(255,255,255)
blue ＝ #0000FF ＝ rgb(0,0,255)
navy ＝ #000080 ＝ rgb(0,0,128)
teal ＝ #008080 ＝ rgb(0,128,128)
green ＝ #008000 ＝ rgb(0,128,0)
lime ＝ #00FF00 ＝ rgb(0,255,0)
aqua ＝ #00FFFF ＝ rgb(0,255,255)
yellow ＝ #FFFF00 ＝ rgb(255,255,0)
red ＝ #FF0000 ＝ rgb(255,0,0)
fuchsia ＝ #FF00FF ＝ rgb(255,0,255)
olive ＝ #808000 ＝ rgb(128,128,0)
purple ＝ #800080 ＝ rgb(128,0,128)
maroon ＝ #800000 ＝ rgb(128,0,0)
これらは、『カラーコード』で検索すると出てきますし、サイトによってはもっと細かい色も分かりますよ。
なお、色を指定できるのは文字、背景、ボーダーですね。
例えばこんな感じです。
<span style="color:red;background-color:#00ff00;border:2px solid #000000;">色を色々と変えるぞい</span>
color: 文字色
background-color: 背景色
border: ボーダー色(border-colorで指定してもいいけど形式と一緒の方がわかりやすい)
ということで、今回は色の説明でした。
では恒例のテンプレートです。
実際に活動報告に張り付けてみて色の表示を確かめてみてください。
※fontタグはHTML5では廃止されているのでstyleを使用しています。
※今後のことを考えるとなるべくfontタグは使わないほうがよさそうです。
※文字の装飾については次回説明します。
■色を変える
<span style="color:red;">色を変えるぞい</span>
<span style="color:rgb(255,0,0);">色を変えるぞい</span>
<span style="color:#ff0000;">色を変えるぞい</span>
色の指定は3つのうちどれでもいいぞ
・色名指定：red
・RGB関数指定：rgb(255,0,0)
・16進数指定：#ff0000
■文字、ボーダー、背景はこんな感じで指定するぞ
<span style="color:red;background-color:#00ff00;border:2px solid #000000;">色を色々と変えるぞい</span>
color: 文字色
background-color: 背景色
border: ボーダー(border-colorで指定してもいいけど形式と一緒の方がわかりやすい)
■色見本一覧 テンプレート
色を変えるのだ！
<span style="background-color:black;"> </span> black
<span style="background-color:gray;"> </span> gray
<span style="background-color:silver;"> </span> silver
<span style="background-color:white;"> </span> white
<span style="background-color:blue;"> </span> blue
<span style="background-color:navy;"> </span> navy
<span style="background-color:teal;"> </span> teal
<span style="background-color:green;"> </span> green
<span style="background-color:lime;"> </span> lime
<span style="background-color:aqua;"> </span> aqua
<span style="background-color:yellow;"> </span> yellow
<span style="background-color:red;"> </span> red
<span style="background-color:fuchsia;"> </span> fuchsia
<span style="background-color:olive;"> </span> olive
<span style="background-color:purple;"> </span> purple
<span style="background-color:maroon;"> </span> maroon
<span style="background-color:#000000;"> </span> #000000
<span style="background-color:#808080;"> </span> #808080
<span style="background-color:#C0C0C0;"> </span> #C0C0C0
<span style="background-color:#FFFFFF;"> </span> #FFFFFF
<span style="background-color:#0000FF;"> </span> #0000FF
<span style="background-color:#000080;"> </span> #000080
<span style="background-color:#008080;"> </span> #008080
<span style="background-color:#008000;"> </span> #008000
<span style="background-color:#00FF00;"> </span> #00FF00
<span style="background-color:#00FFFF;"> </span> #00FFFF
<span style="background-color:#FFFF00;"> </span> #FFFF00
<span style="background-color:#FF0000;"> </span> #FF0000
<span style="background-color:#FF00FF;"> </span> #FF00FF
<span style="background-color:#808000;"> </span> #808000
<span style="background-color:#800080;"> </span> #800080
<span style="background-color:#800000;"> </span> #800000
<span style="background-color:rgb(0,0,0);"> </span> rgb(0,0,0)
<span style="background-color:rgb(128,128,128);"> </span> rgb(128,128,128)
<span style="background-color:rgb(192,192,192);"> </span> rgb(192,192,192)
<span style="background-color:rgb(255,255,255);"> </span> rgb(255,255,255)
<span style="background-color:rgb(0,0,255);"> </span> rgb(0,0,255)
<span style="background-color:rgb(0,0,128);"> </span> rgb(0,0,128)
<span style="background-color:rgb(0,128,128);"> </span> rgb(0,128,128)
<span style="background-color:rgb(0,128,0);"> </span> rgb(0,128,0)
<span style="background-color:rgb(0,255,0);"> </span> rgb(0,255,0)
<span style="background-color:rgb(0,255,255);"> </span> rgb(0,255,255)
<span style="background-color:rgb(255,255,0);"> </span> rgb(255,255,0)
<span style="background-color:rgb(255,0,0);"> </span> rgb(255,0,0)
<span style="background-color:rgb(255,0,255);"> </span> rgb(255,0,255)
<span style="background-color:rgb(128,128,0);"> </span> rgb(128,128,0)
<span style="background-color:rgb(128,0,128);"> </span> rgb(128,0,128)
<span style="background-color:rgb(128,0,0);"> </span> rgb(128,0,0)
好きな色があればそれを使ってみてください。
サンプルは割烹サンプル3です。
