フレキシブルボックスレイアウトの構成

はじめに

先に掲載した、「フレキシブルボックスレイアウトのおさらい」の続きです。「フレキシブルボックスレイアウト」化を果たした当サイトですが、そのレイアウト構成から分析してみましょう。

サイトの主要ページは、以下のようなレイアウトを基に構成されています。

ボックス構成図
krzm.jp主要ページのボックス構成

これらのうち、topnav内のナビゲーションボタンと、メインコンテンツに当たるarticles・footnote・sidebarの三段組部分で、フレキシブルボックスレイアウトを使用しています。

もちろん、フレキシブルボックスレイアウト非対応のブラウザー(主としてInternet Explorer 9以下)でもレイアウトを再現するため、従来のfloatプロパティも維持しなければなりません。ですから、前提として、floatによるレイアウト構成を考えます。

フロート用構成

まずは、メインコンテンツ部分から見ていきましょう。三段組部分はdiv要素によるボックスですが、floatで問題になるのは、これらの順序です。

メインコンテンツ構成図
メインコンテンツの三段組構成

ただ“見た目だけ”のレイアウトであれば、何の問題も生じませんが、人として、文書構造を念頭に置くなら、この順序でボックスを並べることは、非常に困難です。なぜかというに、これらの内容には、

  1. articles(主要記事)
  2. footnote(主要記事に対する脚注)
  3. sidebar(記事とは直接関係のないウィジェット)

という文書構造上の順序を与えているからです。ですから、HTMLのソースコードは、上記の順序で記述されています。

その順序を維持したうえで、視覚上は②①③と左から右へ並べるには、どうすべきでしょうか? articlesを右へ回り込ませ、footnoteは左に、そしてsidebarはまた右でしょうか?

しかし、このfloat指定では、②③①にしかなりません。floatの組み合わせを色々と試してみても、結局のところ、①を中央に配置することは不可能です。

実は、フレキシブルボックスレイアウトでは、フレキシブルというだけあって、こうした配置順序を任意に指定できるようになっています(orderプロパティ)。しかし、floatでも再現することを考慮すると、今回はその使用を諦めざるを得ません。このため、これらのボックスは、以下のようなボックスの入れ子構造にします。

メインコンテンツ入れ子構成図
メインコンテンツの入れ子構造

これにはデザイン上の理由もあります。それは、pagenavボックスの存在です。pagenavは、articlesとfooterの下に跨って配置し、sidebarの高さに関係なく、常にarticlesとfooterの下に表示されるようにしています。

pagenavの配置図
pagenavはarticlesとfooterの下に表示されるようにする

また、sidebarがsidebar_frameに囲まれているのは、sidebarとarticlesの間に余白を入れるためです。floatの場合、フロートさせたボックスにmarginを使うとレイアウトが崩れる場合があるため、レイアウトの骨組みは隙間なくsidebar_frameで作り、その内側で余白を入れるようにしています。これは、floatレイアウトのための配慮です。

それはそれとして、floatに関しては、外(親)側から見ていくと、contents内でmain_contentsとsidebar_frameにfloat:leftを指定し、これらを横並びにしています。

contents内のフロート構成図
contents内でのmain_contentsとsidebar_frameのフロート構成

さらに、左に配置したmain_contentsでは、main内でarticlesとfootnoteにfloat:rightを指定し、ボックスが右から左へ表示されるようにしています。

main内のフロート構成図
main内でのarticlesとfootnoteのフロート構成

ちなみに、floatは、左に配置するものにfloat:left、右に配置するものにfloat:right、という使い方をしている例をよく見かけますが、私は、左から右へ並べる場合にはすべてボックスにfloat:left、その逆はすべてのボックスにfloat:rightというように、竹で割ったような美しい指定を好みます。

また、フロートさせるボックスを、さらに囲む親(コンテナ)ボックスを作成する(この例では、contentsやmain)方法も、私の常套手段です。ただし、これを利用するにはoverflowプロパティの扱い方を心得ていなければなりません。その詳細は、以前に掲載した記事「フレキシブルボックスのメロディ」に譲るとして、このコンテナボックスは、フレキシブルボックスレイアウトでは必須となります。

以上のボックス構成を簡略的に記述したものが、以下のHTMLソースコードですが、文書構造上の流れは、きちんと①②③の順になっています。

ボックス構成のソースコード
HTMLコードでは①②③の順に記述できている

krzm.jp:not(so-called mobile friendly)