【HTML/CSS】メディアクエリによるレスポンシブスマホ対応の方法
メディアクエリとは

CSSの記述によって、画面幅に合わせたスタイルシートを適用させる事ができる手法です。

例えば、「横幅が640pxまでの画面であればこのスタイルシートを使う」といったことが容易にできます。
HTMLの大幅な改修が必要なく、ほぼCSSの改修のみで済みます。

1.「viewport」の設定

viewportは様々なデバイスにおける表示領域のことです。

何も指定しない場合、スマホで表示したときに、PCと同じサイズで表示するので、 文字が小さくなり見にくくなります。
HTMLの[head]タグ内にmetaタグを記述して、 表示領域の幅を合わせることにより、小さくなるのを防ぎます。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">

  <!-- ↓↓↓↓ これを追加 ↓↓↓↓-->
  <!-- inital scale -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- ↑↑↑↑ これを追加 ↑↑↑↑-->

  </head>

※「HTMLの横幅はデバイス(スマートフォン等端末)の横幅に従います。
表示倍率の初期値は1.0です」といった内容になります。

2.CSSのスタイルシートをスマホ用、PC用と分ける ※分けなくても良いです

既存のPC用のCSSを複製してスマートフォン用のCSSのベースを作成します。
(この時点ではCSSの中身は同一です)

そして、HTMLのCSSを指定する箇所の記述を変更します。

 <!-- StyleSheet -->
 <!-- (min-width: 640px)画面幅640pxを超える場合のPC用CSS。-->
 <link rel="stylesheet" media="(min-width: 640px)" href="common/styles/style_pc.css">

 <!-- (max-width: 640px)画面幅640pxまでのスマートフォン用CSS。-->
 <link rel="stylesheet" media="(max-width: 640px)" href="common/styles/style_mobile.css">
3.「メディアクエリ」をCSSに記述する

スマホ用CSSとPC用CSSそれぞれのメディアクエリの記述を追加します。

それぞれのCSS内全体を下記メディアクエリの表示で囲います。

1行目にメディアクエリの記述、最終行にその閉じる記述を追加します。
「@media」と書いてメディクエリの宣言をします。
()に画面サイズの指定をします。

 /* PC用CSS */
 @media (min-width: 640px) {

 /* 通常のCSS */

 }
 →「最小の幅が640pxの時」640px以上の画面サイズのときに適用

 /* スマートフォン用CSS */
 @media (max-width: 640px) {

   /* 画像を自動的に画面サイズにあわせて縮小表示*/
   img{
    max-width: 100%;
    height: auto;
    width /***/:auto;

 }
 →「最小の幅が640pxの時」640px以上の画面サイズのときに適用
   文字のサイズや、余白を調整したCSSを記述します。
   カラムも縦並びになるよう記述できます。(それはまた今度)

また、このように、デバイスの画面サイズによってスタイルが切り替わる ポイントとなるサイズを、
ブレークポイント」といいます。

今日はここまで。