はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
基礎知識：idとclassの使い分け
2008/03/03
トモ・リーン
idとclassって使い分けてる？
ケンジ
なんか、idはメンドくさいからclassばっかり使ってるぜ！
トモ・リーン
おっと・・・！　やるわね！！
ケンジ
ふっ・・・。
トモ・リーン
classのスタイルは何回でも使えるけど、idで指定したスタイルは1ページに1回しか使えないのよね～。
だから使いどころが限られているわ。
JavaScriptでもidを使うので、かぶらないように気をつけないとダメだしね。
ケンジ
ふっ・・・。
やはりな・・・。
idはなんか面倒だと俺の野生のカンが絶叫したんだ・・・！
トモ・リーン
でも、便利なこともあるのよ。
ケンジはDreamweaverを使ってるわよね？
ケンジ
ああ・・・。
なんてったって、俺は職業コーダーだからな・・・。
トモ・リーン
実はidで指定したスタイルはDreamweaverのプロパティのスタイルのプルダウンに出てこないのよ。（下記イメージ参照）
Dreamweaverのプロパティのスタイルのプルダウンのイメージ
ケンジ
で？
トモ・リーン
ナビゲーション周りなど、基礎工事用のスタイルは何回も使うものじゃないからidで作っておくと、ここのプルダウンにはclassで指定したものしか出ないからスッキリしていいわよ～。
ケンジ
あーーーーーっ。
それいいね！ 今度やってみるよ～。
トモ・リーン
あと、classは重ね付けできるわ。
こんな感じ↓
<p class="tomoring majiGire">
この場合"tomoring"と"majiGire"の効果がpタグにかかるのよ。
ケンジ
それもいいね！ 今度やってみるよ～。
今回のポイント！
  1. idは同じものを1ページに1回しか使えないので気をつけよう！
  2. classは重ね付けできる！
トラックバック(0)
このブログ記事を参照しているブログ一覧：基礎知識：idとclassの使い分け
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/58
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4