ホーム
WEB制作
レスポンシブデザイン

【HTML5編】 サルでもわかるレスポンシブの基本の基本

前のページ（【CSS3編】 サルでもわかるレスポンシブの基本の基本）では、CSS3の機能を使ったレスポンシブの方法を書きました。
（CSS3を使った画像解像度によるスタイルの切り替え法）

こちらのページでは、HTML5の機能を使った画面サイズによるスタイルの切り替え法について書きたいと思います。

HTML5の新機能！画面サイズによって読み込むCSSを振り分ける

古いHTMLの規格であるHTML4の時にはなかったのですが、新しいHTMLの規格であるHTML5では、画面サイズによって読み込むCSSを振り分けることができます。

昔は、インターネットする時は主にパソコンで行っていましたので、色々なサイズの端末に対応する必要もなかったのですが、近年はパソコン・スマホ・タブレットと、様々なサイズの端末に対応する必要が出てきましたので、規格を新しくする段階でレスポンシブに対応する機能が追加されました。

CSS3とHTML5の違い

CSS3とHTML5は、両方とも画面サイズによって適用するスタイルを切り替えます。
でも、CSS3は全部読み込んでしまって振り分けますし、HTML5は最初に振り分けてしまってから読み込みます。

CSS3もHTML5もCSSを読み込んだ直後は同じなのですが、パソコンのブラウザサイズを変えたり、スマホを縦向きから横向きにした時に現れます。

また、読み込むファイルサイズにも違いが出てきます。
HTML5は必要なスタイルだけ読み込むのに対して、CSS3はスマホやタブレット用のスタイル（CSSのデータ）まで全部読み込んでしまうので、読み込むファイルサイズが大きくなってしまいます。

HTML5

  • 更新ボタンを押さないとCSSが切り替わらない
    （スマホの縦・横の変更時）
  • 更新ボタンを押さないとCSSが切り替わらない
    （ブラウザのサイズ変更時）
  • ダウンロードするファイルサイズが小さい
    （必要なCSSファイルだけ読み込ませるため）

CSS3

  • スマホを縦・横にしても対応
    （更新ボタンを押さなくても良い）
  • ブラウザサイズを変えても対応
    （更新ボタンを押さなくても良い）
  • ダウンロードするファイルサイズが大きい
    （全種のCSSを読み込ませるため）

HTML5での画面サイズによるCSSファイルの振り分け方

書き方はこんな感じです。
↓のコードを、<head></head>の部分に書きます。

<!-- スマホ -->
<link rel="stylesheet" media="screen and (max-device-width:●●●px)" href="●●●.css">

max-device-width:●●●px の ●●●の部分にサイズを書きます。
例えば、380pxまでの画面サイズの端末に適用させたければ、380 と書きます。

<!-- スマホ -->
<link rel="stylesheet" media="screen and (max-device-width:380px)" href="●●●.css">

次に、CSSファイルのファイル名（相対パスかCSSファイルのURL）を書きます。
これはスマホ用のCSSファイルなので、仮に名前を smart.css にします。

<!-- スマホ -->
<link rel="stylesheet" media="screen and (max-device-width:380px)" href="smart.css">

次に、スマホ用CSSを設定したのと同じように、タブレット端末のも設定していきます。
スマホのサイズとは被せたくないので、最小の画像サイズの指定の min-device-width:▲▲▲px は 381px にします。

<!-- タブレット -->
<link rel="stylesheet" media="screen and (min-device-width:381px) and (max-device-width:▲▲▲px)" href="▲▲▲.css">

そして、最大で899pxまでの端末に対応させるつもりなので、max-device-width:899px にして、ファイル名の部分は tablet.css にします。

<!-- タブレット -->
<link rel="stylesheet" media="screen and (min-device-width:381px) and (max-device-width:899px)" href="tablet.css">

最後に、パソコン端末を設定します。
やり方は先程と一緒。

パソコンは、だいたいの上限はあるのですが、上限を設定してしまうと読み込まれなくなってしまう可能性もありますので、最小の画面サイズだけ設定します。
（設定した画面サイズ以上の画面サイズの場合は、全部このスタイルが適用されます）

タブレット端末とは被せたくないので、899pxより上の 900px を設定します。

<!-- PC -->
<link rel="stylesheet" media="screen and (min-device-width:900px)" href="■■■.css">

そして、ファイル名を pc.css にします。

<!-- PC -->
<link rel="stylesheet" media="screen and (min-device-width:900px)" href="pc.css">

CSSの書き方は普通でもOK、だけど注意することもある

CSSの書き方は普通でもOKです。
でも、スマートフォンで見る場合、縦にしたり横にしたりしても大丈夫なような作りにしておいた方がよいと思います。

もしスマートフォンで縦で見ていた場合、更新ボタンを押してページファイルを更新しなおさないと、横向き用のCSSに切り替わらないので、予め、そのあたりも考慮しつつCSSを書いていかないと、横向きになった途端、画面に空白ができてしまいます。

スマートフォンの縦・横の切り替えで表示崩れを防ぐために

幅はできるだけ % で指定する

画面の横幅いっぱいに表示したい時は、width:100%; にする。
min-width:●●●px を指定してしまうとそれ以上には広がらなくなってしまうので、スマホ・タブレットの body や外枠用のDIVタグのスタイルには min-width は指定 しない。

左右に隙間を開けたい時は、1%〜2%ほど margin か padding をとる。

padding:0% 2% 0% 2%;/* 上・左・下・右の指定になる */
margin:0% 2% 0% 2%;/* 上・左・下・右の指定になる */

padding　の場合は　要素内　に空白ができる。
margin　の場合は　要素外　に空白ができる。

見出しの高さは min-height か auto で指定する

見出しは、横幅の長さによって1段で済むか2段になるか3段になるか変わる。
そこで、min-height で見出しの高さだけ指定するか、auto で見出しの高さを自動で設定するかして、見出しが何段になっても良いようにする。

【スマホで表示】

【PCで表示】

ヘッダーやロゴは、縦でも横でも上手く表示できるようにする

スマートフォンの縦で表示できる範囲内に収まる 『 ロゴだけのヘッダー 』 にすると非常に楽。
ヘッダーの背景画像とロゴを両方用意する場合は、表示崩れが起きにくいようにする。

ロゴを右詰めや左詰めにしてしまうと、ロゴと背景画像によっては、縦・横の切り替えでヘッダーの背景画像がズレたり切れたりする可能性がある。

画像は横幅を100%に、縦幅を autoに指定する

スマホ縦・スマホ横・タブレットなど、横幅に応じて読み込むCSSファイルを変更できるとは言え、端末のメーカーや機種によって横幅にはかなりの差がある。

なので、画像は横幅を100% に、縦幅を auto で全部の機種・メーカーで画像や写真が切れたりしないように設定する。

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

【何も指定していなくて画像が切れてしまった例】

【img { width:100%; } で画像が画面内に収まった例】

次ページ

【media screen】 IE9以下のレスポンシブ化とCSSの設定 【CSS】

前ページ

【CSS3編】 サルでもわかるレスポンシブの基本の基本

広告

このカテゴリの記事
その他のカテゴリを見る