背景画像が自由自在！CSS3を活用しよう

Webサイトを作成する際、欠かせないのがCSSです。特にCSS3では背景の複数配置なども行えるようになり、デザインの幅が広がりました。この記事では、CSSで背景を扱う時のポイントをまとめてみました！

CSSファイルの導入方法

まずは基本のCSSの導入方法から確認していきましょう。CSSは、「HTMLコードの＜style＞＜/style＞の中に記述する方法」、「インラインに記述する方法」、「外部ファイルに記述する方法」の３通りがあります。この中でよく用いられるのは最後の「外部ファイルに記述する方法」です。

短いコードであればHTMLの中に記述する方法でも問題ありませんが、長いコードを記述する場合は外部ファイルを使用する方が分かりやすく、後の修正も楽になります。外部ファイルに記述されたCSSを読み込む場合は、まずHTMLコードの＜head＞＜/head＞部分に＜link rel=”stylesheet” type=”text/css” href=”〇〇〇（CSSファイルのタイトル）.css”＞を記述します。

HTML

＜!DOCTYPE html＞

＜html lang=”ja”＞

＜head＞

＜meta charset=”UTF-8″＞

＜title＞テスト＜/title＞

＜link rel=”stylesheet” type=”text/css” href=”example.css”＞

＜/head＞

＜body＞

＜/body＞

＜/html＞

これで、作成したCSSが反映されるようになります！ファイル名や拡張子(.css)を間違えると読み込むことができなくなりますので、注意しましょう。

 

背景色を指定する

では早速CSSを記述し、HTMLコードで作成したWebページの背景に色をつけましょう。

HTML

＜!DOCTYPE html＞

＜html lang=”ja”＞

＜head＞

＜meta charset=”UTF-8″＞

＜title＞テスト＜/title＞

＜link rel=”stylesheet” type=”text/css” href=”example.css”＞

＜/head＞

＜body＞

＜p＞アイウエオ＜/p＞

＜/body＞

＜/html＞

HTMLは上記のようになっています。このままだとWebページは下の画像のような状態です。

背景色を変更するにはCSSファイルに {background-color:背景色;}を記述します。
では、このページ全体を青色に変更してみましょう。ページ全体は＜body＞＜/body＞部分になりますので、CSSの記述は下記の通りです。

CSS

body {background-color:#0000ff（※青色のカラーコード）;}

カラーコードについてはこちらの記事を参照してください（WEBセーフカラー126色のカラーコード一覧と法則を知ろう！）
CSSを反映すると、下記の画像のようになります。

また、ページ全体だけでなく、文章の背景色だけを指定することもできます。この場合、文章は＜p＞＜/p＞の部分になりますので、下記のような記述になります。

CSS

p {background-color:#0000ff（※青色のカラーコード）;}

とても簡単ですので、自分のサイトにふさわしい色を選択して試してみてください。

背景に画像を挿入する

次は背景に画像を挿入する方法です。色の場合はbackground-colorプロパティでしたが、画像を使用する際は、background-imageプロパティを使用し、{background-image:url(“画像のURL”);} のように記述します。

CSS

body {background-image:url（haikei.png）;}

これを適用すると下記の画像のようになります。

こちらもファイル名や拡張子を間違えてしまうと反映することができなくなってしまうので、注意が必要です。また、背景画像は何も指定しないと繰り返し表示（初期値）となりますので、その点も注意してください。

画像の繰り返しの有効無効

前述したように、画像の繰り返し表示が初期値となっていますので、何も指定しないと同じ画像が何枚も表示されてしまいます。画像の繰り返し表示を無効にしたい場合は、{background-repeat:no-repeat;}を記述しましょう。

CSS

body {background-image:url（haikei.png）;
　　　background-repeat:no-repeat;}

表示される画像が一枚だけになりましたね。

逆に、背景画像を繰り返し表示したい場合は、CSSに{background-repeat:repeat;}を記述してもOKです。repeatが初期値になっていますので、あまり使うことはないかもしれません。

CSS

body {background-image:url（haikei.png）;
　　　background-repeat:repeat;}

画像の位置を指定して挿入する

画像の位置を動かしたいという場合は{background-position:指定したい位置;}を上記のCSSに追加で記述します。先ほどの画像を真ん中に配置すると、下記のような記述になります。

CSS

body {background-image:url（haikei.png）;
　　　background-repeat:no-repeat;
　　　background-position:center;}

ご覧の通り、画像が真ん中（center）に配置されました。

指定できる位置は

left 左側
center 真ん中
right 右側
top 上部
bottom 下部

の５つです。より具体的に指定したい場合はpxを使って指定します。

CSS

body {background-image:url（haikei.png）;
　　　background-position:300px 100px;}

一番目のpxは左からの位置（300px)、二番目のpxは上からの位置（100px)を指定しています。このように自由に場所を指定することができるので、是非活用していきましょう。

