CJ Club TOP
/
JavaScript
/StyleSheet
What's StyleSheet ??
□ スタイルシートとは、簡単にいえばページの見栄えをよくする記述法です。
□ 詳しいことは
とほほのWWW入門
のスタイルシートをみると大変勉強になります。
<A HREF="http://www.custom-click.com/cgi-bin/cn.cgi?MID=m111387&FL=1" TARGET="_blank"><IMG SRC="http://www.custom-click.com/cgi-bin/vn.cgi?MID=m111387&FL=1" ALT="" WIDTH=468 HEIGHT=60 BORDER=0></A>
基本てきな事
基本的には以下のように記述します。
<span STYLE="color: red">スタイルシート</span>
<div STYLE="color: red">スタイルシート</div>
他にもいろいろなタグで使用できます。
<p STYLE="color: red">スタイルシート</p>
<h4 STYLE="color: red">スタイルシート</h4>
<p> と <h4> は、それぞれ段落タグと題名タグなので表示の際、行間があきます。
他にもスタイルシートでフォントに指定できる項目は、たくさんありますが一部のみ紹介します。
font-size:
size
(STYLE="font-size: ***")
フォントサイズを指定します。長さの単位は以下のとおりです。(ブラウザによっては表示が崩れることもあります。)
1cm - センチメートル
1in - インチ(1in=2.54cm)
1mm - ミリメートル
1pt - ポイント(1pt=1/72in)
1pc - パイカ(1pc=12pt)
1em - フォントの高さ
1ex - 文字 x の高さ
1px - ピクセル
1% - パーセンテージ(通常フォントに対しての割合)
現在の状況では pt の単位を使用するのが一般的なようです。例えばこのページの font-size は font-size: 10pt です。ブラウザによっては他のものを使用すると表示が崩れる事が多々あります。使用するときには気をつけましょう。
font-style:
style
(STYLE="font-style: ***")
normal(通常)、italic(イタリック)、oblique(斜め)、のいずれかを指定します。
italic と oblique は、最初から斜体のフォントを使用するか、ムリヤリ斜体にするかの違いです。
font-family:
family, family,...
(STYLE="font-family: ***,***,...")
フォントを指定します。「ＭＳ Ｐゴシック」などですね。カンマ( , )で区切り複数指定すると、フォントが対応していない場合次のフォントで表示します。NNではうまく表示されない事が多いです。
color:
color
(STYLE="color: #******")
フォントなどのカラーを指定します。16進数（#FFFFFF など）で指定するのが一般的です。
いっぺんに指定しちゃうのよ
そのページの<h4>タグの文字をすべて STYLE="color: red" にしたい時は、<head>内タグに指定する事によって簡単にできます。
<html>
<head>
<title>sample</title>
<STYLE TYPE="text/css">
<!--
H4 { color: red }
-->
</STYLE>
</head>
<body>
<h4>あアAa亜</h4>
</body>
</html>
<!---->タグ内(コメントタグ)に入れるのは対応していないブラウザで、誤作動を防ぐためです。(コメントタグをサポートしていないブラウザは少ないので。)
基本+てきな事
いっぺんにいくつも指定しちゃうのよ。
<head>内指定で複数のタグを指定できます。
<STYLE TYPE="text/css">
<!--
H4 { color: red }
H5 { color: red }
-->
</STYLE>
上記のは<h4><h5>のタグを STYLE="color: red" に指定するという意味ですが、下記のも上記のとまったく同じ意味をもつことになります。
<STYLE TYPE="text/css">
<!--
H4
,
H5 { color: red }
-->
</STYLE>
つまり、カンマ（,）で区切る事によって複数のタグを同じように処理できます。
いっぺんにいろいろ指定しちゃうのよ。
属性も複数指定できます。その場合はセミコロン（;）で区切ります。
<STYLE TYPE="text/css">
<!--
H4,H5 { color: red
;
background: yellow }
-->
</STYLE>
これは文字色を赤、背景色を黄色にするという動作です。
人間は忘れる生き物なので…
コメントを記入する事もできます。/*...*/がコメントになります。
<STYLE TYPE="text/css">
<!--
H4,H5 { color: red
;
background: yellow } /* 赤い文字 背景黄色 */
-->
</STYLE>
クラスの一部
定義済みクラスがありますが、その場合はセミコロン（;）で区切ります。基本的には<a>タグ以外の定義済みクラスはサポートされてないものが多いのでまだ使わないのが賢明でしょう。
<STYLE TYPE="text/css">
<!--
A:link { color: green }
A:visited { color: blue }
A:active { color: red }
A:hover { color: red }
-->
</STYLE>
;link（未リンク）;visited（既リンク）;active（リンク中）となっています。;hover はIE4からサポートされ、NN4はサポートされていません。
外部ファイルで指定
スタイルシートを他のファイルで定義する事もできます。複数のファイルで共有でき、変更する際も一つのファイルを変更するだけなので便利です。例えば、style.css というファイルを作ったら、その内容は定義部分だけで結構です。
A:link { color: green }
A:visited { color: blue }
A:active { color: red }
A:hover { color: red }
H4,H5 { color: red }
と、こんな感じで作ったら、スタイルシートを使うファイルの<head>タグ内からから指定します。
<LINK REL=StyleSheet HREF="./style.css">
StyleSheetのSample集
□
BACK
<A HREF="http://www.ad.cyberclick.net/perl-bin/link?h=3523&n=1" TARGET="_blank"><IMG SRC="http://www.ad.cyberclick.net/perl-bin/bh?type=img&h=3523&n=1" ALT="" WIDTH=468 HEIGHT=60 BORDER=0></A>
