閉じる

【HTML/CSS】 スマホ対応(レスポンシブ デザイン)作成方法

レスポンシブ の基礎知識・作成方法を初心者の方向けに紹介。
各方法サンプルコード付きで詳しく解説。サンプルコード付きなので実際に手を動かして学ぶ事ができ、ご自身のweb制作に活かす事ができます。

カテゴリ: HTML/CSS

こんにちは!
ようやくWEBページの作成ができるようになてきたけど「スマホ対応ってどうやってするの・・?」 「レスポンシブ ってなに・・?」「レスポンシブ の作成方法を教えて・・!」
そのように悩んでいる、初心者WEB製作者の方も多いのではないでしょうか?
今やスマホユーザーが増え、多くのユーザーがスマホからWEBページを閲覧しています!つまりスマホ対応ができていないと、多くのユーザーにとって、「見にくいWEBサイト」という事になってしまいます。
スマホ対応を覚えて初心者から1歩抜け出していきましょう。

今回は、「レスポンシブ とは」「レスポンシブ作成方法」を中心に解説していきます。

スマホ対応とは

そもそもなぜスマホ対応(各端末に合わせた対応)をしなければならないのか?
から解説していきます。
結論からいうと「画面サイズが違うからです」!

WEBページを閲覧するデバイスは、パソコン以外にもタブレット、スマホなどがあり、全て画面の大きさが違います。
パソコン画面の大きさ用に作ったWEBページを、スマホで閲覧したら画面が小さいので当然見づらくなってしまいます。
スマホ対応されているものとされていないものでは、見た目に大きく差が出てしまいます。

どのサイズのデバイスでも、ユーザーにとって見やすいWEBページを届けるためにレイアウトを対応させます。
また、スマホ対応していないとユーザーだけでなく、Googleなどの検索エンジンの評価も落とし検索順位が落ちる傾向があると言われています。

パソコン、タブレット、スマホなどの各デバイス画面に見やすくWEBページを表示させる対応を「レスポンシブ 」という方法でおこないます。

レスポンシブ

レスポンシブ のメリット・デメリット

○メリット

①1つのHTMLファイルで、パソコン、スマホに対応できる
 (同じURLで対応できる)

②Googleからの評価が高くなりSEO効果の期待ができる。
(パソコン、スマホあらゆるデバイスから同じURLでアクセスできるので、
 サイト評価の統一性などの観点から)
③サイトの修正がしやすい
 (HTMLファイルは一つなので、CSSのみの修正で済む)

○デメリット

①CSSの記述(レスポンシブ を覚える必要がある)
②デザインの自由度が少しなくなる(スマホを意識したデザインになるため)

レスポンシブ の設定方法

レスポンシブ の設定方法の解説に移る前に、レスポンシブ にまつわる用語・タグなどについて解説します。

viewportとは

レスポンシブ にする!という設定の事です。

上記の決まり文句をHTMLファイル内のheadタグ内に記述し、「このHTMLファイルをレスポンシブ にするよ!」と設定します。
あまり深く考え過ぎずに、上記の宣言をすると「レスポンシブ 対応になる」しないと「ならない」と考えて差し支えありません。

ブレイクポイントとは

画面幅に合わせてCSSを切り替える時の、切り替えのポイントです。

ブレイクポイントでデザインが変わるポイントを設定する事で、各デバイスに合わせたWEBサイトを表示します。

ブレイクポイントを何pxにするのか明確な決まりはありません。多くの画面幅のデバイスがあるので明確なポイントはありませんが、「スマホ320px〜500px」「タブレット768px〜1023px」「パソコン1024px〜」の設定が多く見られます。

メディアクエリとは

ブレークポイントを指定する為のCSSコードです。
ブレークポイントに合わせてスタイルを設定する事ができます。

ブレイクポイントサンプルコード

※解説
@media:メディアを記述する際「@media」の記述をし、メディアクリエを記述する宣言をします。

