質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

cssを指定しやすいhtmlのidの付け方

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,341

yamanoharu0129

score 45

現在、14ページあるサイトを製作しているのですが、cssの指定が上手くいきません。サイト自体はフレームが出来ているのですが、cssを書いていくうちに、ところどころ別ページとidが被って、指定がちゃんと反映されない状態になってしまっています。
これからもページは追加する予定で、JSPも使う予定なので、出来るだけきれいなhtmlとcssを書きたいのです。
以下のように書いています。同じボックスサイズになるからいいかーと考えていたのですが、cssの書き方が悪いのかcssを書けば書くほどcssを完成させたページまでおかしくなったり上手く指定出来なかったりして悩んでいます。
以下のhtmlは、ボックスが一段二段と縦並びで、ABは左右で横並びです。これを基本にすべて書いています。
<div id="main1"><!---1はページ番号-->
    <div id="block1">
        <div id="A">
            内容
        </div>
        <div id="B">
            内容
        </div>
    </div><!--block1-->
    <div id="block2"><!--block2-->
        <div id="C">
            内容
        </div>
        <div id="D">
            内容
        </div>
    </div><!--/block2-->
</div><!--/main-->

ウェブサイトで、番号を振るのがいいと読んだのですが、私は、cssで、A1,A2,A3...{}と指定していくと文字数が増えて見づらくなると思い、AやBにまで番号は振りませんでした。AやBにもA1,A2など番号を振るべきなのでしょうか?
今はすべてidを振っています。A,B,C,Dはclassにするべきですか?
綺麗で見やすいhtmlとcssにするために皆様はどうされてますか?
製作中のサイトはmixiのコミュニティのようにユーザがページを作れるようにしたいのですが、注意すべき点があれば教えてください。
質問ばかりですが、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

idをベースにCSSを指定する、はCSS設計の代表的なアンチパターンに分類されます。
(idはページに一度きりで使い回しが効かない、詳細度がその他のセレクタより高いため上書きの変更が難しいなど様々理由があります)

また、「番号を振る」というのは一昔前は有効に活用されている時期がありましたが
ここ最近では同じくアンチパターンの1つに分類されます。
(保守、メンテナンス性という観点から、「これは何に何のために書かれたCSSなのか?」がCSSを見ただけでは他人、ひいては未来の自分自身が理解するのが困難になるためです)


例えば、サイト上で一番利用頻度が高い汎用ボタンのためのcssを書くことになったと仮定します。
コミュニティサイトで例えれば「〜〜を送信する」などユーザがアクションを確定するために利用するボタンに当たるでしょう
第一歩として、UI1つ1つの単位を「コンポーネント」とか「モジュール」と捉えて、classベースである程度利用が想定されるどのタグに付与しても期待通りの見てくれになるように気をつけるのがベターです。

なぜクラスベースが良いのかというと、

#button-primary(画面で同時に1つしか使えないので根本的によくない)
a.button-primary(<button>や<input type="submit">、<div></div>に使うことが出来ません
.button-primary(上記2つの問題が起きません)

2番めの問題、ある程度利用が想定されるであろうどのタグに付与しても同じ見てくれになるようにというのは綺麗に作るという上では大事です。

これは、BootstrapというTwitter社が制作しているCSSフレームワークのドキュメントやそのCSSを覗いてみることでイメージがつきやすいと思います。


試しに検索をかけてみたら、そういったことが簡単に網羅されている記事がありましたので載せます。

CSS Nite LP39に参加してきました。 | littlepad blog http://www.littlepad.net/blog/2015/02/08/234732
CSSベタープラクティス殴り書き  - Qiita http://qiita.com/8845musign/items/422861724d791f93285b

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/12 18:51

    皆様の回答を元に一から見直して、コードがかなりすっきりしました。id属性はやめてclass属性に変更し、htmlのタグも統一できるところは統一することで、管理もしやすくなりました。リンクのサイトを読みもっと勉強します。
    とてもわかりやすく、理由も書いてくださっていたので、ベストアンサーにさせていただきました。
    皆様ありがとうございました。

    キャンセル

0

cssを書いていくうちに、ところどころ別ページとidが被って、指定がちゃんと反映されない状態になってしまっています。
最初、どんなにきれいに書けていても、画面構造の設計 をしないまま行き当たりばったりの追加・修正を繰り返せば、必ず混乱を来します。

もし単純に、ページ間でのidの重複を避けたいだけならば、ページそのものにidを割り当て、CSSのidの先頭に必ずページidを付加してやれば良いです。

しかし、それでは類似の設定を何度も書かねばならず カスケード(=数珠繋ぎの) スタイルシートを使っているメリットが殆ど失われてしまいます。

CSSを使いこなすカギは、全てを id で管理しようとせずに、類似のデザインを持つ区画を整理・グループ化し class を上手く活用することではないでしょうか?

とはいえ、最初に書いたように、正しい設計なくしては、コードの可読性もメンテナンス性も望めません。ですから、もし本気で改善を望まれるならば、目先の改善を急がず、たとえば下記などを参考に『画面設計』について理解を深めてみてはいかがでしょうか。

    ページの設計
    CSS設計を学んで、拡張性と保守性に強いCSSを書こう

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

こんにちは。
番号を振るのがいい
可読性や再利用性を考えると、セレクタに「番号」を振ることはおすすめしません。
たとえば、block1section1という名前は、「どんなスタイルがあたっているのか想像しにくい」からです。
media-blockや、contact-sectionなど、その要素が一体何のコンテンツで、どんな見た目なのかわかりやすいものにすると、後々便利だと思います。

今はすべてidを振っています
セレクタにIDを使用するということは、そのページの中で必ず唯一の要素であることが前提とする場合に使用するようにしましょう。
サイトのデザインの中で繰り返し使用されることが想定されるような「遷移ボタン」などを1つのコンポーネントとして.transition-buttonなど、使いまわせるような形でクラス名での指定をおすすめします。

yamanoharu0129様のソースコードの中での
<div id="A">
    // 内容
</div>
<div id="B">
    // 内容
</div>
ABという要素は全く違うデザインのものでしょうか?
もし、似たような意味合いを持つ、「繰り返される要素」であるなら、スタイルをまとめて1つのコンポーネントにしてしまいましょう。
Aに対してのCSSの記述とBに対してのCSSの記述が重複して、追加のたびに新しく同じ指定を記述したりどんどんCSSファイルが長くなるようなことを未然に防ぎ、メンテナンス性の向上が見込めます。

CSSは自由度の高いもので、ある程度の規約を設けなければすぐに破綻してしまい、開発が非効率になってしまいがちです。
世の中にはOOCSS(Object Oriented CSS)というオブジェクト指向の考え方を取り入れたCSSの設計手法があり、その中でも様々なフレームワークが提唱されています。
以下のようなページを参考にしてください!
OOCSSの基本
難しいOOCSS(オブジェクト指向CSS)の設計

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る