2 カラムと 3 カラムの段組レイアウトのフレームワークを作成したのでまとめておく。同じ段組レイアウトを float プロパティと position プロパティ、2 種類の方法で作成。
構造に手を加えずに float を clear させるためのいわゆる clearfix には結構色々とバリエーションがあったりするんで、自分が知っているパターンをいくつか紹介してみる。
ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する elastic レイアウトのサンプルを作ってみた。
定義リスト dl 内の dt と dd を CSS を使って横並びさせるいくつかの方法の完全自分用メモ。
このサイト始めてから今日でちょうど 1 年が経った。1 年なんてホントあっという間なのね。つうことで、とりあえず上っ面の雰囲気を変えてみた。
CSS によるレイアウトで躓いたことを書かれていてる「CSSの謎」で、float を使った 2 段組の可変レイアウトでの解決方法がまだ見つかっていないような感じだったので、ちょっとサンプルを作って解決方法を提示してみる。
ウェブデザイナー御用達の A List Apart がリデザインされ、1024px の固定幅というレイアウトを採用したことについて注目されている。
リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は JavaScript を使わずに CSS だけででも実現可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。
CSS3 では実現するであろう、background-image への複数指定。Safari 1.3 と 2.0 ではすでに対応しているらしいんで、実際に自分でも試してみたくて可変レイアウトのサンプルを作ってみた。
ユーザビリティの話で、スクリーンリーダーを利用するユーザーへの対応の話は出てくるけど、低い視力のユーザーを配慮してってのは意外と聞かなかったりする。大きめのフォントサイズ、ハイコントラスト、シングルカラムのレイアウト等の代替 CSS を用意しておくってのは大事なことかも。
これまた使い道があるのか微妙なんだけど、要素を常に画面の垂直、水平の中央に固定して配置させてみる。ポイントは、要素の幅と高さそれぞれの半分の値をネガティブマージンで指定すること。
サイトの見栄えを CSS でレイアウトしていても、意外とフォーム周りのスタイルは作り込みされていなかったりってのは結構ある。そんな中で、「Snap Tax」のフォームは良い感じ。
全ての MT タグが用途別にソートされていて、属性や日付タグのフォーマットなんかも網羅されている Movable Type のカンペと、Movable Type の管理画面を可変レイアウトにする CSS を配布しているサイトをご紹介。
min-width に対応していない IE でも、スクリプトを使わず CSS だけで擬似的に min-width を実現するための方法。IE5.5 と IE6 に対応したパターンとIE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。
css-discuss が様々な3カラムレイアウトのサンプルを一覧にしたリンク集みたいなのを公開している。
コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ウィンドウを下方に広げても、フッタは常に下部に張り付いたままで、逆にウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。
仕事の合間にちょこっと CSS を弄ってみたりして、４ヶ月ぶりくらいに可変レイアウトにしてみますた。
float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。
リニューアル時のデザインをフォトショップで作ってみたって話の続き。
ボックス内垂直センター配置を CSS で実現する方法。