レスポンシブ対応に必要な基本設定まとめ（最初にやること）

レスポンシブ対応を始めようと思ったとき、

と迷う方はとても多いです。

そこでこの記事では、
初心者の方がまず設定しておくべきレスポンシブ対応の基本を、わかりやすくまとめました。

レスポンシブ対応をしてみたいと思ったら、必ずお読みくださいね！

レスポンシブ対応で最初にやるべき基本設定5つ

まずは、レスポンシブ対応で最初にやるべき基本設定をお伝えします。
この5つだけ押さえれば大丈夫です。

基本① viewportを設定する（最重要）

これを入れないと、スマホ表示が正しくなりません。

HTMLのhead内に必ず追加しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

基本② 画像を自動で縮小させる

スマホで画像がはみ出す問題を防げます。

img {
  max-width: 100%;
  height: auto;
}

基本③ 横幅は割合指定にする

固定サイズではなく、できるだけ割合を使いましょう。

width: 100%;

これだけでレイアウト崩れが激減します。

基本④ メディアクエリを用意する

スマホ専用のCSSを書くための基本形です。

@media screen and (max-width: 768px) {
  /* スマホ用スタイルを書く */
}

基本⑤ テーブルや横スクロール対策をする

表がはみ出す場合は、横スクロール対応が安心です。

.table-wrap {
  overflow-x: auto;
}

HTMLでは次のように囲みます。

<div class="table-wrap">
  <!-- tableをここに入れる -->
</div>

まずこの基本テンプレを入れておけば安心

初心者の方は、次をまとめて入れておくのがおすすめです。

img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

これだけでもかなり快適になりますよ。

初心者が最初にやりがちな失敗

初心者が最初にやりがちな失敗をご紹介します。
次のような設定はトラブルの原因になります。

まずは基本設定から整えましょう。

設定後のチェックポイント

設定後のチェックポイントです。
調整したあとは必ず確認してください。

スマホでの表示確認は、実際にスマホで見てみるのが一番ですよ。

まとめ

「レスポンシブ対応に必要な基本設定まとめ」の内容はいかがでしたでしょうか？

レスポンシブ対応は、そこまで難しくはありません。

まずは、

この基本だけで、ほとんどのトラブルは防げます。

スマホがとても普及した現在、スマホでもホームページをきれいに見れるようにすることは必須です。

ぜひこの記事を参考にして、レスポンシブ対応を行ってみてくださいね！