- ベストアンサー
CSSで参照するID（or NAME）属性値の基本的な名称を教えていただけますか？
div id="content"や div id="right"や div id="Note" というように 第3者が後から見てもメンテナンスしやすく 分かりやすい属性値の名称を教えて頂きたいのですが こういったところにはこの名称。と言うような事を教えていただけますか？ 参考になりそうなサイトでもかまいませんので宜しくお願い致します。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ORUKA1951です。追加情報 たとえば、 id/classの命名規則/XHTML CSS ガイドライン ( http://vosegus.org/guideline/id_class.html ) に書かれている命名規則は参考になるかと。 この場合であっても、該当する文章群を汎用要素<div class="クラス名">で囲んでしまえば、その子孫になる要素では、子孫セレクタを使えばclassなんてほとんどいらなくなる。
その他の回答 (4)
- kuzumiHK
- ベストアンサー率72% (132/183)
次期バージョンhtml5では、 <header>タグ、<footer>タグ、<nav>タグが追加されるようなので、 現在良く使われているid、 <div id="header">→<header>、 <div id="footer">→<footer>、 <div id="navi">→<nav>となりそうです。 メインコンテンツをheader、footer、navi以外の部分 というふうに捉えて、スタイルを指定すれば、 divはなくてもコンプリートできそうです。 （複雑なページはそう簡単にはいかないと思いますが。。） HTML 4 からの変更点 参考URL http://standards.mitsue.co.jp/resources/w3c/TR/2008/WD-html5-diff-20080610/
お礼
html5も視野に入れないといけないのですね 大変です 勉強になりました。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSSのセレクタの指定方法のルールよりも、HTML/XHTMLのルールをまず覚えましょう。これが意外とというかとても煩雑で難しい。 HTMLでは、IDは ★英字から始まり英数字とハイフン "-" とピリオド "." から成らなければなりません。 ★HTMで、アンダーバー(_)とコロン(:)が追加されました。 注)ただし、ISO-HTMLでは大文字のみ XHTMLでは、 ★xmlで始まるものを除く ★アルファベット、またはアンダーバー "_" から始まり、英数字とハイフン "-" とピリオド "." とアンダーバー "_" など。 ★コロン(:)は使えない。 結果的に、 1) アルファベットで初めて 2) 英数字とハイフン (-)、アンダーバー(_) 程度で記述しておくと無難。コロン(:)やピリオド(.)などは、CSSで問題を起こすことがあるので使わない。 なお、idやclass名に、red、blue、right、left、top、bottom,contenerなんて使うのは、宗教的かもしれないけど、やはりおかしい。 HTML3からHTML4に変わる時点で、要素名の<font><center><s><strik><u>や属性値のakigin,color,face,size,nowrapなどが、非推奨になったかを理解していないとしか思えない。 たとえば、 red → veryImportant blue → memo right → footNote left → menue top → message bottom → documentInfo などと、文章で意味あるものにしとけば、特別強調したいところを赤で表示していたとところを背景に蛍光色を塗ろうとか、左に表示していたメニューを右に変更とかしてもちぐはぐにならない。 ただ、初心者が作成しているページを見ると、 デザインのために不必要なclassやidがたくさん書かれているものが多い。 例) <body> <p>ここは<span class="red">重要</span>である。</p> <div class="left"> <p>ここはとっても<span class="blue">大事</span>である</p> </div> これなんて、 <body> <p>ここは<strong>重要</strong>である。</p> <div class="left"> <p>ここはとっても<strong>大事</strong>である</p> </div> としてあったってCSSで div.left strong{color:blue;} strong{ color:red;} で個別に指定できるもの！！！詳細度が違うので後のstrongでは上書きされない。 そもそも、id,classは、CSSのためじゃない。CSSのためにidやclassをつけるのではないという基本的な部分を忘れないように。そうすれば、CSSのためだけのid,classはいらなくなるはずです。 IEでは,子セレクタ、隣接セレクタ、属性セレクタ等が使えないため、ある程度は致し方ないけど・・・ <ul> <li></li> <li></li> <li></li> </ul> を各リストで色を変えることは、IEでは無理。 ul + li +li +liなんて指定が出来ない
大文字小文字は * キャメルスタイル mainContents recentryEntries * - を使う main-contents recentry-entries * _ を使う main_contents recentry_entries いずれかに統一した方がいいです。 http://mt.vicuna.jp/ ここの blog テンプレートの id class の命名はかなりしっかりしていると思います。HTML 自体も教科書的かつ綺麗で、かつデザインが実用的なので参考にする価値があるかと。
お礼
_ を使って統一したいと思います。 参考サイトありがとうございました。 勉強させていただきます。
- askaaska
- ベストアンサー率35% (1455/4149)
一般的なのは headerとかfooterとかだけど。 でも確実に言えるのは div id="content" div id="right" div id="Note" はメンテしにくいね。 なんでNoteだけ大文字で始まるの？ contentやnoteは部品の名前だけどrightは違うよねとか。 大切なのはポリシーを持って 統一感ある名称をつけること。 ・英語にしたら全部英語にするとか ・大文字を使うのはどういうときか 参考になるのは各ブログサイトのスタイルシートだと思う。 もちろん100%完璧かは判らないけど 公式のテンプレートならそれなりに統一感あるはずだし いいんじゃない？
お礼
Noteの大文字は間違えました。 大切なのはポリシーなんですね。 ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
このサイト参考になります。 他いろいろご教授いただきありがとうございました。