WebサイトをPC、タブレット、スマホといった様々なデバイスの画面サイズに対応させるために、レスポンシブデザインとはなにかを解説しています。
stinger5のレスポンシブデザインとは
- ここで紹介するstinger5のカスタマイズは、私の備忘録です。
- バックアップは忘れずに！！！
以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いします。
ソースコードを変更する場合は、ＦＴＰソフトを使ってサーバーにアップ。または各サーバーのオプション（ファイルマネージャー）等（例はさくらサーバーです）でカスタマイズを行ってください。
WebサイトをPC、タブレット、スマホといった様々なデバイスの画面サイズに対応させるために、一般的にそれぞれに最適化した複数のHTMLファイルやCSSを用意してHTTPリダイレクトなどを利用して振り分けを行っている。
一方、レスポンシブデザインでは、単一のファイルが表示されたデバイスの種類やスクリーンサイズなどに応じて表示内容が変化し最適化されるようになっている。
スタイルシートに記述されるデザインコードは、PCとタブレットおよびスマホそれぞれ別々に指定できるため閲覧するデバイスにあったブログデザインを作ることができます。
しかし逆にそれぞれを設定する必要があるため注意が必要になります。特にスタイルシート中のカスタマイズする部分や設定を間違えるとデザインが崩れる原因となるので注意が必要です。
Stinger5のスタイルシートの構造
Stinger5のレスポンシブデザインは次の仕組みを利用して作られています。
Media Queriesについて
@media only screen and (〇〇〇) { □□□ }
〇〇〇の条件に当てはまる時□□□のコードを適用することができます。
<条件の例>
Max Width：
スクリーンエリアの最大幅。このサイズより小さい場合にCSSコードが適用される
Min Width：
スクリーンエリアの最小幅。このサイズより大きい場合にCSSコードが適用される
Max Device Width：
デバイスサイズの最大幅。このサイズより小さい場合にスタイルコードが適用される
Min Device Width：
デバイスサイズの最小幅。このサイズより大きい場合にスタイルコードが適用される
Device Pixel Ratio：
デバイスの解像度（webkit）指定したものと一致したときにスタイルコードが適用される
Orientation：
デバイスの向きが指定した向きの場合にスタイルコードが適用される。
Stinger5ではこの３つが使われています。
【@media only screen and (max-width: 780px)】
【@media only screen and (min-width: 380px)】
【@media only screen and (min-width: 780px)】
これらを組みあわせてレスポンシブデザインが作られています。
Media Queriesの仕組みだけで考える
① 最初にすべてのデバイス（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が対象となります。
それに加えて後ろ側にあるスタイルコードが優先されるという仕組みと組み合わせると
【スマートホン】
①と②が適用されますが、より後ろにある②が優先的に適用されます。②以外のものは①が適用されます。
【タブレット端末】
①と②と③が適用されますが、一番後ろの③が優先的の適用されます。③以外のものは②→①の順でスタイルコードが適用されます。
【PC】
①と③と④が適用されますが一番後ろの④が適用されます。④以外のものは③→①に順でスタイルコードが適用されます。
ちょっと複雑なようですが、このように共通のコードを作ることで、（全てのコードをデバイスのスクリーンサイズごとに設定するよりも）スタイルコードが少なくて済みます。
共通のコードの後ろにスクリーンサイズごとに例外のコードを作ると考える理解しやすいかもしれません。
Stinger5をカスタマイズしやすくする
スタイルシートを工夫する
特別なことをするわけではありません。
カスタマイズのたびにどこにコードを書けばいいのか悩まなくて済むように書き加えるだけです。
スタイルシートの以下のコードの前にこのようにコメントを書き加えてみる。
@media only screen and (max-width: 780px)
/*———
↓↓スマートホンだけののスタイル設定
————-*/
/*————-
↑↑スマートホンだけのスタイル設定
—————-*/
@media only screen and (min-width: 380px)
/*————
↓↓タブレットだけのスタイル設定
—————*/
/*————-
↑↑タブレットだけのスタイル設定
—————*/
@media only screen and (min-width: 780px)
/*———-
↓↓PCだけのスタイル設定
————-*/
/*———-
↑↑PCだけのスタイル設定
————-*/
まとめ
いかがでしたでしょうか？ レスポンシブデザインは構造が複雑ですが、仕組みを理解するとカスタマイズの幅がぐっと広がります。
ぜひ、stinger5のカスタマイズにチャレンジしてみるといいと思います。
コメント