8bitodyssey.com

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

Extend 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 のレスポンシブ構造を図解してみた” への4件のフィードバック

  2. […] おでっせいさんの「Twenty Eleven でレスポンシブ・ウェブサイトを作ろう、そうしよう」でスタート。 プレゼンはブラウザの歴史から始まり、最新の端末への対応へと進んで行きました。おでっせいさんのサイトでとっても詳しく紹介されています。っていうかTwenty Elevenをワイヤーフレーム化した図が凄いです!!!! また、スタイルシートの指定の方法もタグ重視ではなくID・クラスを駆使するというのがとても参考になりました。以前、スタイルシートの読み込みは右から左ってのをどこかで読んだことがありそれ以来極力タグの指定はしないようにしていたので、すぅ〜っと頭に入ってきました (^^) […]

    返信

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。