スタイルシート

トップページ	利用規約	掲示板	ランキング	初心者説明	質問集	リンクする	相互リンク
タグの説明	テーブルタグ	スタイルシート	色の見本	素材屋リンク	作成リンク	WEBスペース	レンタルリンク

スタイルシート

スタイルシートはタグを手助けする便利なものです。スタイルシートは大体のタグに使えます。テーブルタグと組み合わせて使うと、テーブルタグ内の文字を全部まとめて指定することなどできます。リンクの下線を消したり、リンクに触れると文字背景に色をつけるなどもできます。書き方は基本的にタグの横に　「 style="指定" 」　と書きます。　例:<b style="font-size:10px;">　例:<font style="color:ff4444;">

■ 字の大きさ font-size:数px;
■ 字の色 color:色指定;
■ 字を太字 font-weight:bold;
■ 字を斜体 font-style:italic;
■ 字に下線 underline
■ 字に上線 overline
■ 字に上下線 underline overline
■ 字を打消 line-through
■ 字の種類 font-family:フォント名;
■ 字の背景色 background-color:色;
■ 字の表示位置 text-align:center;
■ 文章の行間 line-height:数px;

■ リンク装飾（リンクの色、下線）
■ タグをまとてめ反映
■ クラスの指定 class="名前"
■ 横幅と縦幅 width:数;height:数;
■ 線の種類 border-style:種類;
■ 線の太さ border-width:数;
■ 線の色 border-color:色指定;
■ 中身の余白 padding:数;
■ 外側の余白 margin:数;
■ 背景画像 background-image:名;
■ 背景画像並び方 repeat:種類;
■ 背景画像の位置 position:位置;
■ 背景画像固定 attachment:指定;

リンク装飾（リンクの色や、下線消すなど）

リンクに色や飾りをつける

　ホームページタイトル

<html>
<head>
<title>ホームページタイトル</title>
<style type="text/css">

</style>
</head>
<body>

ここから文章が表示されます

</body>
</html>

<head>から</head>の間に上のように記述します。

見本：　a:link {color:ff0000;} ＝まだ見ていないリンク。
見本：　a:visited {color:ff0000;} ＝一度見たリンク。
見本：　a:hover {color:ff0000;} ＝カーソルがリンクの上にあるとき。
見本：　a:active {color:ff0000;} ＝リンク先をクリックしたとき。
↑それぞれリンクの効果に対応しています。上のサンプルは色しか指定していませんが太字にしたり、アンダーラインを消したりつけたり、種類を変えたりできます。字に影響するスタイルシートは大体使えます。

見本：　a:hover {color:ff0000;background-color:ffccff;}
上のようにbackground-color:ffaaff;を付け足せば、カーソルがリンクの上にくると、リンク部分の文字が赤色で背景がピンク色になります。こんな感じ

見本：　a:hover {color:ff0000;background-color:ffccff;text-decoration:none;}
text-decoration:none;を付け足せば、リンク部分の下線を消すこともできます。（リンク部分が分かりにくくならないように注意）こんな感じ

タグをまとてめ反映

１種類のタグ全部ににスタイルシートを反映

　ホームページタイトル

<html>
<head>
<title>ホームページタイトル</title>
<style type="text/css">

</style>
</head>
<body>

ここから文章が表示されます

</body>
</html>

<head>から</head>の間に上のように記述。大体のタグで使えます。
fontタグを選んだなら、そのページにある全てのfontタグにスタイルシートが反映されます。上の場合ならfontタグで囲んだ文字の部分は「color:ff0000;」と指定しているので、文字が赤色に変わります。

見本：　font {color:ff0000;} ＝フォントタグ全てに反映されます。
見本：　b {color:ff0000;} ＝太字タグ全てに反映されます。
見本：　table {color:ff0000;} ＝テーブルタグ全てに反映されます。
見本：　textarea {color:ff0000;} ＝テキストエリア全てに反映されます。
↑大体のタグに使用できます。全体に影響があるので全体同じものにするときに効果的です。部分的に変えたい場合は部分的に指定してください。
例：<font style="color:ff0000;">ああああ</font>

