STYLE SHEET の設定方法

当ページの<HEAD>タグです。

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>style sheet sample files</title>
<STYLE TYPE="TEXT/CSS">
<!--

p{font-size:12pt;font-weight:normal;color:black;}
h1{font-size:24pt;line-height:28pt;font-weight:bold;color:white;background:fuchsia;}
h2{font-size:20pt;line-height:26pt;font-weight:bold;color:yellow;background:navy;}
h3{font-size:18pt;line-height:24pt;font-weight:bold;color:orange;background:aqua;}
h4{font-size:16pt;line-height:20pt;font-weight:bold;color:lime;background:black;}
h5{font-size:14pt;line-height:18pt;font-weight:bold;color:aqua;background:black;}
h6{font-size:14pt;line-height:18pt;font-weight:normal;color:fuchsia;background:black;}
li{font-size:12pt;line-height:14pt;font-weight:normal;color:black;}
dt{font-size:12pt;line-height:14pt;font-weight:normal;color:fuchsia;background:black;}
dd{font-size:12pt;line-height:14pt;font-weight:bold;color:black;background:silver;}
div.class1{font-size:12pt;border-width:5pt;border-style:double;border-color:maroon;}
div.class2{font-size:12pt;border-width:5pt;border-style:ridge;border-color:fuchsia;}
div.class3{font-size:12pt;line-height:18pt;font-weight:normal;color:navy;background:orange;}

-->
</STYLE>
</head>

複数のページでスタイルを統一したいとき

定義ファイルを拡張子cssで保存します。
例として、"style１.css"というファイル名にします。
次に、HTMLファイルのHTMLの<HEAD>タグ内に下記のタグを記載して、スタイルを定義したcssファイルにリンクを張ります。

当ページのスタイル見本

<p>

Pタグで囲まれた文章は、自動的に「12pt、文字色black」になります

</p>

<h1>

H1タグで囲まれた範囲のテキストは、この様に表示されます

</h1>

<h2>

H2タグで囲まれた範囲のテキストは、この様に表示されます

</h2>

<h3>

H3タグで囲まれた範囲のテキストは、この様に表示されます

</h3>

<h4>

H4タグで囲まれた範囲のテキストは、この様に表示されます

</h4>

<h5>

H5タグで囲まれた範囲のテキストは、この様に表示されます

</h5>

<h6>

H6タグで囲まれた範囲のテキストは、この様に表示されます

</h6>

div class1　で指定した文章は、この様に表示されます

</div>

div class2　で指定した文章は、この様に表示されます

</div>

STYLE SHEET　設定の優先順位

STYLE SHEET　の設定は、
１．直接タグにスタイルを設定する。
２．HTMLファイルのHEADにスタイルを設定する。
３．スタイルを設定したcssファイルにリンクを張る。
の三方法があるが優先順位は１>２>３となります。

STYLE SHEET　設定の記述説明

font-style：斜体表示

font-style：italicは、斜体表示になります。
font-style：normalは、通常の文字表示になります。

font-variant：英数表示

font-variant：small-capsは、小文字が小さめの大文字として表示されます。
font-variant：normalは、通常の文字表示になります。

font-weight：太字表示

font-weight：boldは、太字表示になります。
font-weight：normalは、通常の文字表示になります。

font-size：表示文字の大きさを変える

相対値指定

font-size：smallerは、前後のフォントサイズに比べて大きな文字表示になります。
font-size：lagerは、前後のフォントサイズに比べて小さな文字表示になります。

絶対値指定

数値指定

font-size：数値pt(ポイント)
font-size：数値in(インチ)
font-size：数値cm(センチメートル)
font-size：数値px(ピクセル)
font-size：数値pc(ピカ)

オプション指定

font-size：xx-small
font-size：x-small
font-size：small
font-size：medium
font-size：lager
font-size：x-lager
font-size：xx-lager

line-height：改行幅を設定する

相対値指定

line-height：数値%(パーセント)

絶対値指定

line-height：数値pt(ポイント)
line-height：数値in(インチ)
line-height：数値cm(センチメートル)
line-height：数値px(ピクセル)
line-height：数値pc(ピカ)

改行幅の指定ですから、P DIV BODY TABLE等のブロックレベルのタグに限られています。

font-family：フォントの種類を指定する

font-family：フォント名
複数のフォントを指定することができ、優先順位の高いフォントから順番に記述すればデザインイメージに近い表示が可能。
複数のフォントを指定するときは、"，"で区切る。
フォント名にスペースが含まれる場合は、’(ｸｫｰﾃｰｼｮﾝ)か”(ﾀﾞﾌﾞﾙｸｫｰﾃｰｼｮﾝ)で括る。

注意することは、
見る側のＰＣに指定したフォントが無いときには無効です。
Netscape Communicatorでは、機能しないフォントもあります。

fontの集約形

