わたし的、よくやるクラスネーミング

<div class="items">→一覧とかで使う。複数形な名前にするとピンとくる。

  <div class="item">→単数形で使う。ここから1ブロックだよ、という目印。
     <div class="item_head">ヘッダ的な部分</div>
     <div class="item_body">内容的な部分
       <div class="item_text">本文的な部分</div>→<p>タグでもいいかもしれない。
       <div class="item_data">データ的な部分</div>
       <div class="item_pict"><img src="img/" /></div>→回り込むなら文章の頭に入れてfloatさせるのがいいけど。
     </div>
     <div class="item_foot">フッタ的な部分</div>
   </div>

   <div class="item">
     <div class="item_head">ヘッダ的な部分</div>
     <div class="item_body">内容的な部分
       <div class="item_text">本文的な部分</div>
       <div class="item_data">データ的な部分</div>
       <div class="item_pict"><img src="img/" /></div>
     </div>
     <div class="item_foot">フッタ的な部分</div>
   </div>

</div>

divで書いてるところは、h2やpやulやliなどになっていっていいと思います。
クラス名が少ない方が、イケてると思ってた時期もあったけど、CMSと連動させたとき、扱いやすいのは、適切なクラス名がついていて、どれだけcss側から、細かい見栄えの変化を動的につけられるかの技量にかかってますね。
上手いコーディングって、そういう観点でいうんじゃないかなって思います。
例えh2やpにしたとしても、クラス名はつけておいたほうが、h2をh3にシフトさせたいときなんかは、クラス名で管理するのが有効だし、 どれだけわかりやすいクラス名のバリエーションを叩きだせるか、かな?と、日々考えが変わってきています。

Comments:3

わさび 2008年6月29日 01:48

こんにちは〜。
いつもこっそり読んでます。
なかなか役立つサイトですね。
僕はデザインをメインにweb関係で仕事をしているのですが、
最近はコーディングを覚えようかなと考えています。
そこでちょっとお聞きしたいのですが
コーディングに使っているソフトを教えて欲しいのです。
Dreamweaverはもちろんなんですが
テキストエディタの種類が多くて迷っています。
また、CMSはMovable typeかWordPressで迷っています。
もしよろしければ教えて頂けないでしょうか。

otogawa 2008年6月30日 12:45

>わさびさん
はじめまして。いつも来てくださってるとのこと、ありがとうございます。

DW以外のテキストエディタで重宝しているものは、「HeTeMuLu Creator 」と「秀丸」ですね。文字コードの扱いや、検索置き換えなどの機能などが使いやすくて、嬉しいです。
CMSとしては、やっぱりMTでしょうか。。。WPも取り組んでみたのですが、日本語版が終了してしまったのをきっかけに、やっぱりこれからの可能性を考えると、MTよりで行こうと考えています。(とは言っても、今のところの考えですがw)

わさび 2008年7月 1日 01:58

お返事ありがとうございます。
「HeTeMuLu Creator」は知りませんでした。
コーダーの中ではけっこう人気があったりするのでしょうか。
さっそく使ってみます。
秀丸は有名ですね。(使ったことはないんですが)
やはりMTですか。
MTからWPに移行するサイトをたまに見るので
WPよりだったのですが・・・もうちょっと検討してみます。
色々とありがとうございます。
また、ちょくちょく質問するかもしれませんが
よろしくお願いします。

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://www.otogawa.com/cms/mt-tb.cgi/245
Listed below are links to weblogs that reference
わたし的、よくやるクラスネーミング from px*blog