:date: 2009-12-08 23:55:00 :tags: web ==================================================== sidebarとfooter付きLiquidページのHTML練習 ==================================================== Sphinx_ のデザインを参考に、sidebarとfooterのあるLiquidなWebページを作る練習をしてみました。 .. _Sphinx: http://sphinx.shibu.jp/ HTMLコーディングはそれなりにちゃんと出来る方(遅いけど)だとは思うのですが、Liquid(画面幅に合わせてサイト幅が広がるデザイン)なページにサイドバーとフッターがある場合に自然にレイアウトすることが出来ませんでした。 それっぽいレイアウトとしては、サイドバーを左にfloatさせて、本文をabsoluteでleft位置をサイドバーの幅の分指定するという方法です。この方法は画面幅に合わせて本文部分の幅が可変になるものの、absoluteを使ってしまっているので、本文部分の高さがサイドバーよりも長くなってもfooterの縦位置はサイドバーの直下に張り付いたままになってしまったわけです。って、文字だけで説明してもわからんなあ。 ま、フッターの位置は本文・サイドバーどちらかの長い方の下(=ページの最下端)に配置したいということです。 ということで、以下がうまくいったHTMLとCSSの例です。 .. code-block:: xml Liquid Layout Test
Body Body Body Body ... Body Body
Footer1
Footer2
CSS部分を見ると分かりますが、 ``margin-left: -100%;`` という怪しい記述が。なるほど!これで幅のあるサイドバーの論理的な存在を画面外に追い出しつつ、同じエレメントを ``float:left`` にすることで画面内の左に乗るようにしているのか!思いついたヤツの頭はオカシイに違いない! とりあえずここ3年くらいの疑問が解けた。ていうかよく見るCSSハックとかも好んで使いたくはないけど、こんな裏技もいやだ(笑) --------------- あ、これ ``ネガティブマージン`` って言うんだ。理解してから検索するとすぐに例が見つかるという...。 chikin & egg pattern ですね。 .. :extend type: text/x-rst .. :extend: .. image:: 20091208_sphinx_go1.* :width: 33% .. image:: 20091208_sphinx_go2.* :width: 33% .. image:: 20091208_sphinx_go3.* :width: 33% .. image:: 20091208_sphinx_go4.* :width: 33%