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

公開日: : 最終更新日:2014/08/23 Stinger, Wordpress ,

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

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

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

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

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

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

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

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

Sponsored Link

「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


     これは!と思ったらシェアして頂けると嬉しいです
    • このエントリーをはてなブックマークに追加
    • Pocket
    • 111 follow us in feedly
    Loading Facebook Comments ...

    Comment

    1. […] 参照:Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析! […]

    2. […] <参考記事>これは!ログさん:Stinger5カスタマイズ!どこがどのデバイスに対応?「st… […]

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

    4. いつも読ませていただいています。
      とっても素敵なカスタマイズなので私のブログでも使わせてください。
      このカスタマイズに挑戦しようと思い、書いてくださっている通りに編集したのですが、なぜかうまくいきません。。
      記事の題名(含むh4)が、画像の右側になってしまってレイアウトが崩れてしまいます。
      なにか心当たりがあればアドバイスいただけると嬉しいです。

      • Jimon より:

        コメントありがとうございます!
        サイトのデザインステキですね^^

        質問の内容ですがどのカスタマイズでしょうか?
        コメントいただいた記事が該当記事ではない様です^^;

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

    6. […] うまくいきませんでした。 そこで・・・思い出したんです。 Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析! この記事に書かれていたことを!!! […]

    7. […] Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析! powered by サムネイルリンク […]

    Message

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    PROFILE

    Jimon Profile
    Jimon
    東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
    お問い合わせ

    About


    おしゃれな小物とiPhone,Macの情報発信ブログ。
    管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

    PAGE TOP ↑