文字サイズと色の変更

どどぉ~ん！ 毎度♪

はい。こんだけです。今日の話題は。

<span style="font-size: 32px; color: #ff0000;">どどぉ~ん！ 毎度♪</span>

とやってるだけ。32pxを48pxとすればもっと大きな文字になり、#ff0000を#ffff00とすれば黄色い文字になります。

はい？　#ff0000の意味がよくわからない？

ま、そやろね。そう思って、

カラーチャートを用意しました！

カラーチャート：黒背景　　　カラーチャート：白背景

簡単に説明すると、これは光の三原色であるRed/Green/Blueを16進数の値で指定したものです。って、これだけではイメージも沸きにくいでしょうから、この記事の後半にあるカラーチャートを見てくださいね。ブログ教室よりも、色数は多いですからね！

ブログ教室では<font>タグを使用すると説明されてますが、HTMLの規約を検討しているW3Cってとこでは、<font>タグは非推奨となっています。

なので、ここでは<span style="・・・">って書き方を説明してるんですけどね。でも、どっちでも使いやすい方でいいですよ。

ちなみに、<span>~</span>で囲むと、何故か改行がきかなくなります。私が使っているFireFoxのバグかな？と思ったのですが、IEでもOperaでも同じ現象になります。
別のところでやってるWebページ

Shot Bar - 月の雫 -　　（ちょっと宣伝(笑)）

ではOKやのに、so-net blogやとなんでやねん？？？

なので、<span>~</span>で囲んだ途中で改行を入れたい場合は、<br />を入れます。

<span style="font-size: 12px; color: #ff0000;">改行
無効！</span>

---

<span style="font-size: 12px; color: #ff0000;">改行<br />入り！</span>

とやれば、

改行 無効！

---

改行
入り！

ってな感じになります。比較すると、一目瞭然ですね。

ではでは、お待たせしました。カラーチャートをご覧ください。

カラーチャート：黒背景

■#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

　

カラーチャート：白背景

■#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

同じ色でも、背景が変わると見た感じが変わるもんやねー。ちなみに16進数の値は、

　　00/33/66/99/cc/ff

の6パターンしか使ってませんが、これだけでも216色あります。使える数字は、

　　0/1/2/3/4/5/6/7/8/9/a/b/c/d/e/f

の16個（16進数やから当たり前か）あるので、実際には16の6乗で16777216色の表現ができます。
00/11/22・・・ee/ffの16パターンを使ったとしても、16の3乗で4096色。

でも、とりあえず216色あれば充分じゃないかな？と私は思ってます。絵を描くわけやないし。

そのほか、white/black/yellowなど色の名前でも指定できるのですが、ブラウザによって同じ名前でも違う色になるものがあるので、コンピュータに詳しくないかたは16進数は避けたいでしょうけど、自分の見せたい色を見て欲しいと思ってがんばってくださいね。

さてと、せっかくなので、私のやってるところのリンクを（何がせっかくだ？）。

　　Shot bar - 月の雫 -
　　能あるブタはツメがチョキ♪（Webページ版）
　　インターネットプロバイダーごっこ　Night Street ドット Net
　　能あるブタはツメがチョキ♪（裏blog）

コメント 8

こんばんちゃ！(o´艸｀)
ｶﾗｰﾁｬｰﾄ一目瞭然　色類も豊富ですね！！！
pokkotun<font color="#00afcc">色好きです♪
by pokkotun (2007-03-11 21:52) 

#00afcc、ターコイズブルーやね。pokkotun、いらっしゃい♪
最初は、そーゆー名前が付いた色ばっかり集めようかとも思ったんやけどね。でもま、色がバランス良く変化しているチャートの方が、使いやすいかな？って思ったので、こうしました。トータル4時間かけて書いた記事です。休みやゆーのに、暇なのがバレバレやな(汗)。
by 氷の翡翠 (2007-03-11 22:03) 

勉強になります！！ちなみに私はff9999色が好きです♡
by yukirdam (2007-03-13 00:04) 

おひさしぶりです、yukirdamさん♪
ラジオ出演も無事に終わり、なによりですね。そのうち、全国ツアーもお願いしますね！

#ff9999は特に名前は付いてないですが、サーモンピンクというか、赤すぎない、けれどオレンジって感じでもない色ですよね。
最初にコメントをくれたpokkotunはブルー系、yukirdamさんはピンク系、女性って、その２系統が好きなかたが多い様に思うのは気のせいでしょうか。
ま、何はともあれ、「勉強になります」って言ってくれたのは、嬉しいです。

blogというサービスが確立されて、HTMLを知らなくても情報発信ができる次代になりましたけど、色を変えたい・サイズを変えたいって欲求が結構多いことに気づいたので、こんなのを始めてみようと思った訳です。

こんなの=>『blog向上委員会』ってカテゴリ(笑)。

「こんなことやりたいんだけど、どうやったらいい？」なんて質問が来るようになったら、ちょっと嬉しいかも・・・です。
by 氷の翡翠 (2007-03-13 01:51) 

ご訪問ありがとうございます（＾ｖ＾）
カクテル＆ＢＡＲが大好きっこなので
嬉しいです♪いろんなオリジナルカクテル紹介を
楽しみにしておりまーす。
by ☆まゅみん☆ (2007-03-17 02:29) 

☆まゅみん☆さん、いらっしゃいませ♪　グリーンジャンボが当たらなかったのは、残念でしたね(笑)。もうちょい待てばサマージャンボがあるので、今度こそ売り場の吟味に頑張ってくださいね！
オリジナルカクテルは、新作にチャレンジ中です。いい感じに仕上がったらアップしますので、また遊びに来てくださいね！
by 氷の翡翠 (2007-03-17 03:51) 

すごく分かりやすいです♪
分からない人の身になって、書かれているので、
理解度が違います。
「そんなことも知らないの」とか「教えてあげる」的なところが、
無いのがすばらしいです。
ご親切にありがとうございます。
まず、文字列をコピーして使わせていただきました。
いろんな色の中から好みの色を探したいと思います。
by (2007-03-30 19:19) 

kuuさん、いらっしゃい！おひさしぶりですねー。
えらい「おほめ」の言葉を頂きましたが(苦笑)、そんな大したことではありませんよ。
私自身がネット（当時はパソコン通信）を始めた頃に、先人の方々にいっぱい教えてもらってとっても嬉しかった想いを、今の方々に伝えたいだけですから。
kuuさんのおっしゃる「そんなことも知らないのか」ってのは２ｃｈ系に多く見られる発言ですけど、そういう発言を好む方々は自分がネット初心者の頃の記憶がないアホですから、そんなん気にしない気にしない。
昔から、「聞くは一時の恥、聞かぬは一生の恥。」と言う名言がありますが、私は「聞く」ことは「恥」だとは思ってません。逆に、知っているということも、優れているとは思ってません。
お互い色んな話をして、一緒に知識を増やしていくってのが、とっても楽しいことだと思いませんか？
kuuさんの記事も、ほかの方々の記事も、私の知らないことをいっぱい教えてくれてますからね。ネットってのは情報交換の場なんですから、お互いに知らないことを情報交換しましょう。有益かどうかは聞く側の判断とか価値観によりますが、まずは情報自体がなければ話は始まらないんでね！
by 氷の翡翠 (2007-03-31 01:51)