Webデザイン:オンラインリファレンス

高度なスタイル指定方法

jQueryへの布石(参考)

以下の参考項目を知っておくと,2年開講の「Webプログラミング」で役に立ちます.

限られた範囲内のタグにスタイルを適用する

例えば,HTMLとCSSで,それぞれ
064-01.png
064-02.png
のように記述すると,
064-03.png
のように,同じ<img>タグであっても,それらを囲む<p>タグ(実際にはclass)が異なっているので,そのclass名を使って,スタイルが適用される範囲を限定することができる.※上記の例では,スペースの関係上,altオプションとtitleオプションを省略している.
このように,あるセレクタと,それを包括するセレクタとを半角スペースで区切ってならべる(包括する方を先に記述する)と,スタイルの適用範囲を限定させることができる.

異なるタグに同じスタイルを適用する(参考)

例えば,HTMLとCSSで,それぞれ
064-04.png
064-05.png
のように記述すると,
064-06.png
のように,いずれのタグで囲まれた部分について,同じデザイン(文字色が赤,枠線が青の実線)で表示される.
このように,スタイルシートの異なる複数のタグを半角カンマ「,」で区切ってならべると,異なるタグであっても同じデザインを適用させることができる.

あるタグの直下のタグにスタイルを適用する(参考)

例えば,HTMLとCSSで,それぞれ
064-07.png
064-08.png
のように記述すると,
064-09.png
のように,同じ<div>タグ内に<span>タグが含まれていても,1番目の例は<div>→<span>の順にタグが並んでいるので,<span>は<div>の直下のタグである.このためスタイルが適用されるが,2番目の例は<div>→<p>→<span>となっていて間に<p>タグをはさんでいるので<span>は<div>の直下のタグではなく,スタイルが適用されない.
このように,あるセレクタと,それを包括するセレクタとを">"で区切ってならべると,あるタグの直下のタグだけにスタイルを適用できる.

隣り合うタグにスタイルを適用する(参考)

例えば,HTMLとCSSで,それぞれ
064-10.png
064-11.png
のように記述すると,
064-12.png
のように,同じ<h1>タグ内に隣り合う<p>タグに対してだけスタイルを指定することができる.
このように,あるセレクタと,それを包括するセレクタとを"+"で区切ってならべると,あるタグに隣り合うタグだけにスタイルを適用できる.
↑インデックスに戻る←前の項目(065. なぜindex.htmlなのか)→次の項目(067. ナビゲーション)