レスポンシブなヘッダーとフッターを作ろう 

Foundation ヘッダーとフッター foundation

前回は、ページ全体をセンタリングしました。さらに各部を作っていきます。まずは、ヘッダーとフッターです。
1カラムのページですが、企業ページなどでよく見るような連絡先をヘッダーとフッターに入れてみます。

FoundationのGridでヘッダーとフッターのみ2カラムにして、狭い画面ではタテに並べます。レスポンシブというと大げさですが、これもCSSフレームワークを使うと何も考えずに対応できます。

partialsで分解してある各部を修正していきましょう。
Partialsの復習はこちらをご覧ください。

/src/partials/header.htmlを編集します。

<div class="row">からがGridです。全体で12カラムのところを6カラムずつに分けているイメージです。

同じく/src/partials/footer.htmlを編集します。

バランスは再考の余地がありますが、こんな感じになります。

Foundation ヘッダーとフッター

ブラウザの幅を狭めていくとタテに並びます。

Foundation ヘッダーとフッター2

コメント