CSSのプロパティ解説～背景編（色・パターン・画像）

今回は背景の装飾をします

こんにちは、ホームページ制作のオイゾウです！
前回「CSSのプロパティ解説～文字編（テキスト・フォント関連）」では文字を大きくしたり色を付けたりなど、文字に関するスタイルを指定する方法を紹介しましたが、今回は背景編ということで、色を付けたり画像を入れたりする方法です。
前回の文字と今回の背景を組み合わせるとかなりホームページのデザインも本格的な雰囲気に仕上がっていきますので、是非覚えましょう！

背景に色を付ける

背景は、何も指定しなければ色は白（#ffffff）です。
この背景に色を付けたり、グラデーションにしたり、画像を入れたりすることができますので、その方法を説明します。

ベースになるHTMLはこちら

このHTMLにスタイルを指定していきます。
[html]<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？</p>[/html]

色を付ける

[html highlight="2"]p {
background-color: #957171;
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？

背景をグラデーションにする

[html highlight="2"]p {
background: linear-gradient(#957171, #e7d1d1);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？

解説

「background」というプロパティで、値は「linear-gradient(色1, 色2)」というように指定します。
色1が上で色2が下です。
値を「linear-gradient(●deg, 色1, 色2」（●に角度を数値で入れる）にして角度をつけたり、値を「radial-gradient(色1, 色2)」にして円形グラデーションにすることもできます。

背景を画像で表現する

以下のようなもみじの写真画像を使い、背景に画像を入れる方法を説明します。

画像のファイル名；bg_momiji.jpg

[html highlight="2"]p {
background-image: url(https://oizo.jp/sample/images/bg_momiji.jpg);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？

背景をパターン（柄）で表現する

先ほどのように画像を入れるのですが、今回は写真ではなくお部屋の壁紙のような柄にします。
以下のような小さい画像を使います。

画像のファイル名；bg_pattern_sample.png

[html highlight="2"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？

解説

このように繰り返し表示され、柄の背景になります。

背景に指定した画像を繰り返し表示しない

「bg_pattern_sample.png」という画像は小さかったので、p要素の空いているスペースを全て埋めるように繰り返し表示されました。
今回は繰り返し表示させず、さらに表示位置を指定します。

[html highlight="2,3,4"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
background-repeat: no-repeat;
background-position: 50px 50px;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？

解説

「background-repeat: no-repeat;」と指定することで、繰り返し表示されなくなります。
さらに「background-position: 50px 50px;」とありますが、これは背景の位置が「左からの距離 上からの距離」です。
ただこれだと文字の背景に画像が中途半端な状態で入っていてとても違和感があるので、位置を変えてみます。

[html highlight="4"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
background-repeat: no-repeat;
background-position: 0 25px;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？

応用編・見出しを目立たせる

ここまで来れば、CSSでかなり表現できる幅も広がってきたことでしょう。
そこで最後に、文章の見出しをちょっと装飾してみたいと思います。

ベースになるHTMLはこちら

このHTMLにスタイルを指定していきます。
[html]<p>当店の芋まんじゅう</p>[/html]

使用する画像

この画像を背景に指定し、アイコンのように表示させます。
画像のファイル名；icon_manju.png

CSSの記述

[html]p {
background-image: url(https://oizo.jp/sample/images/icon_manju.png);
background-repeat: no-repeat;
background-position: 10px 10px;
background-size: 30px 30px;
height: 50px;
padding: 6px 50px;
border-bottom: solid 1px #919191;
border-right: solid 10px #b18247;
color: #6a222f;
font-size: 1.4em;
font-weight: bold;
}[/html]

このように表示されます

当店の芋まんじゅう

まとめ

いかがでしたでしょうか？
この応用として、画像を使わずにパターンで表現したり、写真画像にグラデーションを重ねたり、もっとこだわったデザインにすることもできますので、いろいろとご自身で試行錯誤しながらチャレンジしてもらえればと思います！