スタイルシートの一覧です。必要な時に、必要なものを。辞書代わりに使ってくださいませ(^_-)-☆

ようこそ！スタイルシートの森へ♪

セレクタの種類

セレクタとは、「スタイルシートの書き方」で書いたとおり、スタイルを適用する対象です。たとえば、タグ（要素）がこれにあたります。実際にはタグ（要素）のほかにもいくつかあります。以下がその種類です。

1. タグにスタイルを設定する
2. 任意の範囲にスタイルを設定する
3. タグの相関関係でスタイルを設定する
4. 擬似クラス・擬似要素

なんだか難しい言葉が出てきましたが・・・。別に難しくはありません＾＾； この手の業界は難しく表現するのが好きなんです(^^♪

１、タグにスタイルを指定する

これは、タグ（要素）をセレクタにしたものです。一番頻繁に使いますね。複数のタグに同じスタイルを指定したい場合、カンマ（,）で区切ります。

２、任意の範囲にスタイルを指定する

これは、class属性やID属性を使って、特定の範囲にスタイルを適用させたい場合に使います。これらは名札をつけるという意味になります。
a1や b1はそれぞれクラス名とID名になります。クラス名、ID名は半角英数字で好きな文字をつけれます。ただし、一文字目は必ず英字にしましょう。

これは非常に便利なもので、かなり頻繁に使います。使い方は、
HTML文書内に<p>タグが複数あるとします。（だいたいそうですが＾＾；）その場合、スタイルシートでpタグにスタイルを指定すると、すべてのpタグで有効になってしまいます。ある特定のpタグだけ色やサイズを変えたい場合などに使います。

使用例です

HTML文書内の<p>タグにclass かidを指定します。どちらでも構いませんが、classでいいと思いますよ。

これで、このpタグに「a1」という名札（class）をつけたことになります。これをスタイルシートで色などを指定します。
classを使用した場合、class名の前には必ずドット（.）をつけます。idを使う場合はシャープ（#）をつけます。

これで、クラス名を指定した箇所だけが文字色が赤になり、ほかのpタグは黒になります。

また、div要素 や span要素である特定の範囲を指定することもできます。
spanは扱いが難しいので、なるべくdivを使いましょう。このページのソースを表示すれば、なんとなくわかると思います。

divタグに対して、class名をつけます。比較的広い範囲の指定をしたい場合に便利です。

例
<div class="a1">・・・・</div>

３、タグの相関関係でスタイルを指定する

たとえば、pタグ（要素）の中のstrongタグ（要素）に対してスタイルを指定したい場合や、ある特定の範囲（classによる指定など）のなかの要素に対してスタイルを指定する場合などに利用します。親要素（ここではpタグ）のあとに半角のスペースを入れて、そこに子孫の要素であるstrongを記入します。

例

こうすことで、pタグのなかのstrongタグだけを、ほかのstrongタグとは違うスタイルを適用することができます。これも結構便利なものなので、いろいろ試してみましょう。

４、擬似クラス・擬似要素

これはおもにリンク（aタグ）に対して指定するものです。リンクは必ず使うものなので、頻繁に使うと思いますよ。また、面白い効果を与えることもできるので、いろいろ試してみましょう(^^♪

• :link・・・まだ見ていない（キャッシュされていない）ページへのリンク
• :visited・・・すでに見た（キャッシュされている）ページへのリンク
• :hover・・・マウスカーソルがその文字の上に来たとき
• :active・・・リンク部分を選択した瞬間（実際は必要ないかも＾＾；見れないし（笑））

以下のような書き方です

これを実際に表すと

また、これにはさらに、背景や文字の位置を動かすこともできます。
hoverを見てみてください
背景を設定した場合

こうすると、

文字の位置を移動させる

とすると、