制作実績お見積フォームHTMLWordPressEC累計コーディング数:14698ページホーム>Web制作>レスポンシブデザインでスマホ対応させる方法(CSS3、メディアクエリ)レスポンシブデザインでスマホ対応させる方法(CSS3、メディアクエリ)Web制作2016年08月17日2015年4月より、Googleは検索順位のランキング要因にモバイルフレンドリー(スマホ対応)を盛り込むことを開始しました。スマホを中心とするモバイルタブレットへの対応の一貫なのですが、この流れは今後より重要になっていくことでしょう。今回はスマホ対応するために最もよく使われている方法である、レスポンシブデザインの作り方について解説します。SEO対策にもなるので、ぜひ参考にしていただければと思います。レスポンシブデザインの基礎知識レスポンシブデザインとは?はじめに、レスポンシブデザインの仕組みについて簡単に確認しておきましょう。レスポンシブデザインとは、デバイスの横幅によって適用するCSSを切り替える方法を指しています。従来はデバイスごとにHTMLを分ける方法がとられてきましたが、レスポンシブデザインでは用意するHTMLはページごとに一つで済みます。導入するメリット・デメリットレスポンシブデザインを導入することのメリットについてもご紹介しておきましょう。上で述べたように、レスポンシブデザインではページごとのHTMLが1つで済みます。そのため、開発工数を削減したり、保守管理や改修もし易くなるでしょう。冒頭で述べたように、SEOへの効果も期待できます。一方で、既存のサイトをレスポンシブデザインに変更する場合、工数やコストが嵩んでしまうことがあります。状況によっては、レスポンシブデザインのサイトを新規に作成した方が良いこともあるでしょう。レスポンシブデザインの作り方レスポンシブデザインを作るときの手順について見ていきましょう。ここでは640pxをブレークポイントとして、横幅が640px以下のデバイスにのみ適用させるスタイルを書いていきましょう。CSSを書く下のように記述することで、全体に適用させる共通のCSSと、640px以下のデバイスにのみ適用させるCSSを分けることができます。*/}640px以下のデバイスでアクセスした場合、まずはじめに共通のCSSが読み込まれます。その後に、640px以下のデバイス向けのCSSが読み込まれます。640pxの場合は、CSSが上書きされた結果、最終的にスマホ対応されたデザインで表示されるということです。HTMLにviewportを書く次に、HTMLファイルのheadタグ内に下のコードを記述します。これでレスポンシブデザインが働くようになります。/>あとがきレスポンシブデザインの作り方について解説しました。レスポンシブデザインは、そのための設計とブレークポイントを適切に決めることがポイントです。上手に採り入れていっていただければと思います。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。