商品群メニューサイトマップ(商品詳細メニュー)
トップ >> ホームページ(HP)作成 >> CSSリファレンス:文字の色を指定する
ホームページ(HP)作成

CSSリファレンス:文字の色を指定する

テーマ:ホームページ(HP)作成ブログの編集
私の再履修を兼ねてCSSの機能を紹介していきます。

まず、一般的な定義済みの色には、以下のようなものがあります。


RGBコード   色名
#000000 black
#808080 Gray
#c0c0c0 silver
#ffffff white
#000080 navy
#008080 teal
#008000 green
#00ffff aqua
#00ff00 lime
#ffff00 yellow
#ff00ff fuchsia
#808000 olive
#800080 purple
#800000 maroon
#ff0000 red

基本的なカラーコードと色名の一覧。 コードは以下の通りです。ライブドアブログなら編集画面内にこのまま書いても動きます。(※・・・と言うか、実際動いてますので・・・黒く反転しているのは、背景と同系色のため変更してます)

<< CSSの色の定義 >>
ここでは、divタグに対し、色名とRGB色コードの定義づけを行っています。
色名には、任意の半角英数文字を指定できます。
※一部の記号文字やCSS、HTMLなどの予約文字は使えません。例えばコンマ'.'、ピリオド','、コロン':'、セミコロン';'など、予約文字'div'、'color'などはダメ。
※先頭文字は慣例としてアルファベットが望ましい。名称の先頭はアルファベットが望ましいと思います。CSSに限らずそのように覚えておくと、今後トラブルに悩まされる原因を一つ減らすことが出来ます。(なんちゃって確認するのが面倒なので当たり前のことを書いてしまいましたw)

<style type="text/css">
div.black { color:#000000; }
div.Gray { color:#808080; }
div.silver { color:#c0c0c0; }
div.white { color:#ffffff; background-color:#000000; }
div.blue { color:#0000ff; }
div.navy { color:#000080; }
div.teal { color:#008080; }
div.green { color:#008000; }
div.aqua { color:#00ffff; }
div.lime { color:#00ff00; }
div.yellow { color:#ffff00; background-color:#000000; }
div.fuchsia { color:#ff00ff; }
div.olive { color:#808000; }
div.purple { color:#800080; }
div.maroon { color:#800000; }
div.red { color:#ff0000; }
</style>
※補足:通常はHTML内の<BODY>タグの上に記述します。

<< 定義した色を使ってみる >>
実際に定義済みの'色名'を使用してみましょう。

<div class="black">#000000 black </div>
<div class="gray">#808080 Gray </div>
<div class="silver">#c0c0c0 silver </div>
<div class="white">#ffffff white </div>
<div class="blue">#0000ff blue </div>
<div class="navy">#000080 navy </div>
<div class="teal">#008080 teal </div>
<div class="green">#008000 green </div>
<div class="aqua">#00ffff aqua </div>
<div class="lime">#00ff00 lime </div>
<div class="yellow">#ffff00 yellow </div>
<div class="fuchsia">#ff00ff fuchsia </div>
<div class="olive">#808000 olive </div>
<div class="purple">#800080 purple </div>
<div class="maroon">#800000 maroon </div>
<div class="red">#ff0000 red </div>


HTMLで出来る内容ですが、スタイルシート(CSS)の基本的な使い方の初歩なので試してみましょう。
この方法では、段落単位の色設定なので、段落内の特定の文字に対して色を設定することは出来ません。

例えば:
『この文字 → <div class="red">赤</div> ← だけ赤にしたい!』
とすると・・・
『この文字 →
← だけ赤にしたい!』

のように3行になってしまいます。
これは、divタグが段落を意味するから。ここではCSS(カスケードスタイルシートの基本のみなので取りあえずここまでとします。

<< ワンポイント:RGBコード >>
赤:#FF0000
緑:#00FF00
青:#0000FF
黒:#000000
白:#FFFFFF

RGBでの色の3原色と白と黒。

多くの情報源から学ぶ → 情報いっぱいのブログ

■本ブログは、コメント/トラックバックを歓迎しておりますが、トラックバック/コメントをされる前に一度(…必ず…)お読みください (^.^) ね♪

この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/sakura_momo2/17314886
この記事へのトラックバック
■by アフィリエイト【アフィリエイトで、1ケ月566万売り上げた!】at 2005年03月27日 19:23
2月のアフィリエイトで、 売上げが566万を達成した。もちろん単位は、円である。利益は、いくらか?10%なら57万円。20%なら113万円。30%なら170万円である。もちろん、楽天なら1%で5万6千円。利益は、読者の想像におまかせしよう。では、どこ

TOP:ネット通販 くらべてチェック!

ジャンル:ホームページ(HP)作成

CSSリファレンス:文字の色を指定する
人気ブログランキングへ

<< 新しい記事以前の記事 >>