【お題】CSSボックスレイアウトで3カラムリキッドレイアウトを実現する

| コメント(0) | トラックバック(0)

今日出来て嬉しかったので書く。
みんな知ってるだけなのかもしれないけれど、ググってもあまり情報は出てこなかったのでお題にします。
ウェブでコーディングに携わっている人は是非考えてみてください。
回答を出した先着1名の方には川端から素敵じゃないかもしれないプレゼントをこれから考えます。

ここで、左、中央、右、すべてのカラムをパーセント指定すればいいじゃん!!って考えた人。そりゃそうだ。でもそれじゃぁお題にならない。
左、右のカラムは固定長で中央カラムのみ可変にする。これもググれば情報は出てくるので簡単そう。
それでは今回のお題です。

必須の条件として下記。
(1)中央カラムは中央寄せ、固定長800px。
(2)左右のカラムは可変。ブラウザの横幅が長ければ広がるし短ければ消えてしまう。つまりブラウザの横幅が800pxを切ると中央のカラムのみ表示。左右のボックスは非表示となる。ブラウザの横幅が短くなるとボックスが落ちるのはもってのほか!!!!
(3)とりあえず高さは無視(高さを揃えるとか考えるとややこしいので)
(4)対象ブラウザはとりあえずFireFox2以降(IEとかややこしいので)

例えば、中央カラムを挟んで左右の背景繰り返しパターンが変わる。などのデザインには使えそうですね。

川端はまだIEでの検証は出来ていませんが、FireFoxで確認できました。
明日からコーディングに入って(僕じゃないけど)使える確証が出来次第また回答編をアップしますので楽しみに待っていてください。使えなかったらどうなるんだっ。てな話はおいといて。

でわ、明朝4:30から始まるバレーボールの日本-イタリア戦の再放送を見なければならないので(いい加減にしろフジテレビ739)寝ます。皆さんおやすみなさい。

トラックバック(0)

トラックバックURL: http://detarame.action-source.com/mtctrl/mt-tb.cgi/4

コメントする

このブログ記事について

このページは、川端が2007年11月 8日 00:20に書いたブログ記事です。

ひとつ前のブログ記事は「MT4のテンプレートがグレーアウトして編集出来ない場合の対処法」です。

次のブログ記事は「【回答】CSSボックスレイアウトで3カラムリキッドレイアウトを実現する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 5.0