Twenty Twelveで画面上部の空白を削除する(PCブラウザ・IE対策)
Twenty Twelveで画面上部の空白を取り除く方法を紹介します。
![Twenty Twelveのサイト上部の空白 Twenty Twelveのサイト上部の空白](http://www.nishi2002.com/wp-content/uploads/2013/06/0753-500x263.png)
サイト画面上部の空白は、Twenty Twelveのstyle.cssの.site-contentで定義されています。
525行目あたりの「Page structure」の下に、次のような記述があります。
.site-content { margin: 24px 0 0; margin: 1.714285714rem 0 0; }
marginの後に指定された3つの値はそれぞれ、上・左右・下のマージンを示しています。上のマージンを示す24pxや1.714285714remを0にすれば、画面上部のマージンが消えそうですが、うまくいきません。
.site-content { margin: 0; }
![画面上部の空白が消えない 画面上部の空白が消えない](http://www.nishi2002.com/wp-content/uploads/2013/06/0753-500x263.png)
全くの記述ミスではなく、幅の狭い画面では画面上部の空白は消えます。ブラウザの幅によってレイアウトが変わるレスポンシブWebデザインが機能しているということです。
![幅の狭い画面では空白が消える 幅の狭い画面では空白が消える](http://www.nishi2002.com/wp-content/uploads/2013/06/0802-500x445.png)
幅の広い画面のスタイル定義
このようになるのは、Twenty TwelveのレスポンシブWebデザインによってPCのブラウザなど幅の広い画面のために別の定義がされているためです。Twenty Twelveのstyle.cssで1587行目以降の「@media screen and (min-width: 960px)」にはブラウザ画面の幅が960px以上の場合のスタイルが定義されています。
body .site { ...略... margin-top: 48px; margin-top: 3.428571429rem; ...略... }
この部分をゼロにすれば、画面上部の空白は消えます。
body .site { ...略... margin-top: 0; ...略... }
![画面上部の空白が消える 画面上部の空白が消える](http://www.nishi2002.com/wp-content/uploads/2013/06/0772-500x263.png)
古いバージョンのIEの対策
上記の設定はIE8など古いバージョンのInternet Explorerには反映されません。
![古いIEには設定が反映されない 古いIEには設定が反映されない](http://www.nishi2002.com/wp-content/uploads/2013/06/0781-500x258.png)
古いInternet Explorer向けのスタイルはtwentytwelve\css\ie.cssに定義されているので、その中にある.siteを修正します。
.site { ...略... margin: 0 auto; ...略... }
これで、古いInternet Explorerでも画面上部の空白が消えます。
![古いIEでも画面上部の空白が消える 古いIEでも画面上部の空白が消える](http://www.nishi2002.com/wp-content/uploads/2013/06/0791-500x258.png)