テキストをあれこれしたり、背景を設置したり

始まりましたCSS。今回はテキスト装飾やら、背景についてです。

今回のCSS

・文字色の指定
・背景色の指定
・背景画像の指定

の３つです。

文字色の指定

基本系として以下２つ覚えていれば問題ないと思います。

テキストの色がかわる
テキストの色がかわる

.testClass
{
  color:#RRGGBB;
  color:#RGB;
}

細かい色の指定の場合は、RRGGBB形式で記述する必要があるのですが
黒や灰色等、同じものが並ぶ場合は特にRGB形式で記述します。
※ケチっぽいですがファイルサイズ節約の為です。

背景色の指定

要素に対して背景色を指定することができます。

背景の色がかわったなう

.testClass
{
  background-color:#RRGGBB;
  background-color:#RGB;
}

文字色指定と同じように、RGBは省略する事ができます。
こちらも省略できるなら省略したほうがよいですねっ

背景画像の指定

要素に対して背景画像を指定することができます。
背景画像の指定方法も実に様々であります。

また、背景画像と普通の画像の見分け方を少しだけ画像を右クリックしてみて、名前をつけて画像を保存　が出なければ背景画像ということになります。
また、範囲選択してもできないものは背景画像ということになります。

背景画像系のCSS

.testClass
{
  /** 背景画像の参照を行う **/
  background-image: url('../cmn/img/test01.png');

  /** 背景画像の位置の指定 **/
  background-position: 【左から見ての位置】 【上から見ての位置】

  /** 背景画像をループさせて表示させるかどうか **/
  background-repeat: 【プロパティ】;

  /** 背景画像を固定させるか同じようにスクロールするか **/
  background-attachment: fixed  または  scroll;
  ※fixedを指定した場合は固定、scrollの場合は同じようにスクロールします。
    初期値はscrollです。
}

各詳細に関しては例と一緒に続いて説明します。

背景画像を一つ配置したい場合

まじやで

.testClass
{
  background-image: url('../cmn/img/test01.png');
  background-repeat: no-repeat;
}

background-repeat: no-repeat;とすることにより、縦横にループして表示させないとなります。
これにより、要素内に一つだけ背景画像が表示されます。

背景画像をX軸(横軸)に並べて配置する

まじやで

.testClass
{
  background-image: url('../cmn/img/test01.png');
  background-repeat: repeat-x;
}

background-repeat: repeat-x;とすることにより、横にループして表示させます。
これにより、横方向へ目いっぱいに画像が連続して表示されます。
要素が広がればその分画像も表示されて行く形となります。

背景画像をY軸(縦軸)に並べて配置する

まじやで

.testClass
{
  background-image: url('../cmn/img/test01.png');
  background-repeat: repeat-y;
}

background-repeat: repeat-y;とすることにより、縦にループして表示させます。
これにより、縦方向へ目いっぱいに画像が連続して表示されます。
要素が広がればその分画像も表示されて行く形となります。

背景画像をXY軸(縦横軸)に並べて配置する

まじやで

.testClass
{
  background-image: url('../cmn/img/test01.png');
  background-repeat: repeat;
}

background-repeat: repeat;とすることにより、縦横にループして表示させます。
これにより、要素内目いっぱいに画像が連続して表示されます。
要素が広がればその分画像も表示されて行く形となります。

背景画像の配置位置を指定する

まじやで

.testClass
{
  background-image: url('../cmn/img/test01.png');
  background-repeat: no-repeat;
  background-position: 10px 20px;
}

background-position: 10px 20px;を指定しています。
background-position: 【左から見ての位置】【上から見ての位置】;となりますので、この例では
要素の左端から10px 要素の上から20pxの位置に表示、といった意味となります。
また、px指定ではなく、%での指定や、【left:center:right】【top:center:bottom】の書き方もできます。

背景画像の指定を一つにまとめる

まじやで

.testClass
{
  background: url('../cmn/img/test01.png') no-repeat 30px 40px;
}

様々なプロパティを分けて記述していましたが
１つにまとめる事ができます。
勝手に解釈してくれるので記述順の指定は特にありません。