以前の記事の HTML5で組んでみた に続いてサンプルがまったく一緒ですがｗ
タイトルの通り、HTML5+CSS3 を使ってできるだけ無駄な HTML 要素（主に div）を使わずにどこまで思い通りのデザインが実現できるか実験してみました。⇒[DEMO]
結果、使用した div はわずかに 3 つ。ちなみに実際のブログトップで使用している div を数えたところ、54 個も使ってました。（一概に減らせばいい、というものでもありませんが）n
※ただし、今回の実験はまだ草案の段階のものなどを多く含んでいるため、またそれらに対応しているブラウザが webkit 系（Safari や Google Chrome など）のみということもあり、正常に表示されるのは webkit 系だけとなってます。n
CSS3 の草案で定義されているプロパティなどについては、各ブラウザで先行実装しているCSS3プロパティまとめ でまとめています。n
簡単に説明すると、n
まず、header 要素や footer 要素、nav 要素など、今までは<div id="header">などとして定義していた箇所が、そのまま要素名として使えるようになったため、div を使う必要がなくなりました。n
ひとつの画像を指定した値で区切って上下左右、それからボックス四隅へ適用するプロパティです。これのおかげで、ひとつのボックス要素にこれを指定するだけで、角丸などの複雑な囲みでも簡単に実装することができます。n
つまり、これを ul 要素などに使えば、装飾用に新しく div を追加する必要がなくなる、というわけです。n
こちらはプロパティではありませんが、CSS3 で新しく定義されている display プロパティの新しい値です。
display: box を指定された要素の子要素であるブロック要素は、自動的にカラム配置となり、さらにどのカラムも最大の高さを持つカラムに追従して高さが確保される、という特徴があります。n
そのため、メイン・サブカラムの高さを揃える JS を使ったり、はたまた背景を使ったトリッキーな方法で高さを揃える、という必要がなくなるため、これもまた div 要素を削る要因となります。n
それのおかげで、div をほとんど使わずにサンプルの左右のカラムの高さがそろっている、というわけです。n
現在策定中の CSS3 では、背景画像を複数指定することができるようになりました。
指定したい数だけ、カンマ区切りでそれぞれ指定します。n
上のようにカンマ区切りで指定すると、それぞれの配置や繰り返し内容を列挙することができます。n
これにより、アイコンと画像ボーダー、のように複数の画像を指定することが可能なため、余計な div などの要素を追加する必要がなくなります。n
ここの気づきも、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 ネタを書いてみようと思います。
最近（自分の中で）注目度の高い CSS3 のネタです。
実用的になるまではまだまだ先の話だと思いますが、CSS3 になるとやたらと簡単にレイアウトができるので面白くてサンプルを作ってみました。
CSS3の数行で作る簡単な3カラムレイアウト - jsdo.it - share JavaScript, HTML5 and CSS
前回のエントリーに引き続き、-webkit-transition を使ってアニメーションの CSS について書きたいと思います。
-webkit-transition のアニメーションについては前回の記事 CSS3はアニメーションも指定できる！ を参照ください。動画キャプチャ入りで簡単に説明してます。n
今回は、-webkit-transition を使ってアニメーションで表示されるプルダウンメニューを作ってみたいと思います。
下位階層があるメニューにマウスオーバーすると、下位階層のメニューがフェードインとともに下にスライドしながら出てくる、というものです。n
とりあえず言葉で説明しても、百聞は一見にしかずなので、サンプルを見てください。以下に動画サンプルも表示してます。
（※実際のサンプルは、webkit 系が実装している CSS3 を使用しているので、Safari か webkit 以外で見ると、通常のプルダウンメニューになります。また、IE6 では動作しません）n
すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。
先日、CSS Reloaded というイベントに参加してきました。
そこでは CSS3 の可能性を示唆していました。
内容としてはとても刺激的で、将来、現在ある JavaScript ライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。
ただ問題点として、対応ブラウザが webkit 系（Safari、Google Chromeなど）しかないこと。
また、正式に CSS3 として勧告されているわけではないこと（今 Safari でできることが実装されない可能性）。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。
ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3 について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通り Safari でしか実行できないため、サンプルを見る際には Safari で見てください。（Safari のダウンロードはこちらから）
RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。n
内容は、:target 擬似クラスを使った、windows のメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavaScript なしで CSS のみでやってしまおう、というのが今回の主旨。n
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
