【stinger5】レスポンシブデザインの仕組みとカスタマイズしやすくするためのひと工夫

stingerシリーズ初のレスポンシブデザインとなった「Stinger5」の仕組みを紹介します。

レスポンシブデザインは考え方がちょっと複雑ですが、分かってしまえば簡単です。カスタマイズしやすくするちょっとした工夫も紹介します。

ついにレスポンシブデザインに進化!

レスポンシブデザインphoto by Erik Pettersson

enjilogさんよりStingerがリリースされて以来絶大な人気を誇っているStingerシリーズですが、ついにレスポンシブデザイン採用の「Stinger5」がリリースされました。

多くのStingerファンが待ち望んでいたことであり、間違いなく「超進化」と言ってよいでしょう・

スポンサーリンク

レスポンシブデザインとは・・・

WebサイトをPC、タブレット、スマートホンといった様々なデバイスの画面サイズに対応させるために、一般的にはそれぞれに最適化した複数のHTMLファイルやCSSを用意してHTTPリダイレクトなどを利用して振り分けを行っています。

一方、レスポンシブデザインでは、単一のファイルが表示されたデバイスの種類やスクリーンサイズなどに応じて表示内容が変化し最適化されるように作られています

スタイルシートに記述されるデザインコードは、PCとタブレット、スマートホンそれぞれ別々に指定できるため閲覧するデバイスにあったブログデザインを作ることができます。

しかし逆に言えばそれぞれを設定する必要があるため注意が必要です。特にスタイルシート中のカスタマイズする部分や設定を間違えるとデザインが崩れる原因となります。

Stinger5のスタイルシートの構造

Stinger5のレスポンシブデザインは次の仕組みを利用して作られています。

① スタイルシートは、より後ろに書かれたものが優先される
② Media Queriesを使うとスクリーンサイズで適用するコードを指定できる
Media Queriesについて

@media only screen and (〇〇〇) { □□□ }

〇〇〇の条件に当てはまる時□□□のコードを適用することができます。

<条件の例>

Max Width:
スクリーンエリアの最大幅。このサイズより小さい場合にCSSコードが適用される

Min Width:
スクリーンエリアの最小幅。このサイズより大きい場合にCSSコードが適用される

Max Device Width:
デバイスサイズの最大幅。このサイズより小さい場合にスタイルコードが適用される

Min Device Width:
デバイスサイズの最小幅。このサイズより大きい場合にスタイルコードが適用される

Device Pixel Ratio:
デバイスの解像度(webkit)指定したものと一致したときにスタイルコードが適用される

Orientation:
デバイスの向きが指定した向きの場合にスタイルコードが適用される。

Stinger5ではこの3つが使われています。

@media only screen and (max-width: 780px)
@media only screen and (min-width: 380px)
@media only screen and (min-width: 780px)

この①と②を組みあわせてレスポンシブデザインが作られています。

Media Queriesの仕組みだけで考えると・・・
stinger5 構造new

・最初にすべてのデバイス(PC、タブレット、スマートホン)に共通のスタイルコードが書いてあります。ほとんどがこの領域です。

・次に@media only screen and (max-width: 780px)を使います。最大780pxまでということは・・・、スクリーンサイズが0px~780pxまでにスタイルコードが適用されます。つまり、スマートホンとタブレットが対象です。

・次に@media only screen and (min-width: 380px)を使います。最低380pxまでということは・・・、スクリーンサイズが380px~にスタイルコードが適用されます。つまり、タブレットとPCが対象です。

・次に@media only screen and (min-width: 780px)を使います。最低780pxまでということは・・・、スクリーンサイズが780px~スタイルコードが適用されます。つまりPCが対象となります。

それに加えて後ろ側にあるスタイルコードが優先されるという仕組みと組み合わせると
レスポンシブ2
スマートホン:①と②が適用されますが、より後ろにある②が優先的に適用されます。②以外のものは①が適用されます。

タブレット端末:①と②と③が適用されますが、一番後ろの③が優先的の適用されます。③以外のものは②→①の順でスタイルコードが適用されます。

PC:①と③と④が適用されますが一番後ろの④が適用されます。④以外のものは③→①に順でスタイルコードが適用されます。

ちょっと複雑な考え方ですが、このように共通のコードを作ることで、(全てのコードをデバイスのスクリーンサイズごとに設定するよりも)スタイルコードが少なくて済みます。

共通のコードの後ろにスクリーンサイズごとに例外のコードを作ると考える理解しやすいかもしれません。

<参照サイト:Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!>

Stinger5をカスタマイズしやすくしよう!

スタイルシートを工夫する

特別なことをするわけではありません。

カスタマイズのたびにどこにコードを書けばいいのか悩まなくて済むように書き加えるだけです。これだけで劇的に楽になります。

スタイルシートの以下のコードの前にこのようにコメントを書き加えてみましょう

@media only screen and (max-width: 780px)
*——————————–
↓↓スマートホンだけののスタイル設定
———————————*

*——————————–
↑↑スマートホンだけのスタイル設定
———————————*/
@media only screen and (min-width: 380px)
/*——————————–
↓↓タブレットだけのスタイル設定
———————————*/

/*——————————–
↑↑タブレットだけのスタイル設定
———————————*/
@media only screen and (min-width: 780px)
/*——————————–
↓↓PCだけのスタイル設定
———————————*/

まとめ

いかがでしたでしょうか? レスポンシブデザインは構造が複雑ですが、仕組みを理解するとカスタマイズの幅がぐっと広がります。
カスタマイズの間違いも減って時間も効率的に使えます。ぜひお試しください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント

  1. […] インの仕組みとカスタマイズしやすくするためのひと工夫 http://www.globalcontent-collabo.net/post-834/ […]