スッキリかんたんスタイルシート～色と背景

トップ＞スッキリかんたんスタイルシート

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

color　文字の色を指定する

16進数で2桁ずつ指定。　記述例　color:#ff6600

16進数で1桁ずつ指定。　記述例　color:#039

色の名前で指定。　記述例　color:blue

rgbを10進数で指定。　記述例　color:rgb(100,0,50)

rgbを％で指定。　記述例　color:rgb(20%,60%,90%)

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字の指定方法</title>
<style type="text/css">
<!--
body {font-size:14px;}
p#cff6600 {color:#ff6600;}
p#c039 {color:#039;}
p#cblue {color:blue;}
p#crgb {color:rgb(100,0,50);}
p#crgbpar {color:rgb(20%,60%,90%);}
-->
</style>
</head>
<body>
<p id="cff6600">16進数で2桁ずつ指定。　記述例　color:#ff6600</p>
<p id="c039">16進数で1桁ずつ指定。　記述例　color:#039</p>
<p id="cblue">色の名前で指定。　記述例　color:blue</p>
<p id="crgb">rgbを10進数で指定。　記述例　color:rgb(100,0,50)</p>
<p id="crgbpar">rgbを％で指定。　記述例　color:rgb(20%,60%,90%)</p>
</body>
</html>

background-color　背景色の指定

h2要素に背景色を指定する。

