はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
基礎知識：セレクタの付け方
2009/04/03
- トモ・リーン
-
へーい！お久しぶり！！
- ケンジ
-
実はもう二度と、会うことも無いかと思ってたけどね〜！
- トモ・リーン
-
今回は、セレクタの付け方の基礎を解説します。
- ケンジ
-
確かにこれは、慣れるまで俺も適当にしてたよ〜。
- トモ・リーン
-
・・・・・・。
- トモ・リーン
-
基本のセレクタの付け方は、こんな感じです。
セレクタの付け方：基本
- タグ指定
/* CSS */
body { border: 1px solid #F00; }- クラス指定
/* CSS */
.sample { border: 1px solid #F00; }- id指定
/* CSS */
#sample { border: 1px solid #F00; }- 全要素指定
/* CSS */
* { border: 1px solid #F00; }- *(アスターリスク)にプロパティを付けると全ての要素に指定することが出来ます。
- ケンジ
-
ふむふむ、基本はオッケーだぜ！！
セレクタの付け方：応用
- 親子（入れ子）関係でプロパティを指定することが出来ます。
- ulの中にあるliタグに、指定。
/* CSS */
ul li { border: 1px solid #F00; }
- 特定のclassが付いている要素の中のpタグに指定。
/* CSS */
.sample p { border: 1px solid #F00; }
- 特定のidが付いている要素の中のpタグに指定。
/* CSS */
#sample p { border: 1px solid #F00; }
- 疑似クラスが付いている場合の親子（入れ子）関係でプロパティを指定する方法。
- 疑似クラスについては「デザイン通りに組む！ ～ボタン2：ロールオーバ～」が参考になります。
/* CSS */
.sample a:hover { background:#FFF; }
- 同じclassでも付いているタグによって挙動を替える。
/* CSS */
div.sample { border: 1px solid red }
p.sample { border: 1px solid blue }
- 同じような書き方がidでも出来ますが、1ページに付き同じidを2回以上使うとidの仕様的に間違った使い方なので、あまりやることがありません。
- 疑似クラスが付いている場合で、同じclassでも付いているタグによって挙動を替える書き方。
/* CSS */
h3.sample:first-letter { color:red; font-size:3em }
p.sample:first-letter { color:blue; font-size:3em }
- ところで、疑似クラスの例で出した、first-letterは結構オモシロ便利ですよ。
- トモ・リーン
-
実際には応用の組み合わせで、もっと色々な書き方が出来るわよ。
セレクタの付け方：継承
- 複数のセレクタがかかる状態の場合は、設定されたプロパティ全て反映されます。
/* CSS */
p { border: 1px solid #F00; }
.sample { color: #F00; }- この場合、border: 1px solid #F00とcolor: #F00の効果が反映されます。
セレクタの付け方：読み込み順
- 同じプロパティの情報が重なっている場合は、後から書かれている方が優先されます。
/* CSS */
p { border: 1px solid red; }
.sample { border: 1px solid blue; }- この場合、後から書かれているborder: 1px solid blue の効果が反映されます。
- ケンジ
-
ふむふむ、なんか分かったような気がするぜ・・・。
- 今回のポイント！
- きちんとCSSを書いているのに、反映されない場合は、セレクタの付け方を再確認してみましょう。
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：基礎知識：セレクタの付け方
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/134
- コメントする
- やさしいCSSはじめます。
- 下準備：テキストエディタ！
- 下準備：ブラウザチェック
- 基礎知識：DOCTYPE宣言
- 基礎知識：CSSのスタイルに付ける名前
- 基礎知識：idとclassの使い分け
- 基礎知識：CSSはどこに書く？
- 基礎知識：セレクタの付け方
- 実技：セレクタの付け方
- CSS組みの時の作業の流れ
- 情報の意味を考えながらHTMLコーディング
- レイアウトを組んでみる！ ～idについて～
- レイアウトを組んでみる！ ～floatについて～
- デザイン通りに組む！ ～文字サイズ～
- デザイン通りに組む！ ～文字サイズ 応用～
- デザイン通りに組む！ ～フォントの形の設定について～
- デザイン通りに組む！ ～背景画像～
- デザイン通りに組む！ ～画像置換～
- デザイン通りに組む！ ～ボタン～
- 基礎知識：インライン要素とブロック要素
- デザイン通りに組む！ ～ボタン2：ロールオーバ～
- デザイン通りに組む！ ～背景応用：見出しとか～
- デザイン通りに組む！ ～汎用性のある設計＋clearfix～
- デザイン通りに組む！ ～配置指定～
- デザイン通りに組む！ ～透過PNG～
- CSSファイルを見やすく整頓！！
- Firefoxの便利な機能拡張：Web Developer
- Firefoxの便利な機能拡張：Firebug
- Firefoxの便利な機能拡張：Page Saver Basic
- Firefoxの便利な機能拡張：「ScrapBook」「IE Tab」
- 印刷用CSS：メディア指定
- 印刷用CSS：ブラウザ別見え方の違いと特徴 背景画像
- 印刷用CSS：webページの横幅について
- 印刷用CSS：色々な印刷CSSの手法について
- 印刷用CSS：ナビゲーション削除タイプ
- 印刷用CSS：印刷用に全く違うレイアウトを作る
- 印刷用CSS：スクリーンと全く同じように印刷する
- 印刷用CSS：その他もろもろテク紹介
- CSSハックとIEの条件分岐
- とりあえず、ネタ切れなので
- オススメ本
- HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！
- 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！
- オススメCSSのサイト
- TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト
- CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！
- オススメ勉強会
- CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。
- Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。
- 螺旋デザインメンバーも執筆に参加！
XHTML+CSS プロが教える“本当の使い方”現場で培われたXHTML+CSSのテクニックを徹底解説!!
- 話題のiPhoneアプリ
大藤幹のHYML/XHTML辞典HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪
-
myPANTONE色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
