はじめての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の使い分け
コメントする
名前
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