Twenty Twelveのサイドバーを左にするCSS

サイドバーを左にするには、通常style.cssの@media screen and (min-width: 600px)にあるsite-contentとwidget-areaのfloatプロパティの値を変更します。

しかし、この変更をしてもfirefoxやchromeではキチンと表示されません。

@media screen and (min-width: 600px) {
.site-content {
	float: right;
}

.widget-area {
	float: left;
}
}

サイドバーを左にして、メインコンテンツを右に表示するには、cssフォルダのie.cssにあるsite-contentとwidget-areaのfloatを変更すると表示されます。

ie.cssはIE対策用のCSSですが、最後に実行されるのでそのようになります。

IE8対策

style.cssで設定した値を有効にするには、ie.cssファイルのsite-contentとwidget-areaにie8クラスを指定するために追加するとstyle.cssで設定した位置に表示されます。

.ie8 .site-content {
	float: right;
}

.ie8 .widget-area {
	float: left;
}

ie.cssにie8セレクタを追加するとFirefoxやchromeのスタイルが適用されませんので、IE8とFirefoxではサイドバーに位置が違う表示に出来ます。