Loading...

第5回 カラーと背景のプロパティ CSS level 1 - ブロガー向けCSS入門

f:id:nasust:20161212143136j:plain


この記事は以下のブロガー対象としています。

  • ブログをカスタマイズしたい
  • 全くCSSの知識が無い

こんにちはnasustです。今回はCSS Level 1のカラーと背景のCSSプロパティを解説します。

color

colorプロパティはテキストの色を指定することが出来ます。

例:

<span style="color:red">こんにちは</span>

表示例:


こんにちは


ブログの文章で単にテキストの色を変えたい場合は、例のようにspanタグで色を指定するのが良いです。spnaタグは余計なスタイルが無いので純粋に色を指定するなどのCSSプロパティで良く使います。

カラーの値の種類

colorプロパティで指定できるカラーの値以下の種類があります。

  • #RRGGBB ⋯ 例: color:#FF0000
  • rgb(r,g,b) ⋯ 例: color:rgb(255,0,0)
  • カラー名 ⋯ 例 : color:red

この中で一番使用するのは#RRGGBBの指定する方法ですね。昔から殆どのデザイナーさんは、この形式で指定してます。

カラー名の一覧

基本的な色は以下の様に定義されています。 数値で表すより直感的なので、ブログの文章で色を変えたい場合に使用するのが良いと思います。

black
silver
gray
white
maroon
red
purple
fuchsia
green
lime
olive
yellow
navy
blue
teal
aqua

他に透明色と定義されているtransparentもあります。

また以下のページで拡張されたカラー名が紹介されています。

CSS Color Module Level 3

background-color

要素の背景の色を指定します。

例:

XXさん<span style="background-color:yellow">こんにちは</span>

表示例:


XXさんこんにちは


このように文字の背景色を指定することでマーカーぽく出来たりします。
h1などの見出しの背景を変えたり、bodyタグに指定することで、ページ全体の背景色を設定することが出来ます。

background-image

要素の背景に画像を指定します。
はてなブログのデザインの設定で背景画像指定する場合は、このプロパティが使用されていたりします。

background-image:url(xxxx)という書式で設定します。

例:

background-image:url(http://img.f.hatena.ne.jp/images/fotolife/n/nasust/20170108/20170108094756.jpg)

この例では、はてなフォトライフにアップロードした画像を使用しています。はてなブログのカスタマイズで背景に画像を使用したい場合は、はてなフォトライフにアップロードして使用します。

表示例:


背景画像がCSSで設定されています

background-repeat

背景画像の繰り替えし方法を指定します。繰り返し方法は以下の通りです。

  • repeat ⋯ タイル状に繰り返します
  • repeat-x ⋯ 横方向に繰り返します
  • repeat-y ⋯ 縦方向に繰り返します
  • no-repeat ⋯ 繰り返しをしません

例: repeat

background-repeat:repeat

背景画像がCSSで設定されています

例: repeat-x

background-repeat:repeat-x

背景画像がCSSで設定されています

例: repeat-y

background-repeat:repeat-y

背景画像がCSSで設定されています

例: no-repeat

background-repeat:no-repeat

背景画像がCSSで設定されています

background-attachment

背景画像をスクロールに合わせて移動するか、固定するか設定するプロパティです。

  • scroll ⋯ スクロールに合わせて移動する
  • fixed ⋯ 固定する

scroll

background-attachment:scroll

スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。

fixed

background-attachment:fixed

スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。
スクロールしてください。

background-position

背景画像の位置を指定します。以下の様に指定できます。

  • % ⋯ 割合で指定します。 例: 50% 50% ⋯ 左から50% 、上から50%
  • 数値 ⋯ pxなどの単位をつけて指定します。 例: 10px 15px ⋯ 左から10px、上から15px
  • 位置を表すキーワード
    • 横: left , center , right
    • 縦: top , center , bottom

例: 50% 50%

背景画像がCSSで設定されています

例: 10px 30px

背景画像がCSSで設定されています

例: center center

背景画像がCSSで設定されています

例: left bottom

背景画像がCSSで設定されています

例: right bottom

背景画像がCSSで設定されています

background

background系のプロパティを一括で指定します。

書式: background: background-color background-image background-repeat background-attachment background-position

例:

background: #CCCCCC url(photo.jpg) no-repeat

背景画像がCSSで設定されています

次回

第6回 テキスト関係のプロパティ - ブロガー向けCSS入門 - nasust life blog

ブロガー向けWEBデザイン入門に戻る