p要素に背景色を指定。
body要素にも背景色を指定してあります。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景色の指定</title>
<style type="text/css">
<!--
body {background-color:#cccce7;}
span {color:orangered;}
h2 {background-color:#dadaed;}
p {background-color:#ffffff;}
-->
</style>
</head>
<body>
<h2>h2要素に<span>背景色</span>を指定する。</h2>
<p>p要素に背景色を指定。<br>
body要素にも背景色を指定してあります。</p>
</body>
</html>

フォームの色と背景色を指定する

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>フォームの色と背景色を指定する</title>
<style type="text/css">
<!--
form {background-color:#CBE4E4;
	padding:5px;}
div, input {text-align:center;
	color:orangered;}
textarea {color:#0000ff}
-->
</style>
</head>
<body>
<div>
<form>
<h2>メッセージ</h2>
<textarea name="coment" cols="40" rows="5">
</textarea>
<p><input type="submit" value="submit">
<input type="reset" value="reset"></p>
</form>
</div>
</body>
</html>

見出しと段落のデザイン

見出しには濃いめの色を背景に指定し、文字を白抜きにする。段落には見出しよりも薄い色を指定する。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを指定する。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>見出しと段落のデザイン</title>
<style type="text/css">
<!--
body {background-color:#5e472d;}
h2 {color:#ffffff;
	background-color:#c4b4a4;
	font-size:18px;
       margin-bottom:0;}
p {background-color:#f7f7e1;
       lin-height:12pt;
	font-size:14px;
       margin-top:0;}
h2,p {padding:4px 8px;
      color:#2c1e0e}
-->
</style>
</head>
<body>
<h2>見出しと段落のデザイン</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにする。
段落には見出しよりも薄い色を指定する。さらに見出しと段落の上下のマージンを0にして、
ボックスの上下をくっつけ、パディングを指定する。</p>
</body>
</html>

background-image　ページ全体に背景画像を適用する

ページ全体に背景画像を適用

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ページ全体に背景画像を適用する</title>
<style type="text/css">
<!--
body {background-image:url("bg001.gif");
      font-size:16px;}
-->
</style>
</head>
<body>
ページ全体に背景画像を適用
</body>
</html>

body要素と見出しの背景に画像。p要素の背景に色。

background-image

背景に画像を指定すると，文章が読みにくくなることがあります。
文字の背景には明るめの画像や色を設定しましょう。
パディングなどを利用するなどして，
文章を読みやすくする工夫が必要です。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>body要素と見出しの背景に画像。p要素の背景に色。</title>
<style type="text/css">
<!--
body {background-image:url("bg001.gif");
       font-size:14px;}
h3 {background-image:url("bg002.gif");
       padding:5px;}
p {padding:5px;
	background-color:#ffffff;
	border:solid 2px #696969;}
-->
</style>
</head>
<body>
<h3>background-image</h3>
<p>背景に画像を指定すると，文章が読みにくくなることがあります。<br>
文字の背景には明るめの画像や色を設定しましょう。<br>
パディングなどを利用するなどして，<br>
文章を読みやすくする工夫が必要です。</p>
</body>
</html>

テーブル要素の背景を設定する

ここはｔｈセル	画像を指定
ここはtdセル	ここはtdセル
ここはtdセル	色を指定

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テーブル要素の背景を設定する</title>
<style type="text/css">
<!--
table {background-color:#555555;
	width:400px; height:150px;}
th {background-image:url("bg004.gif");}
td {background-color:#f0f0f0;}
-->
</style>
</head>
<body>
<table border="1">
<tr><th>ここはｔｈセル</th>
<th>画像を指定</th></tr>
<tr><td>ここはtdセル</td>
<td>ここはtdセル</td></tr>
<tr><td>ここはtdセル</td>
<td>色を指定</td></tr>
</table>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

background-repeat　背景画像を横方向に繰り返す

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景画像を横方向に繰り返す</title>
<style type="text/css">
<!--
body {background-image:url("bg005.gif");
	background-repeat:repeat-x;}
-->
</style>
</head>
<body>

</body>
</html>

背景画像を縦方向に繰り返す

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景画像を横方向に繰り返す</title>
<style type="text/css">
<!--
body {background-image:url("bg005.gif");
	background-repeat:repeat-y;}
-->
</style>
</head>
<body>

</body>
</html>

背景画像を１つだけ表示させる

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景画像を１つだけ表示させる</title>
<style type="text/css">
<!--
body {background-image:url("bg005.gif");
	background-repeat:no-repeat;}
-->
</style>
</head>
<body>

</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

background-attachment　背景画像を固定する

デジタルハリウッド株式会社

「デジハリ・オンラインスクール」は、IT・デジタルコンテンツ産業で仕事をするために必要なスキルを習得するカリキュラムを、スクールに通うことなく自宅のパソコンとインターネットを使って、リアルタイムに受講することができるオンラインスクールです。

双方向でのやり取りが可能なインターネットによるリアルタイム授業提供の仕組みを最大限に活かし、母体である「デジハリ（デジタルハリウッド）」で培ってきた実績あるカリキュラム、さらにはデジハリの創設以来の理念である「産学協同」のコンセプトに基づく企業とのコネクションを積極的に活かしたカリキュラムを学習することができます。

ITスキルやデジタルコンテンツ制作スキルを身に付けたいと思っていても、近くにスクールがなく、通学にかかる時間や費用が理由で学ぶことができなかった全国の皆様に「デジハリ・オンラインスクール」が新しい学びの場をご提供させていただきます。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景画像を固定する</title>
<style type="text/css">
<!--
body {background-image:url("bg006.gif");
	background-attachment:fixed;
	background-repeat:no-repeat;}
p {width:250px;
   font-size:15px}
h3, p {margin:20px 40px 0px 310px;}
-->
</style>
</head>
<body>
<h3><a Href="aaa.htm">デジタルハリウッド株式会社</a></h3>
<p>「デジハリ・オンラインスクール」は、IT・デジタルコンテンツ産業で
仕事をするために必要なスキルを習得するカリキュラムを、スクールに通うことなく
自宅のパソコンとインターネットを使って、リアルタイムに受講することができる
オンラインスクールです。
<br>
<br>
双方向でのやり取りが可能なインターネットによるリアルタイム授業提供の仕組みを最大限に活かし、
母体である「デジハリ（デジタルハリウッド）」で培ってきた実績あるカリキュラム、
さらにはデジハリの創設以来の理念である「産学協同」のコンセプトに基づく企業との
コネクションを積極的に活かしたカリキュラムを学習することができます。<br>
<br>
ITスキルやデジタルコンテンツ制作スキルを身に付けたいと思っていても、近くにスクールがなく、
通学にかかる時間や費用が理由で学ぶことができなかった全国の皆様に「デジハリ・オンラインスクール」が
新しい学びの場をご提供させていただきます。</p>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

background-position　背景画像の位置を指定する

日経ＢＰマーケティング

日経BP社が発行する日経ビジネスや日経パソコンなどの雑誌をはじめ、「日経BP　Biz Board」などのデジタルコンテンツ、さらには日本経済新聞社や他社の出版物、情報商品などの販売促進を支援するため、様々なチャネル・手法を駆使して事業を展開する総合マーケティング企業です。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景画像の位置を指定する。</title>
<style type="text/css">
<!--
body {background-image:url("bg007.gif");
       font-size:14px;
	background-repeat:no-repeat;
	background-position:top right;}//上の右寄せを指定
//右寄せ right,top right,bottom right　
//左寄せ　left,top left,bottom left
//中央寄せ　center,top center,bottom center
-->
</style>
</head>
<body>
<h3><a Href="aaa.htm">日経ＢＰマーケティング</a></h3>
<p>日経BP社が発行する日経ビジネスや日経パソコンなどの雑誌をはじめ、 
「日経BP　Biz Board」などのデジタルコンテンツ、さらには日本経済新聞社や他社の出版物、
情報商品などの販売促進を支援するため、 
様々なチャネル・手法を駆使して事業を展開する総合マーケティング企業です。</p>
</body>
</html>

表示位置を割合で指定する

日経ＢＰマーケティング

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>表示位置を割合で指定する </title>
<style type="text/css">
<!--
body {background-image:url("bg007.gif");
       font-size:14px;
	background-repeat:no-repeat;
	background-position:50% 70%;}
//１つ目の値が横方向，２つ目は縦方向
-->
</style>
</head>
<body>
<h3><a Href="aaa.htm">日経ＢＰマーケティング</a></h3>
<p>日経BP社が発行する日経ビジネスや日経パソコンなどの雑誌をはじめ、 
「日経BP　Biz Board」などのデジタルコンテンツ、さらには日本経済新聞社や他社の出版物、
情報商品などの販売促進を支援するため、 
様々なチャネル・手法を駆使して事業を展開する総合マーケティング企業です。</p>
</body>
</html>

表示位置を座標で指定する

日経ＢＰマーケティング

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>表示位置を座標で指定する </title>
<style type="text/css">
<!--
body {background-image:url("bg007.gif");
       font-size:14px;
	background-repeat:no-repeat;
	background-position:50px 80px;}
//１つ目の値は左からの位置，２つ目は右からの位置
-->
</style>
</head>
<body>
<h3><a Href="aaa.htm">日経ＢＰマーケティング</a></h3>
<p>日経BP社が発行する日経ビジネスや日経パソコンなどの雑誌をはじめ、 
「日経BP　Biz Board」などのデジタルコンテンツ、さらには日本経済新聞社や他社の出版物、
情報商品などの販売促進を支援するため、 
様々なチャネル・手法を駆使して事業を展開する総合マーケティング企業です。</p>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

background　背景画像を一括指定する（縦に並べる）

body {background-color:#ffffff;
      background-image:url("bg008.gif");
      background-repeat:repeat-y;
      background-position:80%;}

           ↓　一括指定

body {background:#ffffff url("bg008.gif") repeat-y 80%}

使用画像

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景画像を一括指定する（縦に並べる）</title>
<style type="text/css">
<!--
body {background:#ffffff url("bg008.gif") repeat-y 80%;
      font-size:14px;}
-->
</style>
</head>
<body>
<pre>
body {background-color:#ffffff;
      background-image:url("bg008.gif");
      background-repeat:repeat-y;
      background-position:80%;}

           ↓　一括指定

body {background:#ffffff url("bg008.gif") repeat-y 80%}
</pre>
<IMG SRC="bg008.gif" WIDTH="61" HEIGHT="58" BORDER=1　align="left" hspace="10">
使用画像
</body>
</html>

背景画像を一括指定する（横に並べる）

◆一括指定できる値◆

①background-color　②background-image　③background-repeat
④background-attachment　⑤background-position
どれも省略可能。省略した場合は初期値の設定が適用。

使用画像

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景画像を一括指定する（横に並べる）</title>
<style type="text/css">
<!--
body {background:#ffffff url("bg009.gif") repeat-x bottom;
      font-size:14px;}
-->
</style>
</head>
<body>
◆一括指定できる値◆<br><br>
①background-color　②background-image　③background-repeat<br>
④background-attachment　⑤background-position<br>
どれも省略可能。省略した場合は初期値の設定が適用。<br><br>
<IMG SRC="bg009.gif" WIDTH="61" HEIGHT="58" BORDER=1　align="left" hspace="10">
使用画像
</body>
</html>

「ホームページ」検索 byベクターPCショップ