レスポンシブなヘッダーとフッターを作ろう
![Foundation ヘッダーとフッター](https://i0.wp.com/foundation-site.com/wp-content/uploads/2016/04/2016-04-01-17-57-48.png?fit=966%2C125&ssl=1)
前回は、ページ全体をセンタリングしました。さらに各部を作っていきます。まずは、ヘッダーとフッターです。
1カラムのページですが、企業ページなどでよく見るような連絡先をヘッダーとフッターに入れてみます。
FoundationのGridでヘッダーとフッターのみ2カラムにして、狭い画面ではタテに並べます。レスポンシブというと大げさですが、これもCSSフレームワークを使うと何も考えずに対応できます。
partialsで分解してある各部を修正していきましょう。
⇒ Partialsの復習はこちらをご覧ください。
/src/partials/header.html
を編集します。
<div class="row">
からがGridです。全体で12カラムのところを6カラムずつに分けているイメージです。
<!-- header --> <div class="header"> <div class="row"> <div class="medium-6 columns">foundation-site template</div> <div class="medium-6 columns">連絡先</div> </div> </div> <!-- /header -->
同じく/src/partials/footer.html
を編集します。
<!-- footer --> <div class="footer"> <div class="row"> <div class="medium-6 columns">© foundation-site template</div> <div class="medium-6 columns">連絡先</div> </div> </div> <!-- /footer -->
バランスは再考の余地がありますが、こんな感じになります。
ブラウザの幅を狭めていくとタテに並びます。