もう悩まない!idとclassを考えるときのヒント

こんにちは。たわらです。

残すところふたっぱさんでの実習も本日含めて2回となりました。
あっという間すぎます…

今は、サイトのコーディングに入っています。
そこで、コーディングの際必ず必要になってくる「idとclass」について、
名前を考えるのに時間をとられたくない!!と思ったので、
よく使われているものを集めてみました。

そのまえに注意したいこと

77f7fc037f6203d76f7923cdcc2bc277_s

●使用しないほうがいいと思われるもの

1.色を使ったもの:red、blue、white など

2.サイズを表したもの:300w、500h など
 
3.左右:left、right

上記のものは、どれもデザインを変えると変更しなければなりません

絶対に変えない!!ということであれば良いと思いますが、
もし変更する可能性があるのであれば避けて、違うものを考えた方が良さそうです。

left、right に関しては、私自身、2カラムのときなんかに使ったりします。
おおよそ変えないであろう部分や、大枠で左右に分けるときにはいいかもしれません。

4.idとclassを同じにする

たとえば、下記のような例です。

<div id=”news”>
<div class=”news”>news01</div>
<div class=”news”>news02</div>
<div class=”news”>news03</div>
</div>

問題なくCSSでも反映はされるようですが、

ややこしくて分かりにくい
・何か問題がでる “可能性” はある

のでおすすめはできない、という意見が多いようです。

【一覧】よく使われるidとclass

●全体的につかえそうなもの

・wrap
・wrapper
・page
・pagetop
・all
・allContents
・body
・carrier
・top-wrapper
・frame
・all-frame
・container

●上の方に使えそうなもの

・head
・header
・headerArea
・headline

●ナビにつかえそうなもの

・nav
・navi
・navigation
・navbar
・gnav
・gnavi
・g-navi
・globalnav
・headerNav
・footerNav
・globalnavigation
・globalHeader
・mainNavigation
・topNav

●パンくずリストに使えそうなもの

・topicpath
・topic-path
・pan
・pankuzu

●メニュー・サイドにつかえそうなもの

・side
・side-container
・sidebar
・sidemenu
・localMenu
・sub
・sub-menu
・aside
・menu
・division
・mainmenu
・fields

●本文やメイン使えそうなもの

・area
・topic
・summary
・pickup
・column
・wrapperContent
・contentColumn
・content-block
・base
・main
・mainbox
・mainContent
・center
・content
・contents

●下の方に使えそうなもの

・copy
・copyright
・foot
・footer
・footnavi
・footerArea
・footerbar
・globalfooter
みなさんもぜひ参考にしてみてください!!
たわら