Twenty Twelveで画面上部の空白を削除する（PCブラウザ・IE対策）

Twenty Twelveで画面上部の空白を取り除く方法を紹介します。

サイト画面上部の空白は、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;
}

全くの記述ミスではなく、幅の狭い画面では画面上部の空白は消えます。ブラウザの幅によってレイアウトが変わるレスポンシブWebデザインが機能しているということです。

幅の広い画面のスタイル定義

このようになるのは、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;
...略...
}

古いバージョンのIEの対策

上記の設定はIE8など古いバージョンのInternet Explorerには反映されません。

古いInternet Explorer向けのスタイルはtwentytwelve\css\ie.cssに定義されているので、その中にある.siteを修正します。

.site {
...略...
    margin: 0 auto;
...略...
}

これで、古いInternet Explorerでも画面上部の空白が消えます。