「レスポンスデザインの作り方が知りたい」や「レスポンスデザインを実現するためのHTMLとCSSはどうやって書けばよいんだろう」と悩んでいませんか？

ここでは、レスポンスデザインを作るためのHTMLとCSSの書き方を、初心者向けにご説明します。

訪問者の画面サイズに合わせて、ホームページの形が自動的に変わる「レスポンスデザイン」は、とても便利なものです。

ここでは、レスポンスデザインの作り方を分かりやすく解説するので、ぜひ最後までご覧ください。

レスポンシブデザインとは？

まずは、レスポンシブデザインについて、ご説明します。

レスポンシブデザインとは？

「レスポンシブデザイン」とは、訪問者の画面サイズに合わせて、ホームページの形が自動的に変わる仕組みのことです。

最近は、スマホやタブレットでホームページにアクセスをする人が増えています。

そこで、スマホやタブレットのような小さな画面サイズでも、ホームページがキレイに表示されるように、ホームページの形が自動的に変える仕組みのことを「レスポンシブデザイン」と言います。

レスポンシブデザインはSEO対策にも効果がある

レスポンシブデザインは、Googleが推奨していることもあり、レスポンシブデザインにするホームページが増えてきました。

実際に、Googleなどの検索エンジンは、スマホ対応のホームページを高く評価します。 そのため、ホームページをレスポンシブデザインにすることは、SEO（検索エンジン対策）にもつながります。

スマホの小さな画面でもキレイに表示されて、SEO対策にも効果があることから、レスポンシブデザインにするホームページがとても増えています。

実践！レスポンシブデザインの作り方【HTMLとCSS】

それでは、実際に、レスポンシブデザインのサイトを自分で作る方法を、お伝えしていきます。

ただ、最初からレスポンシブデザインのサイトを作っていくのは、時間がかかる（効率的ではない）ので、元々あるホームページのテンプレートを使って、レスポンシブデザインの作り方をお伝えしていきたいと思います。

具体的には、当サイトで無料で配布している「サンプルサイト」のデータを使用します。 ここでは、「サンプルサイト」のデータを使用して、レスポンシブデザインの作り方を解説していきますね。

【手順１】ホームページを画面サイズに合わせる設定を入れる

レスポンシブデザインのサイトを作るためには、まず、ホームページを画面サイズに合わせる設定（viewport の設定）を入れてあげます。

この viewport を入れることで、ホームぺージ全体を、いろいろな端末の画面サイズに合わて表示することができるからです。

具体的な手順としては、HTMLファイルのヘッダー部分に、下記の１行を入れてあげます。

上記の、 「meta name="viewport"・・・」 という記述を１行、HTMLファイルのヘッダー部分に入れることで、ホームページを画面サイズに合わせて表示させることができます。

レスポンシブデザインのサイトを作るときの必須の設定になりますので、必ず入れるようにしてください。

【手順２】画面サイズによってデザインを変える設定を入れる

レスポンシブデザインのサイトを作るためには、画面サイズによってデザインを変える設定を入れる必要があります。

これを実現するのが、「メディアクエリ」です。 具体的には、スタイルシートのファイル（style.cssファイル）に、次のような記述を入れます。

上記の記述は、「画面の幅が 768ピクセル以下のときは、文字の大きさを16ピクセルにする」という意味です。

このように、メディアクエリを使うことで、訪問者の画面サイズに合わせて、文字の大きさを変えたり デザインを変更することができます。

■ 補足（ブレークポイントについて）

【手順３】画像が自動調整される設定を入れる

ホームページに大きな画像を表示している場合、スマホでホームページを見ると、画面をはみ出してしまいます。

そのため、ホームページに表示している画像が、スマホの小さな画面で自動調整されて表示されるように、設定してあげる必要があります。

具体的には、次の記述を、先ほどのメディアクエリの中に入れてあげることで、画像が自動調整されます。

