以前の記事の HTML5で組んでみた に続いてサンプルがまったく一緒ですがｗ
タイトルの通り、HTML5+CSS3 を使ってできるだけ無駄な HTML 要素（主に div）を使わずにどこまで思い通りのデザインが実現できるか実験してみました。⇒[DEMO]

結果、使用した div はわずかに 3 つ。ちなみに実際のブログトップで使用している div を数えたところ、54 個も使ってました。（一概に減らせばいい、というものでもありませんが）n

※ただし、今回の実験はまだ草案の段階のものなどを多く含んでいるため、またそれらに対応しているブラウザが webkit 系（Safari や Google Chrome など）のみということもあり、正常に表示されるのは webkit 系だけとなってます。n

無駄なHTML要素がどこまで減らせるか実験してみた デモ

今回の実験の説明

個人的にアツイと思った CSS3 プロパティ・値

CSS3 の草案で定義されているプロパティなどについては、各ブラウザで先行実装しているCSS3プロパティまとめ でまとめています。n

簡単に説明すると、n

HTML5 の新要素により、div を使う機会が減った

まず、header 要素や footer 要素、nav 要素など、今までは<div id="header">などとして定義していた箇所が、そのまま要素名として使えるようになったため、div を使う必要がなくなりました。n

border に画像が使用できる「border-image」

ひとつの画像を指定した値で区切って上下左右、それからボックス四隅へ適用するプロパティです。これのおかげで、ひとつのボックス要素にこれを指定するだけで、角丸などの複雑な囲みでも簡単に実装することができます。n

つまり、これを ul 要素などに使えば、装飾用に新しく div を追加する必要がなくなる、というわけです。n

簡単にカラム同士の高さを揃えられる「display: box」

こちらはプロパティではありませんが、CSS3 で新しく定義されている display プロパティの新しい値です。
display: box を指定された要素の子要素であるブロック要素は、自動的にカラム配置となり、さらにどのカラムも最大の高さを持つカラムに追従して高さが確保される、という特徴があります。n

そのため、メイン・サブカラムの高さを揃える JS を使ったり、はたまた背景を使ったトリッキーな方法で高さを揃える、という必要がなくなるため、これもまた div 要素を削る要因となります。n

それのおかげで、div をほとんど使わずにサンプルの左右のカラムの高さがそろっている、というわけです。n

背景画像を複数指定できるようになった CSS3

現在策定中の CSS3 では、背景画像を複数指定することができるようになりました。
指定したい数だけ、カンマ区切りでそれぞれ指定します。n

上のようにカンマ区切りで指定すると、それぞれの配置や繰り返し内容を列挙することができます。n

これにより、アイコンと画像ボーダー、のように複数の画像を指定することが可能なため、余計な div などの要素を追加する必要がなくなります。n

100% の要素内でも固定幅を持ったように要素を配置するテクニック

ここの気づきも、div を減らす要因になりました。
以下の HTML と CSS を見ていただくと分かりますが、heade 要素は横幅 100% に設定されているにも関わらず、内包している h1 などの要素がメインのコンテンツと同じ 830px の幅に収まっています。n

このテクニックの肝は、float,position,marginの 3 つです。n

設定する値は上記を参考にしてもらうとして、なにをやっているか、を説明すると、float させた要素に対し、position: relative を指定します。n

こうすることで、続く left などの値が反映されるようになります。
そしてこの left に 50% を指定すると、指定された要素の左端は画面中央に来ます。n

最後に、margin にマイナス値を設定し、数値をコンテンツ幅の半分に指定することで、まるでコンテンツ幅が固定されているような位置に配置される、というわけです。n

つまり、いったんコンテンツを画面中央に移動させたのち、マイナス方向に要素を移動することで、意図した固定幅の範囲にコンテンツが収まるようになる、というわけです。n

今回のサンプルでは、RSS feed のアイコンが右側にあるので、同じように左右を入れ替えて値を設定すれば、右寄せにコンテンツが表示される、というわけです。n

まとめ

以上の、border-image,background,display: boxと、HTML5 の新要素、および上記のテクニックを使うことによって 54 個も使っていた div を、3 つまでに抑えることができました。n

まだ CSS3 の草案段階のプロパティだったりしますが、早くすべてのブラウザに実装してもらいたいものですね。n

この記事のカテゴリー一覧を見る⇒CSSテクニック

• Tweet
• 
• 

• パーマリンク
• コメント(0)
• トラックバック(0)

• <<CSS Nite in Ginza, Vol.36に行ってきました
• |
• 各ブラウザで先行実装しているCSS3プロパティまとめ>>