[CSS] 追記 – 白銀比固定で指定した横幅までリキッドなエラスティックレイアウト

Filed under Web Design, XHTML+CSS

なんか題名が意味不明になってしまいました。メイン部とサイドバーが白銀比を保ちつつ、指定した横幅(例:760px~960px)まで可変なエラスティックレイアウトです。

うんごめん日本語苦手なんだ。こういうのってなんて呼べば良いんだろう。勉強不足で申し訳ない。

たぶんいろんな所でCSSに詳しい人が解説してるんじゃないかと思うので、運悪くこのページを開いてしまった人へ参考までに。
(と予防線を張る)

発想の元ネタはこれ、以前お話した黄金比と白銀比を出してくれるZAPA先生のZAPA GS
[Z]ZAPAブロ〜グ2.0 Webデザイン白銀比計算ツール
airappli.com 黄金比・白銀比計算ツール「ZAPA GS」

本当にビールの一杯でもご馳走させていただきたいくらい便利。ZAPA GSの右下を掴んでグイグイ大きさを変えるのがとても楽しい。数値を入力するだけじゃなくてマウスで大きさを変えられるのが実に良い。しかも透明度もいじれる。

おかげでふと気になるWebサイトを見つけるとZAPA GSを使ってブラウザ上で黄金比や白銀比を探してみたり。とても勉強になります。

で、これでグイグイ動かしてるときに「俺のブログもこんな感じで白銀比(黄金比)を保ったまま動かしたい」と思った。でもmin-width,max-widthを使わなきゃ普通にエラスティックで比率保てるのでそんなに意味が無い気もしたりしなかったり。

以前メモしたマイナスマージンを使った2カラムのレイアウトをいじってみた。
リキッドレイアウトの最大横幅を固定する-minmax.js

単にmin-, max-を使っただけで、たぶん他のちゃんとしたコーダー系の人がどこかで解説してると思うし、思いつきなのであしからずご了承を。(予防線多すぎ)

考え方は全体をemで指定して中身を%で指定する感じ。

で、サンプル
白銀比固定でリキッドでエラスティック

min-,max- 使ってるんでIE6の場合は100%で表示するようにしてます。IE6も同じように見せるならminmax.jsかexpression属性とかいうのを使ったらできる! 出来ると思う… できるんじゃないかなorz=3 (試してない。というかFirefox3&2 IE7でしか確認してない)

でも冷静になってみると単に外だけemで指定して、中身をマイナスマージンの%で指定しただけで、単なる応用だった事に気づいた。

さて、パワポタ3のサクセスで天才型投手が出るまでリセットを繰り返す作業に戻ります。

[追記]
よくよく考えたらこれ、エラスティックレイアウトの解説をして、こんな事もできるって持っていほうが良かったのかも…

まぁいいか誰も見てないブログだし 

いいんだ・・・たんにワードプレス触ってみたかっただけだもん ノωT)

ついでにサンプルに画像を足してみました。
白銀比固定でリキッドでエラスティック

Post a Comment

Your email is never published nor shared.