スタイルシートの指定の仕方について書かれています。皆さんは、HTMLの<HEAD>〜</HEAD>内、つまりヘッダーでスタイルシートの指定をする際、どのようにしているでしょうか？おそらくほとんどの人が、おっ！？ここのスクロールバーいい感じジャン♪ とか思うと、早速ソース表示をして、ヘッダーに書かれている、
<STYLE>
<!--
BODY{
scrollbar-3dlight-color:gray;
scrollbar-face-color:darkgray;
scrollbar-arrow-color:gainsboro;
scrollbar-highlight-color:gainsboro;
scrollbar-shadow-color:gainsboro;
scrollbar-darkshadow-color:gray;
scrollbar-track-color:gainsboro;}
-->
</STYLE>
おそらくこんな部分をコピーしてきて自分のページに貼ったりしているのではないでしょうか？
ソースを見てみると、このような感じではないでしょうか？
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<style type="text/css">
<!--
body,td {color : #ff0080; font-size : 8pt; }
a:link {text-decoration: none; color: #ff00ff; }
a:visited {text-decoration: none; color: #ff0080; }
a:active {text-decoration: none; color: #ff0000; }
a:hover {text-decoration: underline overline; color: #ff6699; background-color: #ffffff
}
-->
</style>
<STYLE type="text/css">
<!--
BODY {
BORDER-BOTTOM: #ffffff 5px solid;
BORDER-LEFT: #ffffff 5px solid;
BORDER-RIGHT: #ffffff 5px solid;
BORDER-TOP: #ffffff 5px solid;
scrollbar-3dlight-color:gray;
scrollbar-face-color:darkgray;
scrollbar-arrow-color:gainsboro;
scrollbar-highlight-color:gainsboro;
scrollbar-shadow-color:gainsboro;
scrollbar-darkshadow-color:gray;
scrollbar-track-color:gainsboro;}
FONT-FAMILY: 'Comic Sans MS';
};
-->
</STYLE>
</HEAD>
<BODY>
スタイルシート
</BODY>
</HTML>
と、こんな風にスタイル指定がされていることと思います。しかし、これですと、かなり汚いソースといえるのではないかと思います。この例などはまだいい方かもしれません。あなたのページはどうですか？もし、上の例のように記述がされていたら、きちんときれいに自分なりの書き方のパターンのようなものを作り、それにしたがって記述するようにしましょう。基本的に、
<HEAD>〜</HEAD>内に<STYLE>〜</STYLE>は一つあれば十分です。
スタイルの指定方法は、簡単にくだいて言うと、
このタグの { 何を : こうしろ ; }
と書かれています。一つのタグに複数の指定をする場合は、
このタグの { 何を : こうしろ ; 何を : こうしろ ; 何を : こうしろ ; }
と書かれています。つまり具体的に書くと
BODY { color : black ; background-color : white; font-size : 12pt ; }
と、このようになるわけです。
また、同じスタイル指定を複数のタグに対しておこなう際は、
タグ名1,タグ名2 { 何を : こうしろ ; 何を : こうしろ ; 何を : こうしろ ; }
と、半角カンマ区切りで、複数のタグを指定することができます。具体的に書くと、
BODY,TD { color : black; background-color : white; font-size : 12pt; }
と、このようになります。
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<style type="text/css">
<!--
body,td {color : #ff0080; font-size : 8pt; }
a:link {text-decoration: none; color: #ff00ff; }
a:visited {text-decoration: none; color: #ff0080; }
a:active {text-decoration: none; color: #ff0000; }
a:hover {text-decoration: underline overline; color: #ff6699; background-color: #ffffff
}
-->
</style>
<STYLE type="text/css">
<!--
BODY {
BORDER-BOTTOM: #ffffff 5px solid;
BORDER-LEFT: #ffffff 5px solid;
BORDER-RIGHT: #ffffff 5px solid;
BORDER-TOP: #ffffff 5px solid;
scrollbar-3dlight-color:gray;
scrollbar-face-color:darkgray;
scrollbar-arrow-color:gainsboro;
scrollbar-highlight-color:gainsboro;
scrollbar-shadow-color:gainsboro;
scrollbar-darkshadow-color:gray;
scrollbar-track-color:gainsboro;}
FONT-FAMILY: 'Comic Sans MS';
};
-->
</STYLE>
</HEAD>
<BODY>
スタイルシート
</BODY>
</HTML>
と、こんな風にスタイル指定がされていることと思います。しかし、これですと、かなり汚いソースといえるのではないかと思います。この例などはまだいい方かもしれません。あなたのページはどうですか？もし、上の例のように記述がされていたら、きちんときれいに自分なりの書き方のパターンのようなものを作り、それにしたがって記述するようにしましょう。基本的に、
<HEAD>〜</HEAD>内に<STYLE>〜</STYLE>は一つあれば十分です。
スタイルの指定方法は、簡単にくだいて言うと、
このタグの { 何を : こうしろ ; }
と書かれています。一つのタグに複数の指定をする場合は、
このタグの { 何を : こうしろ ; 何を : こうしろ ; 何を : こうしろ ; }
と書かれています。つまり具体的に書くと
BODY { color : black ; background-color : white; font-size : 12pt ; }
と、このようになるわけです。
また、同じスタイル指定を複数のタグに対しておこなう際は、
タグ名1,タグ名2 { 何を : こうしろ ; 何を : こうしろ ; 何を : こうしろ ; }
と、半角カンマ区切りで、複数のタグを指定することができます。具体的に書くと、
BODY,TD { color : black; background-color : white; font-size : 12pt; }
と、このようになります。
以下にある左側のスタイル指定は管理人がWEBを探索中にとあるサイトで発見したスタイルシートの指定です。右側はそれを元にして管理人がまとめてみました。
 |
|
|||
|
|
|
||
|
|
どちらも指定しているスタイルは変わりません。しかし、ソースの美しさは一目瞭然です。
皆さんもきれいなソースになるように心がけましょう・・・って、あんまり人のこと言えないんですけどね。