【入門】レシポンシブWebデザインの作り方

2020年12月2日 11:59

⑴HTMLファイルなどのヘッダー部分にmeta viewportタグを追加する
⑵CSSファイルで、PC用とスマホ用の表示方法の違いを記述する

ステップ⑴ Meta viewportタグを追加する

・追加する箇所
HTMLファイルで作成されたWebサイトの場合は、全てのHTMLファイルのヘッダー部分に追記
WordPressで作成されたWebサイトの場合は、共通のテンプレートファイル（header.phpなど）に追記する

・追加するソースコード例

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

・この記述の意味は以下の内容
①利用者がアクセス時に使用した機器について、画面サイズなどの情報を入手する
②この情報にある画面の横サイズから、PC向けかスマホ向けかを判断する

上記の判断後、具体的な指示（別ファイルのCSSなど）に従って、Webサイトの表示がPCとスマホに切り替わる

「メディアクエリ」を使う。適用されるCSSの指示内容を、画面サイズによって切り替えできるところがポイント。これにより、PCとスマホで異なる表示やレイアウトができるようになる。

・PC向けの場合
表示画面サイズが481px以上の場合を想定している。この数字を「ブレイクポイント」と呼び、ポイントのサイズになると、PCとスマホでの指示内容が切り替わる。481pxという数字は、任意の数字数字を指定出できる

紛らわしいですが、この場合の「min-width」とは、ここで指定した481pxサイズ以上の場合の指示内容になる

@media screen and (min-width: 481px) {}

・スマホ向けの場合
表示画面サイズが0px〜480pxの場合は以下の通り。同様に、この場合の「max-width」とは、ここで指定した480pxサイズ以下の場合の指示内容になる

@media screen and (min-width: 481px) {}

①画像サイズの変更

Webサイト上の画像を見るときPCでは判別できても、そのままの状態でスマホ表示すると、画像が小さすぎて判別できないことがある。この場合、画像の横幅一杯に表示させれば見やすくなる。そこでスマホの場合のみ、以下のように画像の横幅サイズを100%にする内容を記述する。

@media screen and (max-width: 480px) {
img {
    width: 100%
}

②非表示にする

PCまたスマホどちらかで不要なものを非表示にするためには、メディアクエリと「display: none」の指示を組み合わせる。以下の例はスマホの場合のみ非表示にできる

@media screen and (max-width: 480px) {
 img {
  display: none;
 }

③横並びを解除する

PCで表示されている画像が横並びとなっている状態をそのままスマホで見ると、画像サイズが縮小されて見にくくなる。この場合は「float: none」の指示で、横並びを指定するCSSをスマホの場合だけ解除する。さらに画像の横サイズを画面一杯に指定すれば、より見やすくなる

@media screen and (max-width: 480px;) {
  test {
    float: none;
  }
  img {
    width: 100%;
  }
}