 |
 |
スタイルシート見習所
スタイルシートの超基本
■スタイルシートとは
文章の構造を記述するための言語HTMLの見た目、レイアウト的なデザイン要素を記述する標準仕様が「Cascading Stype Sheet」(カスゲーティングスタイルシート：ＣＳＳ)です。
■セレクタによる指定（通常）
これは、「セレクタ」の「属性」を「値」にするという指定になります。たとえば、「H1 {color:red;}」の場合、「H1」タグで囲まれた部分の「カラー」を「赤」にする、という意味になります。
複数セレクタに同じスタイルを設定することもできます。その場合は「,」カンマでつなげます。
複数のセレクタの組み合わせにスタイルを設定する場合は、「 」（半角スペース）でつなげます。
<style type="text/css">
H1,H2 {color:blue; font-style:italic;}
P STRONG{color:red}
</style>
<body>
<H1>H1タグです。</H1>
<H2>H2タグです。</H2>
<p> Pだけの場合です。<br>
<STRONG>P+STRONGの場合です。</STRONG>
</P>
<STRONG>STRONGだけの場合です。</STRONG>
</body> |
イメージとしては、「このタグ内は必ずこのスタイルになる」というスタイルの設定の仕方です。
以上のスタイルシートの見本はこちら。
■セレクタによる指定（IDとCLASS）
特殊なセレクタとして「ID」や「CLASS」があります。これは、任意の属性をあらかじめ定義しておき、必要に応じて呼び出し適用すると言うものです。
タグの要素としてIDで指定します。→<タグ id="ID名">
タグの要素としてクラスで指定します。→<タグ class="クラス名">
以上のスタイルシートの見本はこちら。
<style type="text/css">
.red {color:red;}
.italic {font-style:italic;}
</style>
<body>
<H1 class="red">H1タグにredを適用した場合です。</H1>
<font class="italic">FONTにitalicを適用した場合です。</font><br>
<font class="red">FONTにredを適用した場合です。</font>
<p class="italic">この段落の文字全てにitalicを適用しています。</P>
ここだけスタイルシートを適用していません。
</body> |
上記と異なり「設定したタグ」にしかスタイルが反映されません。
以上のスタイルシートの見本はこちら。
■疑似クラス・疑似要素
疑似クラスは要素の状況やタイミングにスタイルを設定する方法です。疑似要素は要素内の特定の箇所に対してスタイルを設定する方法です。
<style type="text/css">
A:link {color:red;}
A:visited {color:gray;}
A:active {color:yellow;}
A:hover {color:green;}
input:focus { clolr:blue;}
</style>
<body>
<a href="#">リンク</a>
<br>
<form>
<input type="text" name="text">
<input type="submit" name="submit" value="送信">
</form>
</body> |
以上のスタイルシートの見本はこちら。
■スタイルシート内のコメント
スタイルシートの中でコメントを書く場合は上記のようにします。
スタイルシート一覧
みつけたきせきブログ大作戦
このほか、みつけたききのブログにて、スタイルシートの一覧を表示しています。
⇒みつけたブログ大作戦
|
|
|
 |
