CSS辞典-色と背景

色と背景では、文字色、背景色、背景画像などをレイアウトすることが出来るスタイルシートです。ここではよく使うスタイルシートをまとめてありますので、組み合わせでオシャレなデザインに作成していきましょう。

CSS(スタイルシート)辞典-色と背景

文字色を指定したい
背景色を指定したい
背景画像を指定したい
背景画像の繰り返し方法を指定したい
背景画像を固定したい
背景画像の位置を指定したい
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>

Top

背景色を指定したい

background-color:色(RGB値もしくは色名)

ホームページ全体の背景色を変えるにはbody {background-color: 色(RGB値もしくは色名);}で変えることが出来ます。又グループごとの背景色を変えるにはグループのid又はclassのname{background-color: 色(RGB値もしくは色名);}で変えられます。ここでは文字の背景色を表示してみます。

背景色をブルー系にして見ます。

css
.haikeiblu {
	background-color: #0FF;
}

xhtml
<p class="haikeiblu">背景色をブルー系にして見ます。</p>

Top

背景画像を指定したい

background-image:画像のURL

背景に画像を指定しています。

css
.haikei {
	background-image: url(images/css/003-006.gif);
}

xhtml
<p class="haikei">この文字の背景に画像を指定しています。</p>

Top

背景画像の繰り返し方法を指定したい

background-repeat:値

repeat: 水平、垂直方向全てに繰り返す
repeat-x: 水平方向のみ繰り返す
repeat-y: 垂直方向のみ繰り返す
no-repeat: 繰り返さずに、１つだけ表示する

画像を水平、垂直方向に繰り返し。

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>

背景画像を繰り返さずに、１つだけ表示。

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>背景画像を繰り返さずに、１つだけ表示してみます。見やすいように文字に余白を設け背景画像の位置も指定してあります。</p></div>

Top

背景画像を固定したい

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>

Top

背景画像の位置を指定したい

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>

Top