Fsiki Note Airport

リキッドレイアウトへの挑戦

なんか自分のサイト見ていて無性に「何で幅固定なんだよ!!」と思った(自称 CSS病)ので、勢いに任せてちょっといじってみた。(まだ完成ってわけでは無いですが)

CSS角丸ボックスデザインのままリキッドレイアウトって必要以上に面倒クサイ。
で空div連発させるしかないのか...とか思ってたんですけど、「意味の無い空divなんぞ置けるか!!」という目標の元あれこれいじくり倒したらできた。

背景指定するための要素が足りない足りない...。横長の背景画像(3000pxとか)作ってもそれじゃあ何か負けた気がするし、悩んだ悩んだ。
しかも、思いつきで付けたボックス下部の斜線が異常に曲者だったり。

意味の無いdivが無いかと言われれば怪しいもんですけど...
ちなみに要素追加用にJavaScriptは使って無いです。念のため。

とにもかくにも、デザイン脳が無いので「角丸である必要がない」という情け無い状態ではあるんですが、とりあえずリキッドデザインで角丸ボックスも可能であることが確認できたので良かった。

残念ながらピンポイントで角丸ボックスが作れるってわけじゃないです。要するにページ全体で要素同士を絡み合わせることで角丸ボックスが実現できるという話です(それでも大変なんですけど)。

表示確認 (Windows)

MacのSafariはいけると思うんですけど、IEは知らん。そんな子は知らん。

正直サイト全体への実装はいつになることやら...。
デザインの勉強すりゃ良かった...先は長い。

Trackbacks