絶大な人気を誇るWordpressテーマ「Stinger」。 最新版のStinger5はどのデバイスから見ても見た目が自動で最適化される「レスポンシブデザイン」を採用しています。 大きなウィンドウでも小さなウィンドウでもキレイにサイトが表示され、よりユーザーフレンドリーになりました。 この魔法のような表示の秘密は「style.css」にあります。 cssを画面の横幅で分岐させることでレスポンシブデザインを可能にしているんですね。 今回は「style.css」のどの部分がどのデバイスに適応されているのかを分析してみたいと思います。 これを読んで頂けばcssの最後にある「}」がなんのためのものかもわかりますよ。 ※class,id構造が知りたい方はこちら: Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編- 「style.css」のざっくりした構造 デフォルトの
![Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!](https://cdn-ak-scissors.b.st-hatena.com/image/square/46323b9328505bf1ff72b896df6b2ea184cad4cb/height=288;version=1;width=512/https%3A%2F%2Fjimon.info%2Fwp-content%2Fuploads%2F2014%2F08%2Fstinger5-css-top_edited-1.jpg)