screen:画面表示のみにという指定(その他オプションもあるが基本はscreen、詳しく知りたい方は、下記をこうにしてみて下さい。
https://keywordfinder.jp/blog/seo/media-queries/

and:指定と指定のつなぎ文字
max-width:500px:メディアクエリを指定する幅(この例では500pxまで)

max-width・min-width

メディアクエリを指定する幅、max-width、min-widthの使い方をサンプルコードを用いて詳しくみていきましょう。

○max-width

max-widthはここまでの幅の指定を表し、max:width: 500px;であれば500pxまでを指定します。
今回は500pxまで文字色を緑色に指定します。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
画面幅500pxまでは、CSSで指定され文字が緑色に、501pxからは文字色が指定されていないのでデフォルトの黒に文字が変わります。
サンプルコードを当てはめ、画像幅を変えてみて下さい。

○min-width

min-widthはここからの幅の指定を表し、min:width: 500px;であれば500pxからの指定します。 今回は、500pxから文字色を緑色に指定します。 サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
画面幅499pxまでは、文字色がデフォルトの黒色に、500pxからは文字色がCSSで指定された緑色に変わっています。

まとめると
「max-width: 500px」はここまで(500pxまで)
「min-width: 500px」はここから(500pxから)
少しややこしいですが、使用していくうちに慣れてきます。

ここまでがレスポンシブ デザインで必要な基本的な知識ですが、
さらに理解を深めるため、全体のサンプルコードを記述し解説していきます。

サンプルコードで実践(max-width)

さらに理解を深めるため、サンプルコード全体でmax-width:500px 800px 1000pxの変化、その他コードの解説をしていきます。

max-width:500px;の場合の表示結果

max-width:800px;の場合の表示結果

max-width:1000px;の場合の表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
画面幅500pxまでテキスト文字色が「緑」
画面幅501px〜800pxまでテキスト文字色が「青」
画面幅801px〜1000pxまでテキスト文字色が「赤」で表示されます。

HTML、CSS分けて解説していきます。

【HTML】 まず6行目

viewport:この決まり文句をHTML内に記述することで、レスポンシブ 対応に設定します。

ここが最大のポイントです、基本のレスポンシブ においてHTMLファイルに記述する箇所はこの1箇所のみです。

【CSS】

1行目「@media」を宣言しメディアクエリの記述を開始します。
「screen」画面表示のみにという指定
「and」指定と指定のつなぎ文字
「max-width:500px 800px 1000px」:メディアクエリを指定する幅
つまり画面幅0px〜500pxまでテキスト色→緑
   画面幅501px〜800pxまでテキスト色→青
   画面幅801px〜1000pxまでテキスト色→赤

サンプルコードで実践(min-width)

さらに理解を深めるため、サンプルコード全体でmin-width:500pxの変化、その他コードの解説をしていきます。

min-width:500pxの場合の表示結果

min-width:500pxの場合の表示結果

HTMLサンプルコード

CSSサンプルコード

HTML、CSS分けて解説していきます。 【HTML】 まず6行目ここは同じですが、

viewport:この決まり文句をHTML内に記述することで、レスポンシブ 対応に設定します。 【CSS】

min-widthの場合は 画面幅500pxからテキスト色→緑になります。
  画面幅499pxまではテキスト色に変更はかかりません。

このようにメディアクエリの書き方は、条件を追記していくだけです。

レスポンシブ での注意点

「position」「float」でレスポンシブ の崩れ

レスポンシブ がくすれてしまう原因として、「position」「float」の指定がされているという事があります。
一括で解除しておくと良いでしょう。

画像の幅による崩れ

pxなどでHTMLファイルに指定されていると、パソコンの時と同じ幅になってしまいます。
最大幅を100%に変えて崩れを防ぎましょう。

画像をCSSで変更

画像幅の崩れを整えても、パソコンとスマホで見え方に差がある事があります。
CSSで写真の中身は変える事ができないので、画像の切り替えを行います。
つまり、パソコン画面で写真Aを表示して、スマホ画面になったら、パソコン用の写真Aを非表示にして、スマホ用の写真Bを表示するという事です。

HTMLサンプルコード

CSSサンプルコード

※解説
CSSプロパティ「display: none;」でパソコン用画像、スマホ画像を切り替えています。
表示してみてパソコン、スマホで画像の違いがある場合は、画像を2つ用意しての切り替えをオススメします。

スマホ用のCSSファイルの作成方法

CSSファイルをPC版、スマホ版の2つ用意することをオススメします。
理由は、一つのCSSファイルに、「PC版のCSSの記述」「スマホ版のCSSの記述」が混在しているとわかりづらくなるいためです。下記のような状態です。

@mediaがあったり、なかったりの記述が同じファイル内にあると、わかりづらくミスも増える可能性があります。
その為、PC版とスマホ版のファイルを分けた方がわかりやすくなります。
ファイルの分け方を2点解説していきます。

方法1: HTMLファイルの<header>〜</header>内でメディアクリエを使う方法

HTMLファイルの<header>〜</header>内でメディアクリエを使用し、ブレイクポイントを決めてしまします。

※解説
6・7行目をみてください。

メディアクエリを使って、「max-width:500px」(画面サイズ500px以下の時は)「sp.css」を読み込ませる。(スマホ用のcssファイル)
「min-width:500px」(画面サイズ500px以上の時は)「mobile.css」を読み込ませる。(パソコン用のcssファイル)
この方法だと、スマホ用のファイルに「@media screen and (max-width: 500px)」の記述をしなくてもよくなります。

まとめると「パソコン、スマホ版の各 CSSファイルを用意する」→「HTMLファイルのヘッダー内に、メディアクリエを使用し、ブレイクポイントを決めて読み込ませる」→「各ファイルにCSSを記述していく」といった流れとなります。

ただし、ページによって細かくブレイクポイントを分けたい方は次のファイルの分け方をオススメします。

方法2: ファイルを分け、ファイル内でメディアクエリを使う方法

HTMLファイルの<header>〜</header>内にスマホ用のファイルを読み込ませます。

※解説
7行目<link rel=”stylesheet” href=”mobile.css”>の記述をし、スマホ用のCSSファイルを読み込みます。
方法1との違いは、この時点ではメディアクリエを使用しておらず、ブレイクポイントも決めてません。
スマホ用のファイルを読み込み、スマホ用のファイル内でメディアクリエを使用し、ブレイクポイントを決めていきます。スマホ用CSSファイルは下記のような状態になります。

@media screen and (max-width: 500px)」の記述はファイル内に入りますが、項目事にブレイクポイントを変更したい場合に、別ファイルを用意しなくても、下記のように簡単に書き換えるこができます。


またクラスをわけ、ブレイクポイントをわけて記述もできます。

検証ツールで確認方法

Google Chromeの検証ツールを使用した、レスポンシブ デザインの確認方法を解説します。
この検証ツールを使用することによって、パソコン1台で「iPhone」「iPad」「Galaxy」など各端末でWEBページをみた時の見え方が確認できます。
各端末でどのように見えているのかを確認する事でより効率的な開発をする事ができます。

googleCromeについて詳しく知りたい方は下記を参照してください。
https://tech-camp.in/note/technology/85975/

Google Chromeを開き、右クリック「検証」をクリック

表示された検証ツールの上側に「スマホアイコン」があるのでクリック

デバイス選択欄をクリックし好きなデバイスを選択
各デバイスで閲覧する事ができます

レスポンシブ が上手くいかない時のチェックポイント

「色々設定してみたけど、レスポンシブ が上手くいかない・・」
そんな時は焦らず、レスポンシブ が関わっている、1つ1つを潰していきましょう。

ケース1:viewport

viewportの設定は上手くされていますか?

・HTMLファイル、<heade>〜</heade>内に記述されていない
・スペルミスがある

ここが1番多い原因です、今一度見直してみて下さい。

ケース2:@media

@mediaの設定は上手くされていますか?

・スペルミスがある
・max-width、min-widthの使い方を間違えている

特に慣れるまでは、max-width、min-widthはややこしく感じるかもしれません、今一度見直してみて下さい。

ケース3:CSSファイル

CSSファイルは読み込まれていますか?

特にCSSファイルをパソコン、スマホで分た際に、記述ミスなどによりCSSファイルが読み込まれてない場合があります。今一度確認してみて下さい。

ケース4:HTMLでの高さ・幅指定

HTMLで画像など高さ指定していませんか?

メディアクエリはCSSでコントロールされています、HTMLで大きさなど指定されている場合は、消して調整しましょう。

ケース5:important

importantを使用していませんか?

importantはどんな状況でも最優先されてしまい、当然メディアクリエより最優先されます、importantの使用有無を今一つ確認してみて下さい。

メディアクエリ以外のスマホ対応

ファイルを2つに分け、URLを分ける方法があります。

パソコン用のHTMLファイル、CSSファイル
スマホ用のHTMLファイル、CSSファイル

の2点を用意しURLを分ける事で可能です。

しかしデメリットとして
・URLを分ける必要がある
・ユーザーがパソコンで見ているのか、スマホで見ているのかを判別しなければない
・更新時のファイル編集が多い

などデメリットがレスポンシブ よりも多いです、したがって本記事はスマホ対応にするには「レスポンシブ 」をオススメします。

まとめ

今回は、「レスポンシブ とは」「レスポンシブ作成方法」を中心に解説してきました。
簡単にポイントをまとめます。

1.どの端末のどの画面サイズからでも見やくするための方法として「レスポンシブ」を紹介。

2.レスポンシブ にする方法は、
 ・HTMLファイルの<heade>〜</heade>内に
  <meta name=”viewport” content=”width=device-width,initial-scale=1″>
  の一文を記述。
 ・メディアクエリ
  @media screen and (max-width: 500px)
  を記述しブレイクポイントを設定し、変更点を追記していく。

3.CSSファイルを2つ作成する(パソコン、スマホ用)
 CSSファイルを2つ用意する事をオススメしました、1つのCSSファイルにパソコン、
 スマホ用の記述が混在するとわかりづらくなるためです。

4.ファイルを分ける方法2点紹介しました。
 方法1: HTMLファイルの<header>〜</header>内でメディアクリエを使う方法
 方法2: ファイルを分け、ファイル内でメディアクエリを使う方法

いかがだったでしょうか?
今やスマホユーザーが増え、各端末に合わせた画面サイズをユーザーに提供するのは当たり前になっています。
今後のWEB制作において「レスポンシブ」は欠かせない技術となってきていますので本記事を参考に学習をしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。