スタイルシート導入編

 　リンクの解説でも少し触れましたが、スタイルシートを用いるとHTMLのみでは出来なかった事が出来る様になるだけでなく、タグに細かな指定をする手間が省けたりする等様々な利点があります。
　ここではスタイルシートの使い方と極簡単な例を紹介します。
　タグごとに使用できる属性は異なるので、詳しい事は各自で調べてください。

スタイルシートの指定の仕方１


<A href="index.html" style="text-decoration:none">トップページヘ</A>

　まずは先にも述べたタグに直接書く方法。次に書く方法でカバーしきれない場合など細かな指定に使うのが良いでしょう。全ての指定をこれだけでやるのはお勧めしません。

スタイルシートの指定の仕方２

<HTML><HEAD>
 <STYLE><!--
 A {text-decoration:none;}
 --></STYLE>
</HEAD>
<BODY>

<A href="index.html">トップページヘ</A>

</BODY></HTML>

　STYLEタグを使った書き方です。ページの途中に書く事も出来ますが、通常はヘッダ情報としてページ全体の指定をまとめて行います。例ではAタグに対してスタイルシートを設定しており、この様に書くとそのページ全てのAタグの下線を消す事が出来ます。
　この様にスタイルシートはそのページのタグごとの設定を行い、ページ全体のレイアウトを決定できるという特徴があります。
　それからSTYLEタグ内の要素をコメントタグで囲っているのは、スタイルシートが有効でないブラウザでその内容が表示されてしまうのを防ぐ為の配慮で、そもそもヘッダ情報として書くのでまず表示されないはずですし、そういったブラウザを使う人ほとんどいないでしょうけど念の為、というものです。

スタイルシートの指定の仕方３

<HTML><HEAD>
 <STYLE><!--
 #noline {text-decoration:none;}
 --></STYLE>
</HEAD>
<BODY>

<A href="index.html" id=noline>トップページヘ</A>

</BODY></HTML>

　ＩＤを用いた指定法です。スタイルシートのタグ名を指定するところに「#ＩＤ名」と書き、その内容を反映したいタグにid=ＩＤ名と書くだけです。
　同一のタグで異なる設定を使いたい場合などに有効ですが、原則として１つのページ内に同一のＩＤを付けたタグを複数作ったり、１つのタグに複数のＩＤを付けたりしてはいけません。
　ＩＤはどちらかというとJavaScriptのgetElementByIdでタグを特定するために使用するといったものなので、単なるページデザインには複数指定などに制約のないクラス名を使うのが無難です。

スタイルシートの指定の仕方４

<HTML><HEAD>
 <STYLE><!--
 .noline {text-decoration:none;}
 .bold {font-weight:bold;}
 --></STYLE>
</HEAD>
<BODY>

<A href="index.html" class="noline bold">トップページヘ</A>

</BODY></HTML>

　クラス名を用いた指定法です。ＩＤとは#が.になるという書き方だけでなく、１つのページ内で複数のタグに使いまわしたり、１つのタグに複数のクラス名を指定できるのが大きな違いです。
　例の内容だけだと、わざわざ複数のクラスに分けず、１つのクラスでまとめて定義してしまっても構いませんが、分かり易いクラス名を付けることで、独自の属性のような使い方が出来ます。

スタイルシートの指定の仕方５

style.css

A {text-decoration:none;}

〜.html
<HTML><HEAD>
 <LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>

<A href="index.html">トップページヘ</A>

</BODY></HTML>

　スタイルシートの設定を書いた"style.css"というファイルを用意し、LINKタグでその内容を読み込んで使用します。この例でもそのページ全てのAタグの下線を消す事が出来ます。設定ファイル内の書き方は例２，例３でSTYLEタグの間に書いたものと同じ形式となります。
　この方法の利点は、同じファイルを各ページで読み込んでおけば、各ページのデザインが統一されるだけでなく、そのファイルを修正するだけで全てのページのデザインに反映されるということです。
　ページごとに細かな調整をしたい場合は、LINKタグの後に上記のSTYLEタグによる指定やタグ内指定をすればそちらが優先されます。

具体例１

