ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？

yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ

[t32k]

- Tags: #Markup

[webmarksjp]

web

[ahash]

体系的に説明してあり、わかりやすい。

[night_hike]

「ID、クラスを適切に割り振る / 同じようなものには同じクラスを割り振る / trごとに「odd」「even」 / リスト系要素の最初と最後が特定できるようにする / h1～h6タグ直下にはインライン要素が必ず入るようにしておく」

[netfan]

なるほどね

[cugel]

ちょっとしたこつ

[AmaiSaeta]

first/last, odd/even, H1のなかにspanはどうよという気もするが、現実的には仕方ないか……要はCSS仕様の問題なんだけど。 | odd/evenはJS辺りでやらせた方がよくね?行挿入時に死ねるよ?

[lesamoureuses]

必要なのは別々に区別できることだけど、IEのせいで無駄にclass指定しなくちゃいけなかったりするのよね

[zetamatta]

こうしておけば CSS でいろいろ調整が聞くというような HTML の書き方

[ikebe1999]

id, class指定のツボについて解説

[mooiboom]

「同じようなものには同じクラスを割り振る」言われてみれば確かに。できてなかったかも。

[koseki]

見出しにaでアンカーを設定するのは大賛成だけど、spanだけ入れるのは抵抗があるなあ、、、。なぜ必要になるのか詳しく知りたい。

[p_chopin]

『ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように』『同じようなものには同じクラスを』『tableのtrごとにodd/even』『リスト系要素の最初/最後が特定できるように』『hxタグ直下には<span>/<a>タグを』

[raitu]

//ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように/同じようなものには同じクラスを割り振る/tableのtrごとに「odd」「even」//あたりは使いそうなかんじ

[youranus]

IEがなければ最後の方のTipsなんていらないのに。でもデザイナのビジュアルを実現するためにはこういった小細工はしばらくは必要。

[rawkranz]

実践的。

[yoiIT]

忘れがちなCSS基本事項

[hiroponz]

CSSの基本事項

[Okky]

きれいなコードはきれいなデザインを実現しますね。

[tks_period]

first-child / last-child は知らなかった。使えそうだなぁ。

[ysk_lucky-star]

まあ気持ちは分かるけどね、現実問題として。でも first,last とか h1 直下に span 要素はいかがなものか。（結局 IE のクソ仕様に悩まされるわけだけど）

[aru-san]

“クラスはスペースで区切って複数指定できます” これは知らなかった

[closer]

あとで補足

[kmachu]

「リスト系要素（ul,ol,dl)の最初と最後が特定できるようにしておく」

[Kiske]

基本の基本。大事。

[hiyoud]

"クラスはスペースで区切って複数指定できます"知らんかった

[fjsk]

クラスって複数定義できるんか…。

[hiro_y]

CSSのことを配慮したHTML。現実的にはそうなるよね。

[kno]

idとクラスの使い方

[vanish_l2]

とてもよいまとめです。[*css][*tips][*webデザイン][*web制作][*あとで読む][css][design][html][html&css][web][tips][webdesign][webデザイン][web制作][あとで読む][ウノウラボ][デザイン]