ボーダーの設定方法
みいと
おじさんのWEBデザイン学習まとめ
background-colorプロパティを使用すると、ボックスの背景色を設定することができます。
デフォルトの状態では、マージン以外の部分に背景色が適用されます。
色の指定方法はこちらを参照してください。
下記のように背景色を黄色にするクラスを設定して試してみます。
span {
background-color: yellow;
}
適用させるHTMLは、このような感じのものを用意しました。
<p><span>背景色</span>を設定した<span>クラス</span>を試してみます。</p>
これで下記のように、span要素に背景色を付けることができます。
background-colorプロパティを、p要素のようなブロックレベルの要素に設定すると
p {
background-color: yellow;
}
このように改行が入る直前まで色が付きます。
background-imageプロパティを使用すると、要素の背景画像を設定することができます。
値にはnoneというキーワード、または画像のURLを指定します。
試しにこんな感じの画像を背景画像に設定してみます。
div{
background-image: url(img/star1.png);
height: 200px;
}
<div>
div要素に背景画像を設定してみます。
</div>
これをブラウザで確認すると下記のようになります。
背景画像に指定された画像は、デフォルトではこのように要素内で繰り返し表示されます。
また、背景画像はカンマ区切りで複数指定することができます。
試しに赤い星よりも少し大きい黄色い星を追加してみます。
(※星の画像の背景は透明にしてあります。)
div{
background-image: url(img/star2.png),url(img/star1.png);
height: 100px;
}
複数の背景画像を指定した場合は、このように左側に指定した画像が上に表示されます。
今回は背景色(background-color)と背景画像(background-image)についてまとめました。
背景色を指定することで、だいぶデザインの幅が広がりそうですね。