WordPress 3.2 からデフォルトテーマとなった Twenty Eleven はデバイスを問わずコンテンツを表示できるレスポンシブデザインとなっていていろいろ素敵なわけですが、その構造ゆえに子テーマをつくろうとすると非常に難解なため頭痛薬がいくらあっても足りません。 というわけで、Twentye Eleven のレスポンシブ構造を図解してみました。 header 上記の図を見るにあたっての注意点 ※矢印をつかって margin や padding が指定していないところには margin または padding は設定されておらず、つまり外包または内包する要素に隣接していると思ってください。 ※もともとのソースにおいて、margin や padding となっているところはそのまま、margin-top、padding-right などと指定されているところはそのように表記していま
![Twenty Eleven のレスポンシブ構造を図解してみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/71a9eafa10a0e5e0d1bb9c068d504f5c35559cf0/height=288;version=1;width=512/http%3A%2F%2F8bitodyssey.com%2Fwp-content%2Fuploads%2F2011%2F09%2Ftwentyeleven-header-1024x937.png)