<HTML><HEAD>
 <STYLE><!--
 BODY {font-size:13px;color:#000040;}
 B,I {font-size:16px;}
 H5 {font-size:large;color:#FF8000}
 --></STYLE>
</HEAD>
<BODY>

ふと見知った誰かを見かけた時、チャットに知り合いが現れた時、<br>
<B>「あ、○○さんだ。」</B>と思った瞬間、<br>
<H5 style="font-size:large;">「○○サンダー！」</H3>
という<I>魔法</I>か<I>必殺技</I>が脳裏に浮かんだ事はありませんか？<br>
このサイトはそんなどうでもいい事を大事にしたりしなかったりする、<br>
そんな感じのところです。<br>

</BODY></HTML>
↓
ふと見知った誰かを見かけた時、チャットに知り合いが現れた時、
「あ、○○さんだ。」と思った瞬間、
「○○サンダー！」
という魔法か必殺技が脳裏に浮かんだ事はありませんか？
このサイトはそんなどうでもいい事を大事にしたりしなかったりする、
そんな感じのところです。

　BODYタグにスタイルシートを適応すればページ全体の基本設定が可能です。そしてタグ名を","で区切って書いておけば、複数のタグにまとめて指定する事が出来、HTMLの入れ子同様内容によっては効果を重複させる事も出来ます。
　スタイルシートによる文字サイズの指定は、FONTタグとは異なり完全な絶対値指定が可能です。"○○px"と書けばpixel単位の指定です。もちろん数百pixelという事も可能ですが、絶対値指定の使い道はブラウザの文字サイズ設定に影響されないというところです。
　環境によって多少の誤差はあれ、見る人によってテーブルの形が崩れたりすることがほとんど無くなるので便利に思われますが、逆に強制的に文字サイズを変えられるのを嫌がったりしてスタイルシートを切る人もいる様です。
　しかしそのような人の事まで配慮するのは難しい話ですし、そういう人はデザインが崩れる事を覚悟の上なはずなので、使う場合はとことんこだわってしまうのも一つの考え方だと思います。

具体例２

<HTML><HEAD>
 <STYLE><!--
  A {text-decoration:none;line-height:16px;}
  A:active {color:#008000;text-decoration:underline;}
  A:hover {font:italic bold 16px/14px serif;color:#0040FF;text-decoration:underline;}
  A:visited {color:#FFD0D0;}
 --></STYLE>
</HEAD>
<BODY>
<A href="index.html">トップページヘ</A>

</BODY></HTML>

　　　↓
トップページヘ

　スタイルシートによるリンク文字色の指定です。
　５つ並んでいますが、上からAタグ全般、未訪問、既訪問、訪問中、選択中となっています。 　注目すべきはhoverで、マウスポインタをリンクした文字列に置いた時の設定をする事が出来ます。また、activeとhoverはvisitedより下に書かないと有効で無い様なので気を付けてください。

具体例３

<DIV style="font-size:32px;line-height:10px">@@Thunder!</DIV>
<DIV style="font-size:10px;line-height:10px">○○さんだー</DIV>
　　　↓
@@Thunder!
○○さんだー

　なんと文字が重なっています。文字の大きさを見かけとは違う様に指定しているからです。ここまで重ねなくとも多少行間を詰めたり、逆に字間，行間を空ける事もできます。
　上の様にただ重ねると見づらいだけですが、タイトルロゴなど使い方次第でしょう。しかしスタイルシートを使わない場合に比べ大きく見た目が変わってしまうので、スタイルシートを切った方の事も考える場合は使い過ぎない方がいいかもしれません。

具体例４

<DIV style="size=24px;width:100%;
	filter:DropShadow(color=#808080,offX=10,offY=5)">@@Thunder!</DIV>
<DIV style="size=24px;width:100%;filter:FlipH()">@@Thunder!</DIV>
<DIV style="size=24px;width:100%;filter:Shadow(color=#808080)">@@Thunder!</DIV>
　　　↓
@@Thunder!
@@Thunder!
@@Thunder!

　フィルタという機能です。HTMLでは出来なかった影付け等の装飾が可能になるのですが、一番の特徴は画像にも有効であるという点です。
　但しこれは処理そのものが遅いという欠点もあります。
≪Index　 ≪Back　 Next≫