お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

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

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

今回のCSS

  • ・文字色の指定
  • ・背景色の指定
  • ・背景画像の指定
の3つです。

文字色の指定

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

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

.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;
}

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