第5回 カラーと背景のプロパティ CSS level 1 - ブロガー向けCSS入門
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
- 次回
- 関連記事
この記事は以下のブロガー対象としています。
- ブログをカスタマイズしたい
- 全くCSSの知識が無い
こんにちはnasustです。今回はCSS Level 1のカラーと背景のCSSプロパティを解説します。
color
colorプロパティはテキストの色を指定することが出来ます。
例:
<span style="color:red">こんにちは</span>
表示例:
こんにちは
ブログの文章で単にテキストの色を変えたい場合は、例のようにspanタグで色を指定するのが良いです。spnaタグは余計なスタイルが無いので純粋に色を指定するなどのCSSプロパティで良く使います。
カラーの値の種類
colorプロパティで指定できるカラーの値以下の種類があります。
#RRGGBB
⋯ 例: color:#FF0000rgb(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
もあります。
また以下のページで拡張されたカラー名が紹介されています。
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)
この例では、はてなフォトライフにアップロードした画像を使用しています。はてなブログのカスタマイズで背景に画像を使用したい場合は、はてなフォトライフにアップロードして使用します。
表示例:
background-repeat
背景画像の繰り替えし方法を指定します。繰り返し方法は以下の通りです。
- repeat ⋯ タイル状に繰り返します
- repeat-x ⋯ 横方向に繰り返します
- repeat-y ⋯ 縦方向に繰り返します
- no-repeat ⋯ 繰り返しをしません
例: repeat
background-repeat:repeat
例: repeat-x
background-repeat:repeat-x
例: repeat-y
background-repeat:repeat-y
例: no-repeat
background-repeat:no-repeat
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%
例: 10px 30px
例: center center
例: left bottom
例: right bottom
background
background系のプロパティを一括で指定します。
書式: background: background-color background-image background-repeat background-attachment background-position
例:
background: #CCCCCC url(photo.jpg) no-repeat
次回
第6回 テキスト関係のプロパティ - ブロガー向けCSS入門 - nasust life blog |