色と背景では、文字色、背景色、背景画像などをレイアウトすることが出来るスタイルシートです。ここではよく使うスタイルシートをまとめてありますので、組み合わせでオシャレなデザインに作成していきましょう。
CSS(スタイルシート)辞典-色と背景
文字色を指定したい
color:色(RGB値もしくは色名)
この行は青色系で書いてみます

css .aokei { color: #00F; }
xhtml <p class="aokei">この行は青色系で書いてみます</p>
この行は赤色系で書いてみます

css .akakei { color: #F00; }
xhtml <p class="akakei">この行は赤色系で書いてみます</p>
この行はグレー系で書いてみます。

css .gureikei { color: #CCC; background-color: #000; }
xhtml <p class="gureikei">この行はグレー系で書いてみます。文字が見にくいため背景色を使っています</p>
この行はグリーン系で書いてみます

css .gurinkei { color: #0F0; }
xhtml <p class="gurinkei">この行はグリーン系で書いてみます</p>
この行はピンク系で書いてみます

css .pinnkukei { color: #F0F; }
xhtml <p class="pinnkukei">この行はピンク系で書いてみます</p>
この行は黄色系で書いてみます。

css .kiirokei { color: #FF0; background-color: #000; }
xhtml <p class="kiirokei">この行は黄色系で書いてみます。文字が見にくいため背景色を使っています</p>
背景色を指定したい
background-color:色(RGB値もしくは色名)
ホームページ全体の背景色を変えるにはbody {background-color: 色(RGB値もしくは色名);}で変えることが出来ます。又グループごとの背景色を変えるにはグループのid又はclassのname{background-color: 色(RGB値もしくは色名);}で変えられます。ここでは文字の背景色を表示してみます。
背景色をブルー系にして見ます。

css .haikeiblu { background-color: #0FF; }
xhtml <p class="haikeiblu">背景色をブルー系にして見ます。</p>
背景画像を指定したい
background-image:画像のURL
背景に画像を指定しています。

css .haikei { background-image: url(images/css/003-006.gif); }
xhtml <p class="haikei">この文字の背景に画像を指定しています。</p>
背景画像の繰り返し方法を指定したい
background-repeat:値
- repeat
- 水平、垂直方向全てに繰り返す
- repeat-x
- 水平方向のみ繰り返す
- repeat-y
- 垂直方向のみ繰り返す
- no-repeat
- 繰り返さずに、1つだけ表示する
画像を水平、垂直方向に繰り返し。

css #bgrepeat { height: 100px; background-image: url(images/css/bg04-12.gif); background-repeat: repeat; }
xhtml <table id="bgrepeat" width="" border="1"> <tr> <td>背景画像を水平、垂直方向全てに繰り返してみます。背景画像を分かりやすくする為にボックスの高さと文字をセンター揃えにしてあります。</td> </tr> </table>
画像を水平方向に繰り返し。

css #bgrepeatx { height: 100px; background-image: url(images/css/yokogazou.jpg); background-repeat: repeat-x; }
xhtml <table id="bgrepeatx" width="" border="1"> <tr> <td>背景画像を水平方向のみに繰り返してみます。背景画像を分かりやすくする為にボックスの高さを加えてあります。</td> </tr> </table>
画像を垂直方向に繰り返し。

css #bgrepeaty { height: 100px; background-image: url(images/css/tategazou.jpg); background-repeat: repeat-y; }
xhtml <table id="bgrepeaty" width="" border="1"> <tr> <td>背景画像を垂直方向のみに繰り返してみます。背景画像を分かりやすくする為にボックスの高さを加えてあります。</td> </tr> </table>
背景画像を繰り返さずに、1つだけ表示。

css #bgrepeatno { background-image: url(images/css/arrow11_2.png); background-repeat: no-repeat; background-position: left center; } #bgrepeatno p{ padding-left: 30px; }
xhtml <div id="bgrepeatno"> <p>背景画像を繰り返さずに、1つだけ表示してみます。見やすいように文字に余白を設け背景画像の位置も指定してあります。</p></div>
背景画像を固定したい
background-attachment:値
値 |
詳細 |
scroll |
文章の内容とともにスクロールする |
fixed |
画像が固定されてスクロールされない |
固定されているためスクロールしても画像は動きません。

css #koteigazou { height: 100px; width: 500px; background-image: url(images/css/koteigazou.jpg); margin-top: 20px; overflow: scroll; background-repeat: no-repeat; background-attachment: fixed; }
xhtml <div id="koteigazou"> <p>固定画像のサンプルです。</p> <p>固定されているためスクロールしても画像は動きません。</p> <p>見やすいように幅と高さを指定して</p> <p>スクロールバーが出るようにしています。</p> </div>
背景画像の位置を指定したい
background-position:値
位置の基点は左上になっています。各数値は左上からの数値で変更していきます。
- 値「水平方向 垂直方向」
- 30px 40px
- 詳細
- この場合は水平方向に30px、垂直方向に40pxの位置に表示します。
又数値の単位は%でも可能です。 - 値「水平方向 垂直方向」
- right center
- 詳細
- この場合は水平方向にright(右)、垂直方向にcenter(中央)の位置に表示します。
水平方向文字:left,center,right
垂直方向:top,center,bottom
背景画像の位置を指定。

css #bgrepeatno { background-image: url(images/css/arrow11_2.png); background-repeat: no-repeat; background-position: left center; } #bgrepeatno p{ padding-left: 30px; }
html <div id="bgrepeatno"> <p>背景画像の位置を指定すれば文字にアクセントをつけることが出来ます。</p> </div>