上記の記述は、「画面の幅が 768ピクセル以下のときは、画像の大きさが横幅100%になるように自動調整する」という意味です。

このように、スマホの小さな画面では、はみ出してしまう横幅の大きな画像は、自動調整されるように設定してあげるようにしましょう。

【手順４】枠が自動調整される設定を入れる

ホームページに、tableタグを使って横幅を固定した枠（たとえば、width="500" など）を表示している場合、スマホでホームページを見ると、画面をはみ出してしまいます。

そのため、tableタグを使って横幅を固定している枠が、スマホの小さな画面で自動調整されて表示されるように、設定してあげる必要があります。

具体的には、下記の記述を、先ほどのメディアクエリの中に入れてあげることで、枠の横幅が自動調整されます。

上記の記述は、「画面の幅が 768ピクセル以下のときは、tableの横幅が100%になるように自動調整する」という意味です。

このように、スマホの小さな画面では はみ出してしまう、横幅が固定されている枠は、自動調整されるように設定してあげるようにしましょう。

【手順５】固定幅の箇所をパーセンテージに直す

【手順３】と【手順４】で、画像と枠が自動調整される設定をしました。

そのため、画像を表示するタグ（imgタグ）と、枠を表示するタグ（tableタグ）で横幅の大きさを固定していても、スマホでホームページを見たら自動調整されます。

ただ、ホームページに Youtube の動画や、地図を掲載を掲載している場合は、iframe タグを使っていて、横幅が固定（width="500" など）されていることがあります。

そのため、もし、固定幅が使われている箇所があった場合は、横幅をパーセンテージ（%）に直すようにしましょう。

具体的には、次のように変更します。

上記のように、横幅の設定である width の数字を、"560" から "100%" というように、パーセンテージ（%）に変更してあげます。

こうすることで、横幅いっぱいに広がるようになり、スマホで見たときにもキレイに表示されます。

【手順６】コンテンツバーを縦に並べること

パソコンサイトの場合、各ページにたどれるリンクは、「コンテンツバー」の箇所で横に並べて表示していることがほとんどです。

ただ、スマホは画面が小さいため、「コンテンツバー」の箇所で横に並べて表示していると、うまく表示されなくなってしまいます。

そこで、スマホで見たときは、横に並んでいるコンテンツバーを、縦に並ぶように設定します。 具体的には、HTMLファイルのソースを下記のように変更します。

次に、CSSファイルのメディアクエリの中に、下記の記述を入れてあげます。

こうすることで、スマホで見たときは、コンテンツバーが縦に並ぶようになります。

【手順７】サイドバーを消して、フッターの箇所に表示すること

スマホは画面が小さいため、パソコンサイトで表示している「サイドバー」は必要ありません。

そこで、スマホで見たときは、サイドバーを非表示にします。 具体的には、サイドバーを表示している箇所の、HTMLファイルのソースを、下記のように変更します。

次に、CSSファイルのメディアクエリの中に、下記の記述を入れてあげます。

こうすることで、スマホで見たときは、サイドバーが非表示になります。


なお、非表示にしたサイドバーを、スマホで見たときはフッターの箇所（ホームページの下部）に表示することもできます。

これについては、実現するための方法が少し複雑になるので、自分で更新できる最短ホームページテンプレートをお使いください。

このテンプレートを使えば、レスポンシブデザインを自分で自由に作れるようになります。

レスポンシブデザインの作り方のまとめ

上記の【手順１】から【手順７】を行うことで、レスポンシブデザインのサイトが完成します。

そして、この手順を実施して作成したスマホサイトが、https://torepia.com/ です。 パソコンサイトとスマホサイトの表示は、下記のように表示されます。

■ パソコンでの表示

■ スマホでの表示

試しに、上記のサイトを開いて、ブラウザの横幅を縮めてみてください。 途中で表示が切り替わって、スマホの小さな画面でもキレイに表示されますよ。

このように、【手順１】から【手順７】までを実施することで、スマホの画面サイズに合わせてキレイに表示される、レスポンシブデザインのサイトを作ることができます。

