Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!

Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!

:2014/8/22 STINGER Wordpress

絶大な人気を誇るWordpressテーマ「Stinger」。

最新版のStinger5はどのデバイスから見ても見た目が自動で最適化される「レスポンシブデザイン」を採用しています。
大きなウィンドウでも小さなウィンドウでもキレイにサイトが表示され、よりユーザーフレンドリーになりました。

この魔法のような表示の秘密は「style.css」にあります。
cssを画面の横幅で分岐させることでレスポンシブデザインを可能にしているんですね。

今回は「style.css」のどの部分がどのデバイスに適応されているのかを分析してみたいと思います。

これを読んで頂けばcssの最後にある「}」がなんのためのものかもわかりますよ。

最後の}はいったいなんなのか

※class,id構造が知りたい方はこちら: Stinger5カスタマイズ!最新版class,id構造早見表 -トップページ編-

スポンサーリンク

記事内リード文下_PC

「style.css」のざっくりした構造

デフォルトのstyle.cssの構造はざっくりこんな感じになっています。

デフォルトの構造

@media only screen and (○○○-width: ○○○px) 

のコードを境に大きく4つの領域にわかれています。

この「@media only screen and (○○○-width: ○○○px) 」の部分がレスポンシブデザインの要です。

@media only screen and (○○○-width: ○○○px) の意味

@media only screen and (○○○-width: ○○○px) はウィンドウの横幅によってcssを分岐するためのコードです。

(○○○-width: ○○○px)の部分に当てはまるウィンドウサイズのときに限ってcssを適用します。

たとえば
「@media only screen and (max-width: 100px)」では横幅が100px以下のデバイスに、
「@media only screen and (min-width: 100px)」では横幅が100px以上のデバイスに適用されます。

横幅によるcssの適用範囲

@media onlyのコードを踏まえて横幅によるcssの適用範囲を見るとこうなります。

ピクセル数によるcssの適用領域

一番上の領域①はすべての場合に適用されて、残りは横幅のピクセル数で適用される場合とされない場合があるんですね。

結局どこがどのデバイスなの?

どこがどのデバイスなのかという点で重要になってくるのが「何ピクセルまではスマホとみなして、何ピクセルからはパソコンで…」といった線引。

Stinge5では

  • 「380px以下」→ スマホ
  • 「380〜780px」→タブレット
  • 「780px以上」→PC
  • としているようです。

    最終的にこうなるよ!

    以上をすべて考えると適用範囲はこのようになります。

    cssの有効範囲

    スマホだけ、タブレットだけの見た目を変えたい!という場合には該当の領域にコードを書いてくださいね。

    おまけ:子テーマを作るとき

    カスタマイズは子テーマでするよ!という方は、はじめに子テーマのcssにも「@media…」のコードを書いて領域分けしておくといいかもしれません。

    領域分けせずにcssを書くとすべて領域①の扱いになってどのデバイスにも反映されてしまいます。
    想定外の結果を防ぐためにも領域分けはしておきましょう。

    あとがき

    cssの最後の「}」は領域分けのコードの括弧なんですね。
    僕自身レスポンシブデザインを触るのは初めてで、cssの書き方に悩んだので記事にしました。

    間違い等があればコメント欄またはTwitterからご連絡頂けると助かります。

    最後まで読んでいただきありがとうございました。
    Jimon(@jimon_s)でした。

    jimon


    記事下_W左_PC

    記事下_W右_PC

    -STINGER, Wordpress
    -,

    サイドバー上_PC

    CATEGORY
    この記事のカテゴリ
    STINGERの親カテゴリ
    ブログ内の他のカテゴリ
    更新チェックはこちらから!