font-style；font-variant；font-weight；（この３つは順不同）を指定したあと、
font-size/line-height；font-familyの順で指定する。
各プロパティの間は、スペースで区切る。

<p style="font-style:italic;font-variant:normal;font-weight:bold;font-size:20pt;line-height:25pt;font-family:'MS　ゴシック';color:red">このようなテキストの指定になります。</p>

このようなテキストの指定になります。

<p style="font:italic normal bold 20pt/12pt 'MS　ゴシック';color:red">上と同じテキストの指定です。</p>

上と同じテキストの指定です。

color：文字の色を指定する

色の指定方法は、色名( colorname)、色指定値(＃RRGGBB)、 RGB(数値，数値，値)、RGB(％，％，％)で指定する事が出来ます。

左側の１６色のcolornameはどのブラウザーでも正式に使用できます。
（これ意外にも使用できるcolornameがあります。）

colorname	#RRGGBB	rgb(255,255,255)	colorname	#RRGGBB	rgb(255,255,255)
black	#000000	r000g000b000	blueviolet	#8a2be2	r138g043b266
gray	#808080	r128g128b128	chocolate	#d2691e	r210g105b030
silver	#c0c0c0	r192g192b192	violet	#ee82ee	r238g130b238
white	#ffffff	r255g255b255	deepskyblue	#00bfff	r000g191b255
teal	#008080	r000g128b128	darkbrown	#da0b00	r218g011b000
green	#008000	r000g128b000	darkcyan	#008b8b	r000g139b139
lime	#00ff00	r000g255b000	darkgray	#a9a9a9	r169g169b169
yellow	#ffff00	r255g255b000	yellowgreen	#9acd32	r154g205b050
olive	#808000	r128g128b000	orange	#ffa500	r255g165b000
navy	#000080	r000g000b128	orangered	#ff4500	r255g069b000
blue	#0000ff	r000g000b255	darkred	#8b0000	r139g000b000
aqua(cyan)	#00ffff	r000g255b255	darkviolet	#9400d3	r148g000b211
purple	#800080	r128g000b128	deeppink	#ff1493	r255g020b147
fuchsia(magenta)	#ff00ff	r255g000b255	gold	#ffd700	r255g215b000
red	#ff0000	r255g000b000	hotpink	#ff69b4	r255g105b180
maroon	#800000	r128g000b000	pink	#ffc0cb	r255g192b203

background：文字の背景色を指定する

文字の背景色を指定する方法は、上記color：と同様に指定する事が出来ます。

<SPAN style="BACKGROUND:white">ホワイトのバックグラウンド</SPAN>
ホワイトのバックグラウンド
<SPAN style="BACKGROUND:#FFA500">オレンジのバックグラウンド</SPAN>
オレンジのバックグラウンド
<SPAN style="BACKGROUND:RGB(255,0,0)">赤色のバックグラウンド</SPAN>
赤色のバックグラウンド

background：文字の背景に画像を指定する

例えば、htmlと同じホルダーの中の[renga.gif]と言う画像ファイルを文字のバックグラウンドにする場合は、
<span style="font-size:18pt;background:url(renga.gif)">レンガのバックグラウンド</span>
と、記述します。

レンガのバックグラウンド

background：ページの背景に画像を指定する

例えば、htmlと同じフォルダーの中にある[back.gif]と言う画像ファイルをページの背景画像にする場合は、
<body style="background:white url(back.gif)">
と記述します。

background-repeat：ページの背景の画像を固定する

スタイルシートでは、背景画像を繰り返し表示しないように設定出来ます。
<body style="background:white url(back.gif);background-repeat:no-repeat">
と記述します。

background-attachment：fixed　背景画像をスクロールさせない

IE4では、ページをスクロールしても背景画像はスクロールさせないように出来ます。
<body style="background:white url(back.gif);background-repeat:no-repeat;background-attachment:fixed">
と記述します。

bordr：文字に枠を付ける

bordr-width：枠の太さを指定します。
border-style：枠の種類を指定します。
border-color：枠の色を指定します。

<div style="border-width:5pt;border-style:solid;border-color:maroon">SOLID Border</div>

SOLID Border

<div style="border-width:5pt;border-style:double;border-color:maroon">DOUBLE Border</div>

DOUBLE Border

<div style="border-width:5pt;border-style:inset;border-color:maroon">INSET Border</div>

INSET Border

<div style="border-width:5pt;border-style:outset;border-color:maroon">OUTSET Border</div>

OUTSET Border

<div style="border-width:5pt;border-style:groove;border-color:maroon">GROOVE Border</div>

GROOVE Border

<div style="border-width:5pt;border-style:ridge;border-color:maroon">RIDGE Border</div>

RIDGE Border

枠の上下左右の太さを一度に指定する

border-width:5 15 20 30の様にスペースで区切った4つの数値で枠を指定します。

