【CSS】レスポンシブ対応の方法や作り方を徹底解説【メリット&デメリット】ツイート18シェアはてブ8Pocket66レスポンシブ対応は難しい、と学習を始めたばかりの人は思いませんか。確かに難しい、でも、制作回数を増やすことで慣れていくしかありません。様々なデバイスに対応できるレスポンシブ対応は今や一つの大きなテーマです。サイト制作を売りにしたり、Webデザインに携わる者にとって、必ずマスターが求められます。時間がかかるなあともうかもしれませんが、手を動かし、その都度間違いを克服していく経験の積み重ねが大切です。この記事では少しでも時間が短縮できるように、レスポンシブの方法だけでなく、陥りがちな誤りなども説明していきます。一通り読んでいただければレスポンシブ対応のイメージがついていることでしょう。この記事は、初学者向けに書いていますので、すでに実務でレスポンシブ対応のサイトを何度も作成している方は必要に応じて読み飛ばしてください。まとめレスポンシブデザインとは?レスポンシブデザインとは、画面サイズに応じて最適に表示されるよう設計されたデザインです。レスポンシブデザインを作成することで、たった一つのhtmlファイルで、スマホ、タブレット、パソコンなど様々なディバイスに応じた表示に切り替えられるようになります。以下は、左がデスクトップ、右がモバイル表示です。画面サイズが縮小しても、情報が縦に組み替えられ、全情報が見られます。このように、ディバイスごとにhtmlを変える必要はなく、一つのhtmlで様々なディバイスに対応できるように設計されたデザインがレスポンシブデザインです。レスポンシブデザインのメリットデメリットメリットGoogleが推奨している最大の強みは、Googleがレスポンシブウェブデザインを推奨していることでしょう。これは推奨であり必須ではありませんが、それでもモバイルサイトがあるか、ないかでは、検索順位にも影響します。それだけPC以外のディバイスからの閲覧数が格段に増えてきた背景があります。「PCからだけサイトが見られているわけではない」ということを念頭に置き、ユーザーを設定し、それに応じてレスポンシブ用のサイトを制作した方が良いでしょう。法人がターゲットなのでPC用だけでもいいと思っていたら、閲覧データを見てみると、モバイルからの流入も一定程度あったという結果になるかもしれません。いずれにしろ、サイトのレスポンシブ化は避けれないでしょう。検索エンジンのクローラーの巡回も1回だけで済みます。一つのURL、一つのHTMLで様々なディバイスからユーザーを獲得することができます。その際は、各ディバイスに対応できるようなUIも考える必要があります。モバイル用に画面が変化した場合にも耐えられるようなデザインにしなければなりません。デメリットデザインの自由度は低下する。画面サイズの変更を考えると、自由なデザインは難しいでしょう。Webデザインの学習を始めた頃は、いろいろなデザインにチャレンジしたいものですが、そこは気持ちを抑えてください。PC用のデザインでも、モバイル用にも耐えられるようにレイアウトなどを構成しなければなりません。そこで、PC用であっても、結局、比較的シンプルなレイアウトにならざるを得ません。レスポンシブ用の幅や文字単位を使う。幅や大きさが固定されるようなpxなどの単位は非常に使いづらいです。この点を理解していないと画面サイズが変化した時に幅や文字サイズを一つ一つ変更しなければならず時間が余計にかかってしまいます。工数はかかるモバイル用、タブレット用、PC用などそれぞれのhtmlを作る必要はありませんが、それでも、画面サイズごとにレイアウトの調整は必要になってきます。PC用など一つの用途に絞って作る作業時間よりは工数がかかります。加えて、レスポンシブに対応していない単位などを使用すると、変にレイアウトが崩れ、余計に工数がかかってしまうものなのです。これは慣れや経験が必要です。制作したWebサイトがモバイル閲覧に対して、適切な作りになっているかどうかを確認する手段があります。それが「モバイルフレンドリーテスト」です。これに合格していないと、検索結果の順位にも影響します。モバイル用の表示がユーザーにとって不便な可能性が高いということです。以下のリンクをクリックしてください。モバイルフレンドリーテスト次に、制作したサイトのURLをフォーム内に入れて、「テストを実行」ボタンを押してください。すると、結果が表示されます。フレンドリーですこのページは、モバイル端末での使い勝手に優れています。パスしなければ、モバイル対応がされていないか、なんらかの不具合があるということで、コードの見直しが必要になります。レスポンシブ化の手続きでは、早速、Webをレスポンシブ化を進めましょう。幾つかの手続きがあります。viewportの設定Webをレスポンシブ化するには、まず、head内にviewport(ビューポート)と呼ばれるmetaタグを入れる必要があります。逆にこれがないとレスポンシブ化しませんので、必ず入れるmetaタグになります。content="width=device-width,initial-scale=1.0"></head>「content=”width=device-width」の意味は、デバイスの幅に合わせるための指示となります。これでディバイスごとに柔軟に幅を変えてくれます。仮に、「content=”width=320′′」とすると、幅が320pxとして認識されるようになります。レスポンシブ対応の場合は、様々なディバイスに対応してほしいので、ここを「content=”width=device-width」とするのです。「initial-scale=1.0」は、ズーム倍率を表します。「1.0」を設定すれば、変わらずそのままの大きさで表示されますし、「2.0」を設定すれば、ズーム2倍で表示されます。「content=”width=device-width」を設定していて、「initial-scale=2.0」のズームで表示させる必要はありませんので、ここは特段の理由がない限り、「」を置いておけばよいでしょう。CSSファイルの設定メディアクエリの設定が一般的に広く知られていますが、これが全てではありません。ブレークポイントごとにCSSファイルを分けて設置するというやり方もあります。以下のように複数のファイルを用意します。それをhtmlファイルのhead部分で各CSSファイルと関連づけます。表示領域の横幅639px以下をスマートフォンに対応させ、640pxから1023pxをタブレットに対応させ、1024px以上をPCに対応させます。>このように書けば、設定のブレイクポイントで適用されるCSSファイルが切り替わります。screenの設定です。複数のCSSファイルを一つにまとめて書く基本的な記載は、以下です。これをCSSファイル内に置くことで、設定した画面サイズの変更点に達するとこのCSSの指示が切り替わります。この切り替えポイントを「ブレークポイント」と言います。このブレイクポイントは、画面の横幅を設定しています。/*ここに特定サイズのCSSを記載}実際は以下のように書きます。下に書いた方のプロパティが後に書いた命令を上書きします。「どの幅で、いくつくらい異なるスタイルを用意すれば良いのか」、ブレイクポイントの設定は、誰もが悩む問題です。覚えておいて頂きたいのは、「絶対的なブレイクポイントはない」ということです。多種多様なディバイスごとにブレイクポイントを設定するのは無理があります。現実的には、アクセス解析を行い、ユーザーの閲覧傾向から特定のサイズを想定し、ある程度妥当な複数のスタイルを用意しておくことで多様な環境からでも閲覧できるようにしておきます。加えて、ブレイクポイントの設定は、できるだけ数を絞るのが良いでしょう。初学者は全てのディバイスに対応できるように、各ディバイスの横幅毎にブレイクポイントを用意する人もいますが、複雑化する上に、不具合の確率が上がります。参考までに、日本でユーザーが使用するモバイルやタブレットのサイズの傾向は以下のように示されています。StatCounter上記の例では、「375」、「360」、「414」と値が近く、異なる横幅を持ったディバイスから閲覧が多いということになります。ブレイクポイントを決定する際は、この3つのうちのどれかに特定してブレイクポイントを決定するのではなく、これらのうちのどれから閲覧があっても良いようなポイントを絞って設定すると良いでしょう。同様なことは、スマートフォンとタブレットの境であるブレークポイントにも言えます。設定としては、768px(iPad)が一般的ですが、このように特定のディバイスを想定したブレイクポイントの設定は、将来一般的に使用されるディバイスが変われば再度変更しなければなりません。このディバイスに依存しないブレイクポイントの設定に関してもっともわかりやすいのは、こちらの記事です。以下はこの記事からの抜粋です。*/ここに基本CSSを書きます。モバイルファーストでは、モバイル最小値からPCの大きさに向けて、以降のCSSを書いていきます。{}モバイルファーストかPCファーストかこれまでGoogleはパソコンのコンテンツを主要な判断材料として評価してきました。今やモバイルからの検索もまた主流となり、モバイル対応へコンテンツの最適化を測る方向性は今後もより高まるでしょう。Indexは、スマートフォンのコンテンツ内容を中心にインデックスし、評価するやり方です。ユーザーが、スマートフォンを使って検索した場合は、スマートフォンに対応したサイトが上位に検索される方がユーザーのニーズに合っているからです。モバイルファーストとは、「ユーザーがモバイルから検索しても、モバイルユーザーのニーズに沿って、適切に表示ができるようサイト構築をすること」を意味です。スマートフォンユーザーは、縦長のコンテンツをスクロールしながら見ます。UIを考えたときに、コンテンツの優先順位を考えたり、「問い合わせフォーム」にいち早く導く工夫をしなければなりません。HTML構造は変わりませんから、PCに変わったとしてもPCユーザーでも見やすいサイトを目指す必要があります。モバイルファーストとは、単にメディアクエリをモバイル版から最初に書いていくCSSファイルの書き方を単に指しているのではなく、コンテンツの見易さやサイトの使いやすさを含めた包括的な考え方と捉えるのが妥当でしょう。これは「ユーザーは誰か?」という根本的な問題にたち戻った結果です。これが絶対的な考え方ではないということです。ユーザーがPCからの閲覧が多く、彼らの特徴が、例えば、じっくりとコンテンツを熟読して、判断するタイプであれば、「モバイルファースト」より「PCファースト」という考え方のほうが妥当です。この場合は、多くの情報を提供したり、資料のダウンロード機能を実装したりする必要があります。*/ここに基本CSSを書きます。PCファーストでは、PCサイズからモバイルの大きさに向けて、以降のCSSを書いていきます。}幅/配置/フォント変更さて、上記のようにディバイスの幅に応じて書き方を変えるわけですが、この部分に書く内容は、可変的な内容となります。margin、padding、width、font-sizeなどは対象となりますが、デザイン的要素は共通の項目に書けば良いわけです。この際、固定値の設定は不具合を招くもとになります。画面が縮小したときにその大きさが変化しないのであれば非常に見ずらい画面となります。モバイルサイトでよく使われるのが、「rem」や「vw」などです。親要素のサイズに影響される「%」、「em」と異なり、「rem」、「vw」はそれぞれ「ルート」と「viewportサイズ」に影響されます。「ルート」とは、html{}で設定したサイズであり、「viewportサイズ」は、ディバイスの横幅を意味します。「rem」を使用する場合は、以下のように最初に設定しておきます。)}例えば、以下のように共通項目と可変的項目を分け、可変的項目をメディアクエリ内のそれぞれのブレイクポイントで設定していきます。1280px〜:大型PC====================*/共通項目をここに書いていく。1.6rem;}}CSS3からは、ディバイスの横幅を/縦幅を元にサイズを計算してくれる「vw」、「vh」という単位もあります。これは「viewport」サイズに応じて自動的にサイズを変えてくれます。予想外の大きさになるケースもありますので、随時ブレイクポイントで変更してください。便利なCSSフレームワーク実は、レスポンシブwebデザインを制作する場合は、それに対応したCSSフレームワークを使うことが多いでしょう。有名なのがbootstrapです。現在は、「bootstrap4」が公開されています。bulmaというフレームワークもあります。これらの設定は非常に簡単です。ここでは、「bootstrap」を説明します。使い方は別の機会に譲るとして、ここでは使えるように設定までをお伝えします。bootstrap4以下の画面に行き、「Download」ボタンをクリックします。CSSとjsファイルが入ったファイルがダウンロードされますので、それを制作しているファイルに移します。以下のような状態を作ります。その上で、これらのフォルダをhtmlに読み込みます。以下のコードをコピーし、htmlに貼り付けます。crossorigin="anonymous"></script></head>これで、bootstrapが使えるようになりました。グリッドシステムは非常に便利ですので積極的に使ってください。まとめレスポンシブサイトはスマートフォンの使用が大きな流れである以上、このスキル習得は避けられません。忘れてはいけないのが、「ユーザーが誰か?」です。これらの「ユーザーがどのような状況でサイトを使うのか?」です。それに応じてモバイルファーストで作るのか、PCファーストで作るのかを考え、提供するコンテンツやデザインをユーザーに合わせる必要があります。アクセス解析を駆使しながら、ユーザーの特徴を見極め、それに応じて、場合によっては再度作り変える手間も必要になるときがあります。おすすめ記事【無料あり】本気でおすすめしたいプログラミングスクール3つ【実際に受講した】おすすめ記事IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】この記事が気に入ったらいいねしよう!最新記事をお届けします。陽介ベトナムで起業し、HR関連のコンサルティング業務をやっています。日本を離れて8年が経ちますが、日本ではあり得ないハプニングを楽しんでいます。RailsでWebサービスを作っています。