■テーブルタグに反映した場合

あああああ	あああああ	あああああ	あああああ
あああああ	あああああ	あああああ	あああああ

■テキストエリアに反映した場合

■１行フォームに反映した場合

■リンクタグに反映した場合
リンクタグ

クラスの指定 class="名前"

クラス指定したタグ全てに反映

　ホームページタイトル

<html>
<head>
<title>ホームページタイトル</title>
<style type="text/css">

</style>
</head>
<body>

ここから文章が表示されます

</body>
</html>

<head>から</head>の間に上のように記述します。
文字は好きな名前をつけてください。上のサンプルはnameとaaaとakaとaoとmidoriと名づけました。
※ 名前の前に「 . 」点（ピリオド）を忘れないように。

見本：　.name {font-weight:bold;}
　　＝ nameという名前をつけて太字のスタイルシートを指定しました。
見本：　.aaa {background-color:aaaaaa;}
　　＝ aaaという名前で字背景に色が付くスタイルシートを指定しました。
見本：　.aka {color:ff0000;}
　　＝ akaという名前で字が赤になるスタイルシートを指定しました。
見本：　.ao {color:0000ff;}
　　＝ aoという名前で字が青になるスタイルシートを指定しました。
見本：　.midori {color:00ff00;}
　　＝ midoriという名前で文字が緑になるスタイルシートを指定しました。

↑スタイルシートを適応するには、タグに「class="名前"」を付け足します。

例1：<font class="name">ああああ</font>
例2：<font class="aaa">ああああ</font>
例3：<font class="aka">ああああ</font>
例4：<font class="ao">ああああ</font>
例4：<font class="midori">ああああ</font>
結果1：ああああ
結果2：ああああ
結果3：ああああ
結果4：ああああ
結果4：ああああ

何箇所も同じようなスタイルシートを使っている場合は、ひとつひとつのタグに長いスタイルシートを書くより。head内に指定しておいて、クラス指定でタグに反映するほうが便利で見にくくなりません。

横幅と縦幅 width:数;height:数;

横幅を指定する
タグ	<font style="width:100px;">あああ</font>いいい
100px	あああいいい
タグ	<font style="width:100px;background-color:ffff00;">あああ</font>いいい
100px	あああいいい
タグ	<font style="width:200px;">あああ</font>いいい
200px	あああいいい
タグ	<font style="width:200px;background-color:ffff00;">あああ</font>いいい
200px	あああいいい
タグ	<font style="width:100px;">あああああああああ</font>
100px	あああああああああ
タグ	<font style="width:100px;background-color:ffff00;">あああああああああ</font>
100px	あああああああああ
解説	横幅を100pxと指定すると、１番上の見本の用にタグに囲まれた「あああ」部分は100pxのスペースをとります。なのでタグで囲っていない「いいい」部分は100pxとった横になります。色を付けると2番目のようになります。200pxにすればさらに広がります。 100px指定してタグの中の文字を増やすと、上から3番目の見本のように100pxの所で勝手に改行されます。

縦幅を指定する
タグ	<font style="height:100px;">あああ</font>いいい
100px	あああいいい
タグ	<font style="height:100px;background-color:ffff00;">あああ</font>いいい
100px	あああいいい
解説	縦に伸びます。色をつけると下のようになります。

組み合わせる
タグ	<font style="width:200;text-align:center;background-color:ff88ff;font-weight:bold;color:ffffff;">あああ</font>いいい
見本	あああいいい
解説	横幅を200pxに指定して、テキストを真ん中に表示して、背景の色を指定して、文字の太さを太くして、文字の色を指定しました。ごちゃごちゃしてますが見本をみれば結構綺麗に仕上がってますので気にいったら使ってみてください。

線の種類 border-style:種類;

線の種類を選ぶ
タグ	<font style="border-style:solid;">ああああああ</font>
solid	ああああああ
double	ああああああ
dashed	ああああああ
dotted	ああああああ
groove	ああああああ
ridge	ああああああ
inset	ああああああ
outset	ああああああ
解説	種類を指定すると上のようにいろんな種類に指定できます。後、下に説明している線の太さや色や余白や表示位置などを付け足すと見栄えがよくなります。
タグ	<div style="border-style:solid;">ああああああ</div>
solid	ああああああ
解説	タグを「font」から「div」に変えるとdivは１列分使う効果があるので、広がれる所まで広がります。

線の太さ border-width:数;

線の太さを指定する
タグ	<font style="border-style:solid;border-width:数;">ああああああ</font>
数=1	ああああああ
数=2	ああああああ
数=3	ああああああ
数=4	ああああああ
数=5	ああああああ
数=6	ああああああ
数=7	ああああああ
数=8	ああああああ
数=9	ああああああ
数=10	ああああああ
タグ	<font style="border-style:dotted;border-width:数;">ああああああ</font>
数=1	ああああああ
数=2	ああああああ
数=3	ああああああ
数=4	ああああああ
数=5	ああああああ
数=6	ああああああ
数=7	ああああああ
数=8	ああああああ
数=9	ああああああ
数=10	ああああああ
解説	「数」の所に１をいれると１本線になります。数字をいれるだけ太くなっていきます。種類を変えるとその種類の枠で太さが変わっていきます。

線の色 border-color:色指定;

枠線に色をつける
タグ	<font style="border-color:ff0000;border-style:solid;">ああああああ</font>
見本	ああああああ
タグ	<font style="border-color:00ff00;border-style:double;">ああああああ</font>
見本	ああああああ
タグ	<font style="border-color:0000ff;border-style:dotted;">ああああああ</font>
見本	ああああああ
解説	border-colorで色を指定しました。ff0000が赤色です。00ff00が緑色です。0000ffが青色です。色の指定方法の詳細はこちらを見てみてください。

組み合わせる
タグ	<font style="width:200;text-align:center;background-color:ff88ff;font-weight:bold;color:ffffff;border-style:dotted;border-width:2;border-color:ff3333;">あああ</font>いいい
見本	あああいいい
解説	横幅を200pxに指定して、テキストを真ん中に表示して、背景の色を指定して、文字の太さを太くして、文字の色を指定しました。そしてさらに、枠の種類を指定して、枠の太さを指定して、枠の色を選択しました。全部効果をつけると文字が多くなりすぎるので気に入ったのだけ使ってください。

中身の余白 padding:数;

文字と枠との距離（余白）
タグ	<font style="padding:5;border-color:ff0000;border-style:solid;">ああああああ</font>
数=5	ああああああ
タグ	<font style="padding:10;border-color:0000ff;border-style:solid;">ああああああ</font>
数=10	ああああああ
解説	paddingの数字を増やすと文字と枠との間隔を増やすことができます。

外側の余白 margin:数;

文字と枠との距離（余白）

ああ	ああ	ああ
ああ	ああ	ああ

ああ	ああ	ああ
ああ	ああ	ああ

分かりやすくするためにテーブルタグを使用しました。【通常】は「外側の余白（margin）」を指定していません。【結果】を見れば分かると思いますが、上下左右に指定された数字だけ空白をとることができます。

上下左右の部分的な余白の指定

ああ	ああ	ああ
ああ	ああ	ああ

ああ	ああ	ああ
ああ	ああ	ああ

ああ	ああ	ああ
ああ	ああ	ああ

ああ	ああ	ああ
ああ	ああ	ああ

marginの後に「margin-top:20;」というように指定すると上にだけ指定した数字分の余白をとることができます。「bottom」と書けば下に指定した数字分の余白をとれます。「left」は左の余白。「right」は右の余白です。

組み合わせる
タグ	<font style="width:200;text-align:center;background-color:ff88ff;font-weight:bold;color:ffffff;border-style:dotted;border-width:2;border-color:ff3333;padding:10;margin:20;">あああ</font>いいい
見本	あああいいい
解説	横幅を200pxに指定して、テキストを真ん中に表示して、背景の色を指定して、文字の太さを太くして、文字の色を指定しました。そしてさらに、枠の種類を指定して、枠の太さを指定して、枠の色を選択しました。そしてそしてさらに(^｡^;) 　中身の余白と外側の余白を付け足してみました。1個づつこんな効果をつけていたらテキストがすごい増えてしまうので【クラス指定】で指定しておくと　１つだけ記述するだけで複数に効果を出せます。【クラス指定】は便利なので覚えておいてください。

背景画像を表示 background-image:名前;

壁紙風に画像を背景に使用します

　ホームページタイトル

<html>
<head>
<title>ホームページタイトル</title>
<style type="text/css">

</style>
</head>
<body>

ここから文章が表示されます

</body>
</html>

サンプル（クリックしてください）

<head>から</head>の間に上のように記述します。
body {background-image:url(画像名);} と上の用に書くと、サンプルの用に背景一面に指定した画像を使用できます。

サンプル（クリックしてください）

「 body 」の部分を「 td 」に変更しました。そうすると「 td 」を使っているテーブルタグの部分に画像が敷き詰められます。
td {background-image:url(画像名);} と上の用に書くと、
サンプルの用に指定したタグ一面に画像を使用できます。

背景画像を表示 background-image:名前;

壁紙風に画像を背景に使用します

　ホームページタイトル

<html>
<head>
<title>ホームページタイトル</title>
<style type="text/css">

</style>
</head>
<body>

ここから文章が表示されます

</body>
</html>

サンプル（クリックしてください）

background-repeat:no-repeat; と付け加えました。
サンプルを見ると画像が並んでいたのが１つになります。画像を並べて表示するのを解除できます。

サンプル（クリックしてください）

background-repeat:repeat-x; と「 repeat-x 」に変えました。
サンプルを見るとヨコ１列だけ画像を並べることができます。

サンプル（クリックしてください）

background-repeat:repeat-y; と「 repeat-y 」に変えました。
サンプルを見るとタテ１列だけ画像を並べることができます。

背景画像の位置 position:位置;

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

　ホームページタイトル

<html>
<head>
<title>ホームページタイトル</title>
<style type="text/css">

</style>
</head>
<body>

ここから文章が表示されます

</body>
</html>

サンプル（クリックしてください）

background-repeat:no-repeat; で、画像を並べて表示するのを解除し、
background-position:center center; を付け加えました。
このスタイルシートは背景画像の表示する位置を「left」「right｣「center」「top」「bottom]と指定できます。
なので、画像を「 center center 」と指定して、画像を真ん中にもってきました。

サンプル（クリックしてください）

こちらは「 right bottom 」と指定したので右下に画像が表示されました。
「 center top 」とすると真ん中の上に画像が表示されます。

背景画像を固定 attachment:指定;

背景をスクロールしても動かないようにする

　ホームページタイトル

<html>
<head>
<title>ホームページタイトル</title>
<style type="text/css">

</style>
</head>
<body>

ここから文章が表示されます

</body>
</html>

サンプル（クリックしてください）

background-attachment:fixed; を付け足すと、ホームページの下のほうを見るために、スクロールバーを下にスライドしても画像が固定されたままになります。
（※ 詳しくはサンプルをクリックして下に移動してみてください）
■ サンプル（固定なし）　 ■ サンプル（固定あり）　 ←見比べてください

お役立ちリンク集： sozai-R 素材NAVI イラスト素材プチッチ HP作成無料ホームページ制作会社ジェバアーツ格安ホームページの制作屋