2022年10月6日コーディングレスポンシブWebデザインとは、1つのHTMLをCSSによってパソコンでもスマートフォンでも見やすいように最適化することです。スマートフォンでWebサイトを見る人が多くなった現在では、WebサイトをレスポンシブWebデザインで作ることは必須だと言えます。レスポンシブWebデザインでWebサイトを作るのは難しいと思われがちです。確かに通常のWebサイトを作るよりは少し手間は掛かりますが、基本はシンプルで簡単です。レスポンシブWebデザインの作り方を出来る限り簡単に解説していこうと思います。Queries)でデザインを切り替えるレスポンシブWebデザインのサンプルを紹介デバイスごとにフォントサイズを変更するデバイスごとに縦並びや横並びのレイアウトを変更するスマートフォンで画像が見切れないようにするレスポンシブWebデザインの作り方まとめレスポンシブWebデザインの作り方レスポンシブWebデザインを作る上で必要なものは以下の2つです。Queries)ひとつずつ解説していきます。ビューポート(viewport)を指定するビューポート(viewport)とは、Webサイトの表示サイズを指定するmeta要素です。ビューポートを指定しておかないと、Webサイトが意図しないサイズで表示される場合があります。ビューポートは<head>タグ内に記述します。レスポンシブWebデザインのHTMLの雛形は以下のようになります。Queries)を使うことによって、スマートフォン、タブレット、パソコンなどのデバイスごとにデザインを切り替えることができます。メディアクエリはCSSファイルに以下のように書きます。*/}768pxや1200pxはウインドの横幅のサイズです。768pxはウインドウの横幅が768px以上の場合という意味になります。普通にスマートフォン用のCSSを書きます。1200px)で上書きしていくイメージです。768pxや1200pxは自由に変更して大丈夫です。CSSを切り替えるポイントを「ブレイクポイント」と言いますが、ブレイクポイントを増やしたり減らしたりすることもできます。*/}制作するWebサイトによって対応すべきデバイスは異なるので、必要に応じてブレイクポイントを設定します。パソコン用のCSSを先に書くパターンパソコン用のCSSをタブレットやスマートフォン用のCSSで上書きしていくパターンもありますが、個人的にはスマートフォン用のCSSを最初に書いた方が作りやすいと思います。スマートフォンとパソコンでは、パソコンの方が表示領域が広いのでデザイン要素が多くなり、レイアウトも複雑になりがちです。複雑なものをシンプルにしていくより、シンプルなものを複雑にしていく方が楽だと思うので、僕はスマートフォンのCSSから書くようにしています。一応、パソコン用のCSSから書くパターンも紹介しておきます。1199pxはウインドウの横幅が1199px以下という意味です。パソコン用のCSSを書き、ウインドウの横幅が1199px以下、767px以下になるごとにCSSを上書きしていきます。レスポンシブWebデザインのサンプルを紹介レスポンシブWebデザインでよく使うサンプルをいくつか紹介します。どのサンプルもスマートフォン用のCSSをタブレットやパソコン用のCSSで上書きする形になっています。デバイスごとにフォントサイズを変更するレスポンシブWebデザインでは、見出しのフォントサイズをデバイスごとに変更することが多いです。スマートフォンに合わせてフォントサイズを指定するとパソコンでは小さく感じますし、パソコンに合わせてフォントサイズを指定するとスマートフォンでは大きすぎて改行が増えることもあります。仮にH2のフォントサイズをデバイスごとに変更する場合は、以下のようなCSSになります。}}デバイスごとに縦並びや横並びのレイアウトを変更するスマートフォンでは1列で縦並びになっている要素を、パソコンでは4列で横並びにするなど、デバイスによってレイアウトを変えることができます。レスポンシブWebデザインにおいて、このレイアウト変更はあらゆる場面で使います。今回は以下のようにレイアウトを変更したいと思います。スマートフォンでは1列で縦並びタブレットでは2列で横並びパソコンでは4列で横並びHTMLを以下のように書きます。class="col">カラム</div></div>CSSを以下のように書きます。flex;を指定して.colが横並びになるようにします。wrap;で折り返すように指定しています。100%;を指定しているので、.colの横幅はウインドウの横幅いっぱいになり1列で折り返って縦並びになります。タブレット用のCSSでは.colの横幅を50%に指定しているので、.colは横2列でお折り返って横2列、縦2行のレイアウトになります。パソコン用のCSSでは.colの横幅を25%に指定しているので、.colは横に4列並ぶレイアウトになります。スマートフォンで画像が見切れないようにする大きめの画像を配置した場合、スマートフォンでは見切れてしまう場合があります。その場合は、imgタグにmax-widthを指定することで解決できます。100%;}ただし、これだけだとパソコンでは画像が左寄せになってしまいます。ウインドウの横幅が画像の横幅より大きくなった場合は、画像を中央寄せにした方がレイアウトとしてキレイです。この場合は以下のようにCSSを書けば大丈夫です。auto;}レスポンシブWebデザインの作り方まとめレスポンシブWebデザインの作り方で押さえておくべきポイントは以下の2つです。Queries)ビューポートは1回書くだけなので書き忘れに注意しておけば問題ありません。あとはメディアクエリでデバイスごとにCSSを指定していくだけです。メディアクエリの基本形は以下の通りです。*/}複雑なレスポンシブWebデザインも、この基本形を応用することで作られています。簡単なデザインやレイアウトの切り替えから練習し、徐々に複雑なレスポンシブWebデザインに挑戦していけばいいと思います。以上がレスポンシブWebデザインの作り方でした。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメント*WordPressのGutenbergでトップページを作る手順Photoshopで髪の毛をきれいに切り抜く方法スポンサーリンクPROFILE2012年からWebサイト制作に関わり2022年に独立。現在はフリーランスのWebデザイナーとして活動しています。Webサイトのデザイン、WordPressでのサイト構築、HTMLとCSSのコーディングなどをメインでやっています。