はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
基礎知識：CSSのスタイルに付ける名前
2008/02/04
トモ・リーン
スタイルの名前の付け方って結構、奥が深いのよ～！
ケンジ
俺はわかりやすい名前をつけてるぜ！
「fontsize12」や「red」とかだね～。
トモ・リーン
おっと・・・！
引っかかったわね！！
ケンジ
えっ！
トモ・リーン
スタイルの名前に見た目の情報とか、含まない方がいいのよ。
ケンジ
ええっ！（何言ってんの、この人・・・）
トモ・リーン
たとえば・・・「contents」「point」とかね。
ケンジ
どんな見栄えになるか全然想像できないけど、いいの？
使いにくくない？？
トモ・リーン
CSSの利点にソースの使い回しが上げられるわ。
レイアウトの似ているスタイルをコピーして調整するだけで作業が終わるので楽チンよ！
色やサイズなどを書いていたら、修正を求められるたびにスタイル名を変更することにもなるから、ミスの原因になるのよ。
ケンジ
う～～ん、ちょっと想像しにくいけど、やってみるよ。
トモ・リーン
やってるうちに、便利さがわかってくると思うわよ～！
あと、CSSの仕様的に付けられない名前があるわよ。
始めに数字
ついつい付けたくなる"12px"とかも無理です。
はじめじゃなくて"type1"とかは大丈夫です。
_ （アンダーバー）を含む名前
古いブラウザだと反応しないものがありますので（といってもIE4やネットスケープ4ぐらい）気をつけましょう。
トモ・リーン
"testStyle"のように単語の境目を大文字にするのがおすすめよ！
-（ハイフン）も名前に使っても大丈夫だけど、作業中に意識が遠くなったときとか間違って_（アンダーバー）とかにしてしまうのが怖いので、どうしてもハイフンじゃないとダメなときとか使わないわね～。
今回のポイント！
「見た目」じゃなくて「意味」を考えてスタイル名を付けよう！
トラックバック(0)
このブログ記事を参照しているブログ一覧：基礎知識：CSSのスタイルに付ける名前
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/56
コメントする
名前
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