ヘッダー・フッター・ナビメニューなどを横幅いっぱいに広げるCSSの書き方-Twenty Twelve篇-

よく他のウェブサイトをデザインの参考に見ていると、ヘッダーの背景やフッターの背景、またグローバルナビゲーションメニューなどが横いっぱいに広がっているデザインを見かけます。サイトコンテンツは中央に配置されているのに、背景だけ横いっぱい、ブラウザいっぱいに広がっているのです。
以前、Twenty Eleven でこのようなデザインに変更するための方法を記事にしました。今回は Twenty Twelve で同じようにできないかやってみましたので、その方法をお伝えしたいと思います。
基本的な考え方は Twenty Eleven の場合と同じですが、Twenty Twelve の場合、元の CSS に書かれているある記述のせいでつまずいてしまいました。そのつまずき部分を解消し、ヘッダーやフッターなどの背景をブラウザの画面いっぱいに広げ、ダイナミックなレイアウト・デザインへと変更する方法をお伝えしたいと思います。

スタイルシート（子テーマ）への記述内容

全てに共通する記述

html {
 overflow: auto;
}
body {
 overflow: hidden;
}
@media screen and (min-width: 600px) {
 .site {
  overflow: visible;
 }
}

横幅を広げたい部分に関する記述

#example {
 margin-right: -500%;
 margin-left: -500%;
 padding-right: 500%;
 padding-left: 500%;
}

Twenty Twelveの基本となるパーツのセレクタはこちら

注）グローバルメニューのセレクタについて

グローバルメニューのデザインを指定しているセレクタは、上記の id や class 以外にもいくつもあります。メニューをどのようにカスタマイズしているかで、指定すべきセレクタが変わってくるようです。
特に Twenty Twelve のグローバルナビメニューは、上下に 1px のボーダーが引かれていますが、実は上記の 2 つのセレクタでは、このボーダーまで横に伸ばすことができません。
ボーダーも横に伸ばしたい場合は、以下のセレクタを、左右のマージン、パディングともに引き延ばす必要があります。

デフォルト状態のグローバルナビメニュー

デフォルト状態のグローバルナビは、作成した固定ページへのリンクが順番に表示されるようになっています。1460 行目からの記述にマージンやパディングを追記すると、ボーダーも含めて横幅を広げることが可能です。

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* 〜省略〜 */
 .main-navigation ul.nav-menu,
 .main-navigation div.nav-menu > ul {
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  display: inline-block !important;
  text-align: left;
  width: 100%;
  margin-right: -500%;
  margin-left: -500%;
  padding-right: 500%;
  padding-left: 500%;
 }
}

カスタムメニューで変更した場合のグローバルナビメニュー

カスタムメニューで独自のメニューを作成し、グローバルナビに適用させた場合は、上記のセレクタ以外にも以下のセレクタが使えます。

#menu-global-nav {
 margin-right: -500%;
 margin-left: -500%;
 padding-right: 500%;
 padding-left: 500%;
}

Twenty Twelveでの注意点とは？

Twenty Eleven の記事でもお伝えしたように、基本的な考え方は変わりません。なので、別に Twenty Eleven でなくても Twenty Twelve でなくても使えるテクニックです。
ただ、Twenty Twelve の場合はデフォルトの CSS で影響で、うまくいかず、ちょっとした工夫が必要になります。
以下は上記設定の考え方になりますので、興味のある方はどうぞ・・・。

グローバルナビゲーションメニューだけ広がらない

Twenty Eleven の場合と同じようにスタイルシートを記述した場合、グローバルメニューの部分がブラウザいっぱいに広がってくれません。以下のようにある範囲までしか広がらないのです。

その範囲はというと、どうやら【 .site 】というセレクタで指定されている部分のようです。

なぜ、グロナビはサイトの範囲内までしか横に広がってくれないのか？

その原因はスタイルシートに記述されている【 overflow 】の値にありました。デフォルトでは以下のように記述されています。

/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* 〜省略〜 */
 .site {
  margin: 0 auto;
  max-width: 960px;
  max-width: 68.571428571rem;
  overflow: hidden;
 }

この【 overflow 】ははみ出た部分をどうするか、ということを指定しています。デフォルトの指定は【 hidden 】なので、はみ出た部分は非表示になります。つまりこれが原因で横に広がった部分が表示されず、サイトの範囲内に収まったように見えていたわけです。
この部分を表示させるには、【 overflow 】の値を【 hidden 】から【 visible 】へ変更する必要があります。これで、グローバルナビゲーションメニューも左右横にちゃんと広がってくれます。