2018年3月27日PCやタブレット用のレイアウトとスマートフォン用のレイアウトをそれぞれ分けて画面表示しているホームページは多いと思います。そこで今回はCSSのメディアクエリとViewPort(ビューポート)という機能を利用してレスポンシブデザインを作る方法についてご紹介します。まとめそれでは説明していきます。メディアクエリとViewPortを使ったレスポンシブデザインCSSメディアクエリを使って横幅サイズで場合分けするPC用の画面とスマートフォン用の画面を切り替えたい人は多いと思います。PC用画面とモバイル端末での画面表示を分ける方法の一つに、CSSのメディアクエリという機能を利用した設定方法があります。表示例をあげてみます。■PC・タブレット画面などを想定した768px以上で横並びになり、スマホ画面を想定した767px以下で縦並びになる例です。■上記を実際にブラウザで表示した例です。使い方は簡単で、CSSファイル(外部スタイルシートや内部スタイルシート)で下記のように記述します。and」という記述をしている場合もありますが必須ではありません。ここでは省略しています。参考:●media属性を使った媒体別のスタイルシートサイズの設定は具体的には以下のように書くことができます。1200px){...}なお、表示を変化する境界値をブレイクポイントと言います。ブレイクポイントの設定値はいろいろな考え方がありますが、有名なレスポンシブデザインのCSSフレームワークであるBootStrap(ブートストラップ)では、下記のような基準にしています。横幅≥1200px考え方・書き方は人によって色々ですが、上記を基準にタブレットをスマホ画面に含める場合は、たとえば下記のように場合分けすることができます。(min-width:992px){...}スマホ用、タブレット用、PC用で分ける場合は、下記のように場合分けできます。(min-width:992px){...}下記は、スマホ用・タブレット用・PC用にCSSメディアクエリを利用して作成したレスポンシブデザインの例です。https://webst8.com/blog/wp-content/uploads/2017/09/responsive-design-sample2.mp4なお、width以外にもresolution(解像度)やdevice-width(画面の幅、高さ)などで分ける方法もありますが、ここでは割愛します。headタグにViewPortの設定を記述するスマートフォンなどのモバイル端末用にメディアクエリの設定と合わせて、headタグに下記のviewportの記述をしておきましょう。initial-scale=1">iphone6などのスマートフォンは本来360px前後ですが、viewportの設定がない場合はiphone6などのスマートフォンはデフォルトで980pxで描画する仕様になっています。そのため、スマートフォン用のサイズでCSSを設定しても思ったように機能しなくなってしまいます。ViewPortの記述がない状態のスマホ画面viewporの記述がないパターン。横幅が980pxで描画されていて小さく見えるそこで、下記のようにviewport=device-width,initial-scale=1と記述することでデフォルトの980pxで描画するのではなく、本来の360px前後での描画になるため、スマートフォン用のサイズで設定したCSSが意図するように機能するようになります。initial-scale=1のパターン。横幅が375pxで描画されているdevice-widthはデバイスの本来の横幅サイズで、initial-scale=1は拡大倍率の初期値という意味です。おまじないとして書いておくと良いと思います。まとめ今回は、CSSのメディアクエリを利用したレスポンシブデザインの設定方法とViewPortについて説明しました。このやり方を利用することで下記のようにPC用の画面とスマートフォン用の画面を切り替えることができるようになります。今回は以上になります。弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。無料事前相談もしておりますので、まずはお気軽にご登録ください。詳細はこちら最後までご覧いただきありがとうございました。【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。詳細はこちら【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。WordPressの使い方をしっかり勉強したい方はぜひご覧ください。(※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。今回は、CSSのfloatを使った要素を横並びにする方法とfloatを解除するclearプロパティをご紹介します。今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明します。今回は、CSSのtransitionプロパティを利用して、下記のように手軽にアニメーションを作成する方法を紹介します。...CSSCSS擬似クラスと擬似要素および併用可否についてここでは、知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について説明します。今回は、CSSの外部余白marginタグの基本と注意点、およびmargin:autoを利用した要素の真ん中寄せの方法・text-align:centerとの違いを説明します。松本慶(@mattsunkei)元システムエンジニア。約9年メーカーにてシステムエンジニア経験後、2016年脱サラ・独立したのち、現在は個別指導のWEBスクール運営。Webやマーケティングなど覚えたノウハウを自他のビジネスに活かすことが好き。最近は「アフィリエイトを副業で始めたい」というお問い合わせが多くあるので、2019年度からアフィリエイトも強化中。運営者情報お問い合わせプライバシーポリシーこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。apply.WEBST8自分で作る選択を!初心者でもできるホームページ・ブログの始め方・作り。