デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

レスポンシブ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

2.メディアクエリの設定

1で決めたブレイクポイントで1段組のレイアウトと2段組のレイアウトを切り替えます。
ここでは、CSSにメディアクエリ@media ()を使用することで、
画面サイズに応じたCSSを適用することができます。
私のCSSでは通常は1段組のレイアウトが適用され、768ピクセル以上の時は、
以下に記載した2段組のレイアウトが適用される仕組みです。

メディアクエリ属性の意味
・min-width:画面の横幅が設定したピクセル以上の時にスタイルが適用される
・max-width:画面の横幅が設定したピクセル以下の時にスタイルが適用される

3.ビューポート設定

端末の画面サイズに応じた横幅で表示するには、
header.phpにビューポート設定を追加する必要があります。

これで、レスポンシブデザインが適用され、
私のスマホでブログを見ると1段組レイアウトで表示されました!

<ビューポート設定前>
IMG_5875
<ビューポート設定後>
IMG_5876

4.まとめ

以上、レイアウトの切り替え方法でした。
参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン