CSSシークレット ―47のテクニックでCSSを自在に操る

課題

ここ数年の間に、 Web デザインの世界で人気を得るようになってきた

トレンドが 1 つあります。それは、筆者が「流動的（fluid）な幅の背景

と、固定幅のコンテンツの組み合わせ」と呼んでいるものです。このパ

ターンには、次のような特徴があります。

図7.15 や（若干わかりにくいですが）図7.14のように、ページ全体で

このパターンが適用されることもあります。しかし図7.13 のように、一

部のセクション（特に、フッター領域）だけにこのパターンを適用するの

がより一般的です。

このような表示を得るために最もよく使われているのは、セクションご

とに要素を 2 つずつ用意する方法です。1 つは流動的な幅の背景に使わ

れ、もう1 つは固定幅のコンテンツに使われます。コンテンツの要素には

margin:autoが指定され、横方向の中央に表示されます。例えばフッ

ターでは、次のようなマークアップが記述されるでしょう。

流動的な幅の背景と

固定幅のコンテンツ

39

ページには複数のセクションがあります。それぞれはビューポートの幅全

体を占め、異なる背景が適用されます。

コンテンツの幅は固定されています。メディアクエリによって、解像度ご

とに異なる幅が適用されることもあります。セクションごとに幅が異なっ

てもかまいません。

306

7章：ページの構造とレイアウト

図7.13

民 泊 支 援 サ イ ト Airbnb（ airbnb.

com）。フッター領域にこのパターン

が適用されている

■

■

このマークアップに対して ...