スタイルシートで背景を設定する
”背景”はHTMLだけでも設定することができるのですが、スタイルシートで背景を設定しておいて外部CSSに保存しておくと、一度にたくさんのページの背景を変更することができて効率的です。
背景はほとんど全てのタグに設定することができます。例えば、「div」に赤色の背景、「p」に青色の背景を設定すれば、基本背景は赤で文字を表示する部分だけ青色の背景が表示されます。
- background-color (背景にワントーンの色を付ける)
- background-image (背景に画像を設定する)
- background-repeat (背景の繰り返しの設定)
- background-position (背景画像の表示位置の設定)
背景を色を付ける
まずは、背景に色を付ける方法です。
背景色の設定は、
セレクタ{background-colo:背景色コード}
と記入することで設定することができます。
<記述例>
【css記述】
.aquablue{background-color: #00ffff"}
.orange{background-color: #ffa500}
【HTML記述】
<p class="aquablue">背景色をアクアブルブルーにします。</p>
<p class="orange">背景色がオレンジになります。</p>
こうすることで各クラス名を付けたHTMLタグに背景色を設定することが出来ます。
<表示例>
背景色をアクアブルーにします。
背景色がオレンジになります。
記入例ではクラスを指定して背景色の設定を行っていますが、これを『body』タグに変えて背景を設定すれば、ページ全体の背景色を設定することができます。
<記述例>
body{background-color:背景色コード}
ということですね。