インターネットビジネスのあらゆる手法を解説します。アイデアで稼げるサイト構築を目指します。自分に合ったビジネスに取り組み、金脈を発掘しましょう!

背景を変えよう

 
この記事を書いている人 - WRITER -
HN:しょう太郎 居酒屋経営しながら、アフィリエイトしています。行動力と収入は比例する「ヒミツの手法」を学び、楽しみながら人生を過ごしています。 自分で学び(Input)、人に教えること(Output)で、共に成長し喜び合える仲間を大切に思っています。

Webページ全体に背景色をつけたり、背景画像を表示したりすることができます。

その具体的な方法を見てみましょう。

 

背景色を指定

背景に色をつけるには『background-colorプロパティ』を使います。

これは、ブロックレベル要素とインライン要素の両方に適用することができます。

すなわち、Webページ全体に背景色を設定したり、見出しの背景に色をつけたりできます。

見出しに背景をつけると、文書構造の違いを視覚化でき、デザイン面でもメリハリがつきます。

例えば、body要素とh3要素の背景に色を指定するには、

body  {  background-color:#ffffe8; }

h3  {  background-color:#ffe68b; }

のように記述します。

 

背景に画像を指定

背景に画像を指定するには『background-imageプロパティ』を使います。

これも、ブロックレベル要素、インライン要素問わず、すべての要素に適用することができます。

「background-image:url( ファイル.png);」

のように記述し、()内には画像のURLを指定します。

 

背景画像をタイル状に並べる指定

h3 { background-image: url(img/bg.png); }

 

背景画像の繰り返し指定

『background-repeatプロパティ』を使うことで、繰り返し方法を細かく指定できます。

例えば、

h2 {

background-image: url(img/bg.png);

background-repeat: repeat-x;

}

h3 {

background-image: url(img/bg.png);

background-repeat: no-repeat;

}

p {

background-image: url(img/bg.png);

background-repeat: repeat-y;

}

のように指定すると、h2は横方向に画像を繰り返し、

h3は繰り返しなし、

pは、縦方向に繰り返されます。

 

特定の位置に画像を指定

特定の位置を指定するには、『background-positionプロパティ』を使います。

何も指定しなければ、背景画像は要素の左上が開始位置となります。

画像の開始位置を指定するには、

「background-position:50%  100%」

のように記述します。

最初の数値は横方向、次の数値は縦方向を意味し、それらを半角スペースで区切ります。

値の指定には%(要素の左上からの相対的な位置)を用いたり、

ピクセルで細かく指定することができます。

また、横方向には『left(左)』、『center(中央)』、『right(右)』のいずれか、

縦方向には『top(上)』、『center(中央)』、『bottom(下)』のいずれかを記述して位置を指定できます。

 

背景色と背景画像の同時指定

『backgroundプロパティ』を使って、背景色と背景画像(位置指定と繰り返し指定)を同時に指定することができます。

従来は背景画像の複数指定はできませんでしたが、CSS3では可能になっています。

h2  {

background:  #ffe3e3  url(img/bg-h.png)  no-repeat  5px  center;

padding:  5px  5px  5px  30px;

}

のように記述します。

 

まとめ

  1. 背景色は、background-colorで指定する
  2. 背景画像は、background-imageで指定する
  3. backgroundプロパティは、色と画像を一括指定できる
  4. CSS3を使うと、背景に複数の画像を適用できる

 

この記事を書いている人 - WRITER -
HN:しょう太郎 居酒屋経営しながら、アフィリエイトしています。行動力と収入は比例する「ヒミツの手法」を学び、楽しみながら人生を過ごしています。 自分で学び(Input)、人に教えること(Output)で、共に成長し喜び合える仲間を大切に思っています。

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© ゼロからの収入! , 2016 All Rights Reserved.