メインコンテンツ領域

メディアクエリーのテストです。ウインドウの幅が狭くなると、コンテンツ領域も小さくなる様なスタイルを書いています。

デフォルトでは、メインコンテンツ領域の幅は720px, サブコンテンツ領域の幅は220pxになっています。

メディアクエリーによって、表示域の幅が980px以下になったときには、どちらも640pxになります。サブコンテンツ領域はメインの下に移動し、各サブコンテンツは横並びになります。

なお、今回は-webkit-transitionをおまけに使ってみました。対応するブラウザーであれば、ウインドウの大きさを変更すると「にゅっ」と幅が変化すると思います。