レスポンシブWebデザイン レイアウトを切り替える
ブラウザ画面の横幅のサイズに応じて、レイアウトを切り替える方法を
レスポンシブWebデザインと呼びます。
私のブログでもレスポンシブWebデザインを取り入れてみました。
スポンサーリンク
1.ブレイクポイントを決める
画面のレイアウトを切り替える横幅をブレイクポイントと呼びます。
私の場合は、768pxをブレイクポイントとして、
767px以下を1段組のレイアウト、768px以上を2段組レイアウトとしました。
ブレイクポイントを決めるときは、
スマホやタブレットの画面サイズを参考に決めるとよいと思います。
主なスマホ、タブレットの画面サイズ
iPhone 4/4S 320×480
iPhone 5/5S 320×568
iPhone 6/6S 375×667
Nexus4 384×640
Nexus5 360×640
Nexus7 600×960
iPad 768×1024
Nexus10 800×1280
iPhone 4/4S 320×480
iPhone 5/5S 320×568
iPhone 6/6S 375×667
Nexus4 384×640
Nexus5 360×640
Nexus7 600×960
iPad 768×1024
Nexus10 800×1280
2.メディアクエリの設定
1で決めたブレイクポイントで1段組のレイアウトと2段組のレイアウトを切り替えます。
ここでは、CSSにメディアクエリ@media ()を使用することで、
画面サイズに応じたCSSを適用することができます。
私のCSSでは通常は1段組のレイアウトが適用され、768ピクセル以上の時は、
以下に記載した2段組のレイアウトが適用される仕組みです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* メディアクエリの設定 */ @media (min-width: 768px) { /* 2段目 */ .container {max-width: 1000px; overflow: hidden} .contents {width: 65%; float: left} .blogmenu {width: 30%; float: right} /* ナビゲーション・メニュー */ nav li {margin-right: 40px} } |
メディアクエリ属性の意味
・min-width:画面の横幅が設定したピクセル以上の時にスタイルが適用される
・max-width:画面の横幅が設定したピクセル以下の時にスタイルが適用される
・min-width:画面の横幅が設定したピクセル以上の時にスタイルが適用される
・max-width:画面の横幅が設定したピクセル以下の時にスタイルが適用される
3.ビューポート設定
端末の画面サイズに応じた横幅で表示するには、
header.phpにビューポート設定を追加する必要があります。
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
これで、レスポンシブデザインが適用され、
私のスマホでブログを見ると1段組レイアウトで表示されました!
<ビューポート設定前>
<ビューポート設定後>
4.まとめ
以上、レイアウトの切り替え方法でした。
参考になれば幸いです。
スポンサーリンク
関連記事(一部広告含む)