レスポンシブデザインの確認方法

ここでは、レスポンシブデザインの確認方法をお伝えします。

1. ブラウザを縮めて確認する

レスポンシブデザインは、訪問者の画面サイズに合わせて、ホームページの形が自動的に変わる仕組みのことです。

そのため、ホームページを見ているブラウザの横幅を縮めてみて、ホームページの形が変わることを確認しましょう。

2. スマホやタブレットで確認する

お使いのスマホやタブレットでも、実際に表示の確認をしましょう。

ホームページを見る人は、スマホやタブレットを使って実際にホームページを見るため、スマホやタブレットでもホームページがキレイに表示されているかを確認します。

3. サーチコンソールの「ページ エクスペリエンス」を見る

ホームページを Googleサーチコンソールに登録していれば、「ページ エクスペリエンス」の箇所を見て、モバイルの箇所が「良好」になっていることを確認してみてください。



モバイルの箇所が「良好」になっていれば、Googleは「このサイトはモバイル対応している」と判断しているということです。

ただ、サイトをスマホ対応しても、ページ エクスペリエンスにはなかなか反映されません。 場合によっては、2ヵ月から3ヵ月も改善されないこともあるので、これについては気長に待つようにしましょう。

レスポンシブデザインを自分で簡単に作れるHTML教材

レスポンシブデザインのサイトを作るなら、自分で更新できる最短ホームページテンプレートが便利です。

このテンプレートは、ホームページを自分で自由に作れる能力を得られるテンプレート（教材）で、パソコン用サイトとスマホ用サイト、そしてレスポンシブデザインのサイトを作ることができるようになります。

使い方はすべて動画で解説されていて、たくさんのパーツをコピーして貼り付けるだけで、ホームページが完成する仕組みになっているため、初心者でも簡単に使うことができます。

レスポンシブデザインのサイトも、このテンプレートを使えば簡単に作ることができるため、持っておいて損はしない教材になっていますよ。

・【レスポンシブ・スマホ用テンプレート付き】自分で更新できる最短ホームページテンプレート

【まとめ】レスポンシブデザインの作り方

レスポンシブデザインの作り方【HTMLとCSSの書き方を解説】の内容は、いかがでしたでしょうか？

レスポンシブデザインにするポイントは、viewport の設定を入れることと、メディアクエリの設定を入れることです。

この2つの設定を入れれば、ホームページの形が画面サイズに合わせて変わるようになるからです。

あとは、細かい箇所（画像や枠の自動調整など）を対応していけば、レスポンスデザインのサイトは完成しますよ。


ただ、レスポンシブデザインのサイトを、ゼロからの状態で作ることは、とても大変で時間がかかります。

そうであれば、もともとレスポンスデザインになっているテンプレートを使ったほうが良いと思うのですよね。


たとえば、自分で更新できる最短ホームぺージテンプレートには、レスポンスデザインに対応しているテンプレートもありますし、自分で自由にレスポンシブデザインにできる能力も身に付きます。

能力と技術を得られたら、いろいろなトラブルにも対応できるようになりますし、何よりも自由度がとても高いので、このようなテンプレートを使うことをおすすめしますね。

パソコンサイトとスマホサイト、そしてレスポンシブデザインのサイトを、自分で自由に作ることができるようになります。

・【レスポンシブ・スマホ用テンプレート付き】自分で更新できる最短ホームページテンプレート

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒　当サイトで使用しているサンプルサイトの無料ダウンロードはこちら

高品質で、ホームページでとても使いやすい画像100枚を「特典」としてお渡ししています。 人物の画像素材は少ないため、とても貴重な画像素材です。

⇒　オフィスで働いている女性が笑顔で人差し指を立てている画像について

初心者がホームページを作れるようになり、ホームぺージ作成をビジネスに活用できる「オールインワン」の講座です。

⇒　初心者から始める！ホームページ作成ビジネス講座