レイヤーを使用した画像の複数配置

ここからはCSS3独自の機能をご紹介していきます。CSS3では、まるでレイヤーを重ねるように、画像を複数配置することができるようになりました。記述の仕方もとても簡単です。

CSS

body
{background-image: url(背景1),url(背景2),url(背景3),…}

上記のようにカンマで区切るだけです。この場合は、1→2→3の順で画像が配置されることになります。

例として、「文字（text）」「ペンギンのイラスト（pengin)」「背景（haikei）」を配置してみましょう。CSSに下記のように記述します。

CSS

body
{background-image: url(text.png),url(pengin.png),url(haikei.png);
}

すると、ペンギンの文字→ペンギン→背景の順で配置されるようになります。とてもシンプルで分かりやすいですね。

ただ、初期値ではすべての画像位置が左上寄りになってしまいます。これを調整するには、前述と同じくbackground-positionプロパティを使用します。この時、background-imageと同じ順番で記述していきます。試しに「文字（text.png)」のみ中央に配置してみましょう。

CSS

body
{background-image: url(text.png),url(pengin.png),url(haikei.png);
background-position: center,auto,auto;
}

このように「文字（text.png)」のみ中央に配置され、他の画像はauto（初期値）になっています。もちろんpxでも位置指定することができるので、どこでも好きな場所に配置することが可能です。

例えば、サイトのロゴだけ変更になる場合等一部分だけ変更したい時でも、該当部分のみ変更すれば良いので作業効率を上げることができます。ぜひ活用していきましょう！

画像を表示範囲に合わせ自動調整する

従来のCSSでは、背景画像は表示する位置を調整することしかできませんでした。しかし、CSS3からは表示したい範囲に合わせて、画像を自動で拡大縮小してくれる機能が追加されました。これにより、より理想通りに背景画像を設置することができるようになったのです。

表示範囲全体を覆うように配置する

下の画像は自動調整をせずに、ただ背景画像を配置したものです。

CSS

body
{background-image:url(haikei2.jpg);}

これが初期値の状態です。こちらのCSSに{background-size:cover;}の記述を加えます。

CSS

body
 {background-image:url(haikei2.jpg); 
background-size:cover;}

すると、画像の縦横の比率を保ったまま、表示範囲全体に広がって配置されるようになります。ウィンドウサイズを変化してもこの状態は保たれます。

ただし、画像の縦横の比率と表示範囲の比率が合わない場合は、画像が一部切れる場合がありますので、注意が必要です。

表示範囲に画像全体が表示されるように配置する

上記の方法では、画像の比率が一致していない場合、画像が切れてしまうことがあります。
background-sizeプロパティにcontainを記載すると、必ず「表示範囲に画像全体が表示される」ように配置することができます。

CSS

body
{background-image:url(haikei2.jpg); 
background-size:contain;}

このように設定すると画像が切れることなく表示範囲に配置することができますが、表示範囲が画像より大きい場合は、画像が複数枚配置されてしまうことになります。それぞれの特性を理解して、より自分のサイトにあった方法を選びましょう！

画像にグラデーションをかける

CSS3では、グラデーションもとても簡単な記述で表示させることができるようになりました。

グラデーションを生成する

背景にグラデーションをかけるには、backgroundのプロパティにlinear-gradientを記述します。

CSS

body
{background:linear-gradient(グラデーションの角度,始点の色,終点の色}

角度はdegで指定します。0deg は下から上へ垂直のグラデーションが生成され、 90deg は左から右へ水平にグラデーションが生成されます。斜めにかけたい場合は70〜80あたりの数字を指定すると良いでしょう。

例えば、左下から右上へ黄色と青のグラデーションをかけると、このようになります。

CSS

body
{background:linear-gradient(70deg,rgba(255,255,0,1),rgba(0,191,255,1));}

 

グラデーションを画像にかける

先ほど記述したコードの後ろに、画像のURLを記述すれば、自動的にグラデーションの下に画像が表示されます。

CSS

body
{background:linear-gradient(70deg,rgba(255,255,0,0.4),rgba(0,191,255,0.4)),url(haikei2.jpg);}

グラデーションのみの場合は、rgbaでなくHTMLカラーコードを使用しても問題ありません。しかし、背景画像を設定する際はグラデーションを透過する必要がありますので、色の指定は必ずrgbaで指定するようにください。

このように、グラデーションもたった1行で表示させることができます！サイトの印象をガラッと変えたい時などは、ぜひ一度お試しください。

機能を活かしたサイト作りを！

以上のようにCSS3では、より自由に背景画像をカスタマイズすることができるようになっています。今回は背景画像に関する機能を中心に紹介しましたが、この他にもたくさん便利な機能が実装されていますので、フル活用して自分の理想に近いサイトを作っていきましょう。