ついでにご紹介します。高さの異なるカラムを揃えるcssとHTMLタグのマークアップのみで実装出来るテクニック集です。クロスブラウザ対応のみをcss-playから探したので、ついでにご紹介します。jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。シンプルなドロップダウンメニューシンプルなドロップダウンメニューです。マルチレベルのメニューも可能。横に出るフライアウトタイプ。画像を使用しています。demoクロスブラウザ対応のグラデーションwebkit系でもmozでもIEでもcssのみでグラデーションを実装。Gradientハック、テーブルも使用しないドロップダウンメニューシンプルなドロップダウンメニュー。cssハックも不使用です。上に出るcssメニューです。デモでは2階層まで実装。半透明にして画像の上に置く、とかに使えそう。democssのみで吹き出しこれはcss-playでは無いのですが当サイトでも使用しているお気に入りのテクニックです。cssのみで吹き出しを表現。IE6ももちろんOKです。Shapesタブ分け+拡大も実装したcssオンリーのギャラリーこれ凄いです。タブでギャラリーを分け、しかもマウスオーバーで拡大。これでjs使ってないのは凄いですね。demo.1demo.2シンプルな縦並びのフライアウトメニューこちらもシンプルな複数階層メニュー。縦並びバージョンです。democssオンリーでIEでもドロップシャドウちょっと驚きでした。IEでもcssオンリーでドロップシャドウを実現。基本はcss3で、IEは条件分岐→背景をずらしてfilterでぼかしているようです。条件分岐が嫌だ、というかたはこちらの方法を。条件分岐で実装するドロップラインメニュー。これかっこいいですよね。dmeo画像を一切使わずにCSSだけで吹き出しツールチップを実装するデモではcss3のアニメーションも使用されているのでクロスブラウザというと御幣ありますが、IEでもツールチップそのものは実装出来ています。デモをIEで見るとborderが入ってしまっていますが、工夫すればいけそうです。jsのようなアニメーションはありませんが、マウスオーバーで下に子メニューがスライド表示されます。demoハック、テーブル無しで実装、マルチレベルの透過メニューこれ凄いですねー。デモでは5層まで実装しています。demoハック、フレーム不使用でサムネイルをクリックすると拡大画像が切り替わるギャラリーよくあるギャラリーをcss+HTMLのみで。サムネをクリックすると画像が切り替わります。前へ/後ろへタイプのギャラリーをcssで。demoサムネイル付きのドロップダウンメニューこれは需要もあるのでは。サムネ付きで降りてくるドロップダウンメニューです。demo高さの異なるカラムを揃えるたとえば3カラムでそれぞれ高さが違ってもしっかり揃える方法です。クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート以上、jsが使えない環境でもデザインの幅を広げる為のクロスブラウザ対応cssテクニック集でした。