Twenty Eleven のレスポンシブ構造を図解してみた

Extend Twenty Eleven

WordPress 3.2 からデフォルトテーマとなった Twenty Eleven はデバイスを問わずコンテンツを表示できるレスポンシブデザインとなっていていろいろ素敵なわけですが、その構造ゆえに子テーマをつくろうとすると非常に難解なため頭痛薬がいくらあっても足りません。

というわけで、Twentye Eleven のレスポンシブ構造を図解してみました。

header

Twenty Eleven 構造 header

twenty eleven 構造 header

#main と footer

Twenty Eleven構造 #main と footer

twenty eleven 構造 main と footer

上記の図を見るにあたっての注意点

※矢印をつかって margin や padding が指定していないところには margin または padding は設定されておらず、つまり外包または内包する要素に隣接していると思ってください。

※もともとのソースにおいて、margin や padding となっているところはそのまま、margin-top、padding-right などと指定されているところはそのように表記しています。

※Twenty Eleven は #page に指定されている max-width: 1000px と css 3 media query を使ってコンテンツ幅を決定します。ブラウザの幅が 1000px 以上の場合、#page の幅は 1000px となり、そこから % / em 指定されている要素の幅や高さが決定します。たとえばブラウザ幅が 1000px 以上の場合の 7.6% は 76px、1em は font-size の 15px となります。これを念頭において、スタイルを上書きしてみてください。

Twenty Eleven のレスポンシブ構造を図解してみた” への18件のコメント

  1. ピンバック: WordBench 東京勉強会 in KDDI でお話ししたスライドを、セッションを再構成する形で公開します | 8bitodyssey.com

  2. ピンバック: WordCamp Tokyo 2011へ行ってきた | 自然体

  3. ピンバック: twentyelevenテーマの構造を丸裸にした良記事発見!感謝!!|ウェブシュフ

フォームは コメントしてほしそうに こちらを見ている……!