背景色の変更【background-color】:CSS入門

ブログが作りたい!CSS入門 > 背景色の変更【background-color】:CSS入門

背景色の変更【background-color】:CSS入門

背景色の変更【background-color】:CSS入門

CSS入門(4)

背景色を変更したいときは、CSSの「background-color」を使います。

背景の色を変更すると、ずいぶんと印象も違ってきますから、ジャンジャンバリバリ変えて行きましょう。

「あなたの色に染められたいの・・・なんつて」ってことで、お話は、次の順番で進みます。

▲ページの先頭に戻る

背景色を使ってみましょう

1:背景色について考えてみる

(01)

はじめに、前回の記事「CSSファイルの外部読み込み」で使った、次のコードを紐解(ひもと)いてみましょう。

body { background-color: #ffff00; }

これは、何をしていたのかと言うと、次のように言い換えることができます。

適用先

<body>タグの

何を?

背景色(background-color)を、

どうする?

黄色(#ffff00)にする。

(02)

ゆえに、ブラウザで表示すると、全体の背景が黄色になったわけです。

どうして「全体の背景」なのか分かるかしら?・・・そうです、<body>タグに適用しているからです。

よほど英語の苦手な人でなければ、「background-color」と聞けば、「あぁ、背景の色のことだね」と分かるでしょうから、これといって難しくないと思うのですが・・・・・・いかがなものでしょう?

ブラウザで表示

(03)

ちょっと問題なのは、その後の「#ffff00」ではないかしら?

「#ffff00」が黄色だなんて言われても、何のことだか訳が分からない人もいらっしゃると思います。

そのようなわけで、この色の値についてお話していきたいと思います。

▲ページの先頭に戻る

2:標準的な「色の値」の表記法

(04)

まず、「#」は単なる記号です。ここでは、「これから色情報を書きますよ」という開始の意味になります。その後の6つの英数字は、色情報を16進数で表しています。

2つずつ前から、光の三原色「R(Red)」、「G(Green)」、「B(Blue)」を表しています。

色情報(光の三原色)

「R=ff、G=ff、B=00のときは、黄色になりまっせ」と決まっているわけです。「誰が決めたのか?」って、それは、国会で決まった~のだぁ。

いかがですか?得体の知れないものも、少し情報が加わると、何となくイメージしやすくなるのではないでしょうか。

(05)

ところで、16進数はご存知かしら?おそらく、ご存知ない人の方が多いかもしれませんね。

みなさんは、数字を数えるとき、いくつで桁を繰り上げていますか?・・・・・・「そりゃ、10でしょ」と思った方、正解です。これは、10進数と呼ばれています。

16進数は?・・・・・・そうです。16で桁を繰り上げます。「0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f」です。

いえいえ、興味のある人は別ですが、16進数を詳しく覚える必要はありません。イメージだけ、つかんでください。

(06)

次の画像は、GIMPという画像編集ソフトの色を設定する画面です。イメージしやすくなると思うので、眺めてみてください。

つまり、「光の三原色」のそれぞれの数値を上下させることで、色を設定しています。数値が高いほど、明るくなります。

GIMPの色を設定する画面

何となく、「#ffff00」という値の表記法が、何を意味するものか分かったでしょうか?何となくで、OKなんだけれど・・・分かり難いですか?

それでは、絵の具を混ぜるときをイメージしてみてはいかがでしょうか。それぞれの色の分量を測って、混ぜ合わせるイメージです。

色を調合

▲ページの先頭に戻る

3:background-colorの使い方

(07)

さて、ここからが本番。「じゃあ、色を設定するのに、わざわざ、その数値を上下させて色を探さないといけないのか?」というと、そうではありません。

すでに世の中には、色見本、あるいはカラーチャートと呼ばれる「色の一覧表」が存在します。

このブログにも用意してあるので、良かったらご覧ください。「色見本(HTMLカラーチャート)」です。主だった色は、揃っています。

(08)

それでは、試しに<h1>タグの背景色を、好きな色に変更してみましょう。

CSSファイル「matome.css」を開いて、<h1>タグに色を付けるためのCSSコードを準備しておきます。「?」のところに、好きな色の値を入れるわけです。

(09)

色見本(HTMLカラーチャート)」のページを表示させて、好きな色を探しましょう。色が決まったら、#ではじまる色の値をコピーしてください。

好きな色情報をコピー

(10)

前述(09)でコピーした色の値を、貼り付けましょう。

(11)

ブラウザで表示させてみてください。<h1>タグの背景色が、指定した色で変更されているはずです。

ブラウザで表示

背景色によっては、「文字が読み難いよ」と感じている人もいらっしゃるかもしれませんが、記事「文字色の変更【color】:CSS入門」にて、変更します。

▲ページの先頭に戻る

省略表記

色の値は、省略して表記する場合があります。

例えば、「#ffff00」のように、「ff」、「ff」、「00」、3つともそれぞれが同じ英数字の場合は、省略して書くことが出来ます。

「#ffff00」は、「#ff0」と省略表記できます。分かるかしら?「#112233」ならば、「#123」です。

色の値の省略

「んげぇぇ!何で半分しかないんや~!」と驚かないためにも、覚えておきましょう。

▲ページの先頭に戻る

色名表記

色の値を、色名で表記してある場合もあります。

body { background-color: yellow; }

ただ、すべての色に色名が付いているわけもなく、たまーに、こういう書き方をする人もいらっしゃるようですが、最近は、あまり見かけません。

「何じゃこりゃ~!」と驚かない程度に、覚えておきましょう。

他にも10進数や割合で値を指定する方法もありますが、たいていは16進数で書きます。覚えなくても問題ありません。

▲ページの先頭に戻る

次回予告

次回は、文字の色を変更する【color】について書きます。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/04/11 更新日:2008/04/11

« 「CSSファイルの外部読み込み」|「文字色の変更【color】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

16進数

こんばんは!
背景色の#ffffffなどが16進数だとは知っていましたが、
16進数とはなんぞや、と言う事が実はわかっていなかったので
とても参考になりました。
そういう事なんですね。

ところで!省略できるのしらなかったです!
では、#ffffffならば#fff?
そういえば、以前、この様に記述されたcssを見て、ちょっと混乱した事が
ありますが、あれは省略だったのですね。

ががーん

色の値

ひろこさん、こんばんは。

そういう事なんです。
特に知らなくても困りませんが、
ちょっとでも知っておくとイメージしやすいかと思って、
書いてみました。(・∀・)/したー

省略表記もできるのです。
その通りです。#ffffffならば、#fffです。

おならプー。

1つのブログパーツのみ、背景色を変える

いつもお世話になっております。またまたご相談が2点ありまして。


【1】1つのブログパーツのみ、背景色を変える
このような事は可能でしょうか? 今使用しているテンプレートは画面全体に色・柄が入っており、「お知らせ」用のブログパーツの文字がその色に近くて見づらいのです。

文字色を変えることもアリかと思いますが、文字メインのパーツなので、可能なら背景画像が透けない方がうるさくないかと思いました。他のパーツは透けていた方が良いのです。文字の背景色を変えるのでは行間が透けて格好わるいかな…と。


【2】記事名と本文の間に、かなりのスペースが空いてしまう。
ブラウザ「IE」だけで、「GoogleChrom」「Firefox」は問題ないです。これが小耳に挟んだ「IEのバグ」という物なのでしょうか…。


私のURLを入れておきます(ハズかしいので後日削らせて頂くとかと)ので、ご都合のよろしい時にでも見て頂ければ嬉しいです。


【3】理想のテンプレート
どんな物がよいか知るためにも、カラム数が違う物や小説専用テンプレ等、しばらくは色々使ってみています。
替える度にKumaCrowさんの記事や過去レス等を見て、カスタマイズしています。
テンプレ毎に多少違いはあれど大枠は同じな感じで、そのちょっとした違いにカスタマイズの理解が深まります。
お陰様で何度か繰り返した作業は、こちらを拝見しなくてもできるようになりました。
あと2~3種類試したら基本を決めて、作り込みに入ろうかと思っています。
その際にはまた色々伺うかと思いますが、どうぞ宜しくお願い致します。 _(._.)_


【4】RSSフィード
ついでで申し訳ありませんが、一応ご報告を。
以前ちゃんと表示できないとコメントさせて頂いた事がありましたが、後日FC2に確認しました。

「GoogleChormeのブラウザ自体に、RSSをフィードする機能が元々実装されていないので、お客様のブログをご利用のユーザー様には、RSSリーダーを登録してください、などの
ご案内をしていただきますようお願い申し上げます。」

との事です。

HTMLとCSSのコード送付願い

にゃおさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。


【1】1つのブログパーツのみ、背景色を変える
> このような事は可能でしょうか?
> 今使用しているテンプレートは画面全体に色・柄が入っており、
> 「お知らせ」用のブログパーツの文字がその色に近くて見づらいのです。
>
> 文字色を変えることもアリかと思いますが、
> 文字メインのパーツなので、
> 可能なら背景画像が透けない方がうるさくないかと思いました。
> 他のパーツは透けていた方が良いのです。
> 文字の背景色を変えるのでは行間が透けて格好わるいかな…と。
>
どういった仕組みのテンプレートなのか分からないので、

テンプレート名と、いじくり回している場合は、
テンプレート・ブログパーツのHTMLとCSSのコードを

送っていただけますか。よろしくお願いいたします。


【2】記事名と本文の間に、かなりのスペースが空いてしまう。
> ブラウザ「IE」だけで、
> 「GoogleChrom」「Firefox」は問題ないです。
> これが小耳に挟んだ「IEのバグ」という物なのでしょうか…。
>
バグにしてはちょっとあき方が異常かも。

もともとこんな大きな不具合があるのなら、
配布されていないと思うので、

「お知らせ&つぶやき」にまつわる変更が影響している
可能性もありますよね。


【3】URL
> 私のURLを入れておきます
> (ハズかしいので後日削らせて頂くとかと)ので、
> ご都合のよろしい時にでも見て頂ければ嬉しいです。
>
URLは、すでにお伺いしてますから、大丈夫です。


【4】理想のテンプレート
> あと2~3種類試したら基本を決めて、
> 作り込みに入ろうかと思っています。
> その際にはまた色々伺うかと思いますが、
> どうぞ宜しくお願い致します。 _(._.)_
>
どうぞお気軽に~。ヽ(´ー`)ノ


【5】RSSフィード
> 「GoogleChormeのブラウザ自体に、
> RSSをフィードする機能が元々実装されていないので、
> お客様のブログをご利用のユーザー様には、
> RSSリーダーを登録してください、などの
> ご案内をしていただきますようお願い申し上げます。」
>
> との事です。
>
?(´Д`;)

質問と回答の内容がかみあっていないような気がしますが、
解決したのかしらん。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/262-533342eb
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて