ポケモン徹底攻略～スタイルシート講座(仮)～

ポケモン徹底攻略ページ　｛攻略・裏技・データ｝
ポケモン徹底攻略＞ホームページ作成支援＞スタイルシート講座(仮)
最終更新日：2004年8月2日（月）

注意
1.文章・画像の提供は禁止です。文章を転載する時は必ずこのサイトからの転載であることを明記してください。
2.間違いがあるかもしれません。ご了承下さい。

はじめに

★ 対象
ここではスタイルシートについて軽く学びます。
JavaScript講座よりは易しいですが、HTMLはしっかり理解していないと厳しいです。
とは言え、初心者用の講座です。
★ スタイルシートとは何か？
スタイルシートは、ページを彩ったり形作ったりスタイルを操作するためのものです。
ＨＴＭＬでも可能なものが多いですが、スタイルシートを使うことが推奨されています。
また、スタイルシートを使えば１つのファイルを変更するだけで全ページの背景画像を変えたりすることも可能です。
かっこいいサイトやかわいいサイトを作って友達と差をつけよう！

とりあえずやってみよう

★ 背景色と背景画像を指定してみよう
<body>タグで背景色や背景画像は指定可能でしたが、
スタイルシートを使って指定することもできます。
<html>
<body style="background-color:#ffff00;">
背景は黄色です。
</body>
</html>
◆ 実行例
<body>タグのstyle属性にbackground-color:#ffff00;というスタイルシートを使用しました。
「background-color:カラーコード」と指定すれば背景色を指定することができます。
これは<table>タグや<p>タグなどの背景色にも使用できます。
同様に背景画像もスタイルシートで指定してみましょう。
<html>
<body style="background-image:url(../giguzaguma.gif);">
背景画像！
</body>
</html>
◆ 実行例
background-image:url(Ｘ);で背景画像をＸにするということです。
ＸはＨＴＭＬの時と同じようにファイル名を指定します。
style属性ではなく、直接<style>タグを使用して指定する方法もあります。
基本的に<script>タグと同じように<head> </head>内に書きます。
こちらの方法のが一般的でしょう。
<html>
<head>
<style>

</style>
</head>
<body>
背景は黄色です。
</body>
</html>
◆ 実行例
body{Ｘ}で<body>タグのスタイルをＸにするということです。
body{background-color:#ffff00;}とすれば背景色を黄色にするということです。
<table>タグのスタイルを変更したい時はtable{Ｘ}とします。
★ 背景画像を左端にだけ繰り返し表示してみよう
さて、いよいよＨＴＭＬにはできないことをやってみましょう。
ＨＴＭＬだけでは、背景画像は完全にページ全体を埋め尽くしてしまいます。
スタイルシートを使えば、左端にだけ表示させたりすることができます。
<html>
<head>
<style>

</style>
</head>
<body>
左端にだけ背景画像を表示。
</body>
</html>
◆ 実行例
左端にだけ画像が表示され、残りのスペースは黄色になりましたね。
background-repeat:repeat-y;と入れることで縦(Y)方向だけに画像が繰り返されるようになります。
横方向にしたい場合はbackground-repeat:repeat-x;としましょう。
この場合、background-image:url(../giguzaguma.gif);等は<body>タグのbackground属性で指定しても大丈夫です。
ちなみに、右端や下端に繰り返し表示したい場合は下記で説明するbackground-position:ＸＹ;を用いましょう。
右端ならbackground-position:100% 0%;、下端ならbackground-position:0% 100%;です。
★ 背景画像を右下に１つだけ表示してみよう
今度は右下に１つだけ表示してみましょう。
<html>
<head>
<style>

</style>
</head>
<body>
右下にだけ背景画像を表示。
</body>
</html>
◆ 実行例
今度は、background-repeat:no-repeat;としてひとまず繰り返さないようにしています。
これだけでは左上に１つだけ表示されてしまうので、background-position:100% 100%;と位置を指定しています。
background-position:ＸＹ;で左端からＸ、上端からＹの位置に指定することができます。
ＸＹはピクセルで指定することもできますが、ここでは%(パーセント)で比率で指定しています。
background-position:100% 100%;は右下に表示するということです。
ＸとＹが同じ値の場合はまとめて、background-position:100%;等とすることも可能です。
左下に表示したい場合は、background-position:0% 100%;とします。
★ ページ全体の余白を指定してみよう
普通にＨＴＭＬだけで記述すると左端や上端に余白ができてしまい、ピッタリ最初から文字を書いたり画像を表示させたりすることができません。
そこでスタイルシートで余白の指定をしてみましょう。
<html>
<head>
<style>

</style>
</head>
<body>
余白がない！
</body>
</html>
◆ 実行例
余白を指定するにはmargin:ＡＢＣＤ;を使います。
ＡＢＣＤは順に、上端右端下端左端からの余白です。ピクセルで指定します。
また、ＡＢＣＤが全て同じの場合はまとめて、margin:0px;等とすることができます。
上の例では余白を全てなくしています。
★ 文字の色を指定してみよう
文字の色は<font>タグでも指定可能ですが、スタイルシートを使用して指定することもできます。
スタイルシートならば、ページ全体の文字色を一括して指定することも可能です。
<html>
<head>
<style>

</style>
</head>
<body>
全ての文字が赤になる！！
</body>
</html>
◆ 実行例
上の例では全ての文字が赤になりました。基本文字色を赤にしたのです。
もちろん、<font>タグを使えばその部分は別の色にすることができます。
color:Ｘ;で文字色をＸにすることができます。
ではこれを応用してみましょう。次の例ではどうでしょうか。
<html>
<head>
<style>

</style>
</head>
<body>
<p class="p1">１＋１＝２</p>
<p class="p2">１－１＝０</p>
<p class="p3">１×１＝１</p>
<p>１÷１＝１</p>
</body>
</html>
◆ 実行例
何だか難しそうですね。でも簡単です。これを覚えてしまうと様々な応用に使えます。
<p>タグにclass属性でp1、p2、p3とつけたものと何もつけなかった式を４つ用意しました。
<style>タグでまず<body>タグのスタイルをcolor:#ff0000;とし、基本文字色を赤としました。
次に、.p1{color:#00ff00;}とありますね。
.Ｘ{Ｙ}でＸとclass名をつけたタグのスタイルをＹにするということです。最初の半角ピリオドを忘れないようしましょう。
これにより同じタグでも違ったスタイルにすることができるのです。
<p>タグとclass属性を使って部分的に背景色を変えてみましょう。これは自分でトライしてみてください。
文字のサイズを指定する場合は、font-size:Ｘ;を使用します。Ｘはピクセルなどで指定します。
文字に下線をつけるには、text-decoration:underline;とします。上線は、text-decoration:overline;です。
上線と下線を同時に両方つけることも可能です。その場合はまとめてtext-decoration:underline overline;とすることも可能です。
★ リンクの際の下線を消してみよう
<a>タグを使いリンクを張るとリンク文字の下に自動的に下線がついてしまいます。
この下線を消すにはa{text-decoration:none;}とします。
逆に下線をつけたまま、更に上線もつけたいという場合はa{text-decoration:underline overline;}とします。
もちろんclass属性を使って使い分けることも可能です。
またマウスが重なったときだけに効果をつけることも可能です。その場合はa:hover{text-decoration:overline;}等とします。
ただし、:hoverはIE4.0以上でのみ有効で、NNは対応していません。
<html>
<head>
<style>

</style>
</head>
<body>
<p><a href="../" class="link1">戻る１</a></p>
<p><a href="../" class="link2">戻る２</a></p>
<p><a href="../">戻る３</a></p>
</body>
</html>
◆ 実行例
★ 画像の表示位置を指定してみよう
これは背景画像の表示位置を指定する方法とよく似ています。
ですが、<img>タグの場合は指定方法を指定する必要があります。
<html>
<head>
<style>

</style>
</head>
<body>
<img src="../fusigidane.gif" class="icon">
</body>
</html>
◆ 実行例
position:absolute;というのは絶対位置にするということです。
絶対位置というのは背景画像を指定した時と同じ方法で左端と上端からの位置を指定します。
left:50%;は左端からの位置。top:50%;は上端からの位置です。right:50%等とすることも可能です。
絶対位置の他に相対位置というものがあります。position:relative;とします。
相対位置というのは本来の表示位置からみた相対的な位置を指定する方法です。

<html>
<head>
<style>

</style>
</head>
<body>
画像を表示します。<br>
<img src="../giguzaguma.gif" class="icon1"><br>
<img src="../fusigidane.gif" class="icon2"><br>
画像を表示します。
</body>
</html>
◆ 実行例
この場合画像が重なってしまうので重なり順をz-index:Ｘで指定しています。
Ｘの値が大きいもの程上に表示されます。値はマイナスの数でも構いません。
★ スタイルシートを全ページに統一してみよう
サイト全体の背景画像や背景色を変える時に１つ１つＨＴＭＬファイルを書き換えていては面倒です。
そこでスタイルシートを設定したファイルを１つ用意して、各ＨＴＭＬファイルから<link>タグを使用して呼び出して指定してみましょう。
以下のソースを書いて「style.css」という名前で保存してみましょう。（拡張子はcss）
body{background-color:#ffffaa;}
a:hover{color:#ffaa00;text-decoration:underline overline;}
.dekai{font-size:20px;}.aka{color:#ff0000;}
次に下のソースを書いて「test.htm」という名前で「style.css」と同じフォルダに保存してみましょう。
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
みてみて！！<span class="aka">このページ</span>！！！<br>
なんかとっても<span class="dekai">面白く</span>なりそう！<br>
<a href="test.htm">リロード</a>してみようか。 </body>
</html>
では、「test.htm」をブラウザで開いて見てみましょう。
◆ 実行例
ほら、「style.css」で指定したようにスタイルが変わっていますね。
このように外部ファイルでスタイルシートを指定することができます。
これを応用すれば全ページから同じスタイルシートを設定したファイルを呼び出してスタイルを統括することができます。
スタイルの変更も１つだけのファイルを変更するだけで可能なのでとても楽チンです。
<link rel="stylesheet" type="text/css" href="Ｘ">（Ｘはスタイルシートファイル名）
<link>タグは<head> </head>内に書きましょう。