文字色の変更【color】:CSS入門

ブログが作りたい!CSS入門 > 文字色の変更【color】:CSS入門

文字色の変更【color】:CSS入門

文字色の変更【color】:CSS入門

CSS入門(5)

文字の色を変更したいときは、CSSの「color」を使います。

記事「背景色の変更【background-color】:CSS入門」での背景色の変更と要領は一緒ですから、今回は簡単に出来てしまうはずです。

あなたは、成長した自分の姿に目を細めることでしょう。ほーっほっほっ。お話は、次の順番で進みます。

▲ページの先頭に戻る

文字の色を変更してみましょう

1:「color」を使ってみましょう

(01)

さて、前回は、大見出し(<h1>タグ)の背景色を変更したわけですが、選んだ背景色によっては、文字が見難くなっているのではないでしょうか。

背景色がMidnight Blueで、文字が黒色では、ほぼ読み取ることができません。見難いです。

ブラウザで表示

(02)

これでは、お客様に「帰ってくれ!」と言っているようなものです。文字の色を変更しましょう。ねっ、そうしましょう。

テキストエディタで、CSSファイルを開いてください。次のようになっているはずです。

これを、次のように、「color」を使って、文字の色を「#ffffff(白色)」に設定してCSSファイルを保存してみましょう。

いかがでしょう?何か分からないところはありませんか?大丈夫ですか?

適用先

<h1>タグの

何を?

文字の色(color)を、

どうする?

白色(#ffffff)にする。

(03)

それでは、HTMLファイルを、ブラウザに放り投げて表示してみましょう。はっきり見出しが読み取れるようになったはずです。

ブラウザで表示

▲ページの先頭に戻る

2:おまけ

(04)

CSSコードの書き方は、もちろん、次のように色の値を省略して書いても、OKです。

あるいは、次のように波括弧{}を揃えて書いても、OKです。自分が見易い統一したルールを考えてみてください。

▲ページの先頭に戻る

次回予告

次回は、無料写真素材 梅の花をご紹介しています。

引き続き CSSをご覧になりたい場合は、「罫線を描く【border】:CSS入門」をどうぞ。

▲ページの先頭に戻る

関連記事

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

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

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

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

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

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

12:レイアウト

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

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

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

« 「背景色の変更【background-color】」|「罫線を描く【border】」 »

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

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

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

こんにちは!

こんにちは!
桜の花と、梅の花の写真、全部見てきました!
桜9がすごく好きです。白い空に桃色と桜の木のちょっと赤い色は
本当に綺麗でした!

color、これ、背景色はbackground-colorなのに、
なんで文字はfont-colorじゃなくて、colorだけなんだ!
とかなり悩んだ事があります。
今はもう「そういうもんだ」と思って悩む事もなくなったけど^^;



color魔族の兄弟

ひろこさん、こんにちは。
コメントありがとうございます!(・∀・)/39

そ、それは、私の一番のお気に入りの写真ではありませんか!
珍しく良い撮影ができました。と言うか・・・偶然?

露出補正とホワイトバランスの設定を変えながら撮ってみたら、
ちょっとカメラ好きの人の気持ちが分かったような気がしました。

そうねーなぜに、colorだけなんでしょうね???(´Д`;)
逆に覚え難いよね。

シンクロ!!!

こんにちは!
えーKumaCrowさんが一番お気に入りの桜の写真を
自分も好きだ!と思えたのって、かなり嬉しいです!
ひゃほー!

写真撮影は、自分は普通のデジカメしか持ってないのですが
それすら機能使いこなせてないので、露出補正とかホワイトバランスとか
すごいですね!

こっちは寒い地方なんで、桜もやっとちらほら咲き始めてきた感じです。
今度写真とりにいこうかな^^

シベ超

ひろこさん、こんにちは。

いやぁ~、あたしたちってば、ほら・・・センスがいいじゃない?
どうしてもこう、何ていうのかしら、究極的なところで、
似通ってきちゃうんでしょうね。(´・ω・)(・ω・`)ねー

ほーっほっほ、ほーっほっほっ。

それはそれとして、私は普通のカメラですらないですよ。
トイカメラですもの。記事にもしていますが、Poraloid a520です。

今回は撮影していて、
カメラって、光を操る感覚がおもしろいなぁと思いました。

ひろこさんは北国なんですね。シベリアあたりですか?(・∀・)/ハスキー

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/263-f9f62d9b
 | トップページ | 

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
ありのごとくあつまりて