<div style=" border-width:5 15 20 30;border-color:rgb(200,100,0)">上に5、右に15、下に20、左に30の太さの枠を付けました</div>

上に５、右に１５、下に２０、左に３０の太さの枠を付けました

枠の上下左右の太さを別々に指定する

border-top-width(枠の上辺の太さを指定します。)
border-right-width(枠の右辺の太さを指定します。)
border-bottom-width(枠の下辺の太さを指定します。)
border-left-width(枠の左辺の太さを指定します。)

この書き方は、指定した辺だけに枠が付きます。

padding：文字と枠の間隔を指定する

padding：10 20 30 40の様にスペースで区切った4つの数値で枠を指定します。

<DIV STYLE=" border-width:10;border-style:groove;border-color:blue;padding:10 20 30 40 ">上を10、右を20、下を30、左を40開けました。</DIV>

上を10、右を20、下を30、左を40開けました。

文字と枠の間隔を上下左右別々に指定する

padding-top-width（上辺との間隔を指定します。)
padding-right-width（右辺との間隔を指定します。)
padding-bottom-width（下辺との間隔を指定します。)
padding-left-width（左辺との間隔を指定します。)

margin：ページの端からの距離を指定する

ページ全体の余白の指定

BODYタグの中にmargin：を使って指定します。例えば左右が30pt 上下が20ptの余白の指定は、
<body style="margin:20 30 20 30"> と記述します。

ページの端とテキストの距離を一度に指定する

margin:10 20 30 40の様にスペースで区切った4つの数値で枠を指定します。

ページ全体があらかじめマージンをとってある場合は、そこからのマージンとなります。

ページの端とテキストの距離を上下左右別々に指定する

margin-top(上にある文字や画像等との間隔を指定します。)
margin-right(ページの右端からの間隔を指定します。)
margin-bottom(下にある文字や画像等との間隔を指定します。)
margin-left(ページの左端からの間隔を指定します。)

margin：を使って文字を重ねる

margin-topを－(マイナス)に指定すれば上の行の文字に重なっていきます。
margin-leftで重なった文字の水平位置を指定できます。

<div style="font-size:48pt;color:rgb(255,0,0)">MARGIN-TOP</div>
<div style="font-size:48pt;color:rgb(200,0,55);margin-top:-42pt">MARGIN-TOP</div>
<div style="font-size:48pt;color:rgb(150,0,105);margin-top:-36pt">MARGIN-TOP</div>
<div style="font-size:48pt;color:rgb(100,0,155);margin-top:-30pt;margin-left:12pt">MARGIN-TOP</div>
<div style="font-size:48pt;color:rgb(55,0,200);margin-top:-24pt;margin-left:24pt">MARGIN-TOP</div>

MARGIN-TOP

text-decoration：none リンクの下線を消す

<A>タグに下のようにスタイルを定義するとリンクの下線を消す事が出来ます。

通常<A>には始めから下線をつける設定になっているので敢えてスタイルシートで "none"にするとリンクの下線を消す事が出来ます。

STYLE SHEET の設定方法

当ページの<HEAD>タグです。

複数のページでスタイルを統一したいとき

当ページのスタイル見本

H1タグで囲まれた範囲のテキストは、この様に表示されます

H2タグで囲まれた範囲のテキストは、この様に表示されます

H3タグで囲まれた範囲のテキストは、この様に表示されます

H4タグで囲まれた範囲のテキストは、この様に表示されます

H5タグで囲まれた範囲のテキストは、この様に表示されます

H6タグで囲まれた範囲のテキストは、この様に表示されます

STYLE SHEET 設定の優先順位

STYLE SHEET 設定の記述説明

font-style：斜体表示

font-variant：英数表示

font-weight：太字表示

font-size：表示文字の大きさを変える

相対値指定

絶対値指定

数値指定

オプション指定

line-height：改行幅を設定する

相対値指定

絶対値指定

font-family：フォントの種類を指定する

fontの集約形

color：文字の色を指定する

background：文字の背景色を指定する

background：文字の背景に画像を指定する

background：ページの背景に画像を指定する

background-repeat：ページの背景の画像を固定する

background-attachment：fixed 背景画像をスクロールさせない

bordr：文字に枠を付ける

枠の上下左右の太さを一度に指定する

枠の上下左右の太さを別々に指定する

padding：文字と枠の間隔を指定する

文字と枠の間隔を上下左右別々に指定する

margin：ページの端からの距離を指定する

ページ全体の余白の指定

ページの端とテキストの距離を一度に指定する

ページの端とテキストの距離を上下左右別々に指定する

margin：を使って文字を重ねる

text-decoration：none リンクの下線を消す

STYLE SHEET　設定の優先順位

STYLE SHEET　設定の記述説明

background-attachment：fixed　背景画像をスクロールさせない