「colorプロパティ」CSSで文字や背景に色を付ける

Webデザインでは、CSSを使って装飾やレイアウトを行っていきます。そして、最も基本的なテクニックとして、文字や背景に色を付けるというものがあります。そのためには、「colorプロパティ」を使います。

colorプロパティは、どの要素にも使用できるものです。なので、段落や見出しなどのブロックレベル要素や特定のキーワードなどのインライン要素などにも適用できます。色を変えることでページのアクセントになるので、積極的に利用しましょう。

 

文字の色を変える

まずは、最も基本的な文字の色を変えることからです。

【CSS】
.color-sample {color: #FF0000; }

【HTML】
<p>テキストを<span class=”color-sample”>赤色</spam>に変える。</p>

上記の記述で、以下のような表示となります。今回は、テキストを赤色に変えてみました。

テキストを赤色に変える。

部分的に色を変えることで、注目度が高くなりますよね。重要な語句などは、色を変えて目立たせると良いでしょう。

 

背景に色を付ける

文字の色を変えるのではなく、背景の色を変えて目立たせる方法もあります。マーカーでラインを引いたような感じになるので、かなり注目度がアップするはずです。背景の色を変えるには、「background-colorプロパティ」を使います。

【CSS】
.backcolor-sample {background-color: #FFFF00; }

【HTML】
<p>背景を<span class=”backcolor-sample”>黄色</spam>に変える。</p>

上記の記述で、以下のように表示されます。

背景を黄色に変える。

background-colorプロパティも、ブロックレベル要素やインライン要素を問わず使用可能です。なので、Webページ全体に色を付けることもできますし、見出しに色を付けてメリハリを出すこともできます。

 

以上、文字や背景に色を付ける方法を紹介しました。利用頻度が多いものですから、確実に覚えておいてください。見やすいWebページを作るためには、このテクニックは必須だといえます。

サブコンテンツ

このページの先頭へ