ウェブデザイン演習 第14回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第14回

今回は「ページのスマートフォン対応」を行ってみようと思います。

皆さんがウェブデザイン演習の講義でコーディングしたページを、スマートフォンやタブレットでも最適化された状態で表示されるようにしてみましょう。

http://webcre8tor.com/data/lesson/base/

このページを今回は以下のように変更します。

http://webcre8tor.com/data/lesson/rwd1/

PCでの表示は何も変わっていませんよね。

今回はレスポンシブWebデザインという手法を使って、
スマートフォンの表示最適化対応を行っていきます。

この記事の目次

ウェブデザイン演習 第14回

レスポンシブWebデザインとは?

スマートフォンへの表示最適化対応を行う手法で主流になっているのが、
今回解説する「レスポンシブWebデザイン」というものです。

WebサイトはPCだけで閲覧するものではない。

WebサイトはPCだけで閲覧されるわけではありません。iPhoneなどのスマートフォンや、iPadなどのタブレット、iPodなどの音楽プレイヤーなど、最近ではカーナビなどのデバイスでもWebサイトを閲覧することが可能です。

閲覧機能があるなら閲覧ができるようにサイトを制作しなければいけませんが、
それぞれサイズや仕様が違うため、すべてに対応しようとすると、一昔前までは、デバイスごとにデザインの違うHTMLやCSSを制作しなければいけませんでした。

例えば、PC・スマートフォン・タブレットの3種類のデバイスに対応しようとすると、
index.htmlを3つ、cssを3つ、その他のJavaScriptファイルや画像も3つずつ制作しなければいけません。

言い換えれば、Webサイトを3つ制作するのと同じです。

これでは金銭的・時間的コストがかかりすぎますよね。

多くのデバイスに共通で存在するものは「モニター」

デバイスは様々ありますが、そのすべてに共通するのは「モニターを使う」ということです。それなら画面サイズごとに最適なサイズの表示に切り替えるようにすればいい、というのがレスポンシブWebデザインの考え方です。

画面サイズで切り替えられるように制作を行うことができれば、
デバイスごとのファイルを作らなくていいので、コストを抑えることができます。

切り替えポイント「ブレイクポイント」

レスポンシブWebデザインは画面サイズによって要素の表示・非表示を切り替えたりする手法です。切り替えるためには「◯◯px以上のサイズはPC表示、◯◯px未満のサイズはスマートフォン表示」という切り替えポイントの指定が必要になります。

この切り替えポイントが「ブレイクポイント」と呼ばれるものです。

大まかなモニターサイズを知る

ポイントの指定はpx(ピクセル)で行いますが、
指定を行う上でそれぞれのデバイスの画面サイズを知らなければ、
ブレイクポイントが決められませんよね。

ここでは、「PC・タブレット・スマートフォン」の3種類のデバイスの大まかな画面サイズを知り、そこからブレイクポイントを決めていきましょう。3種類なので3つのブレイクポイントの設定が必要ですね。

デバイス  代表的なサイズ(横幅×高さ)
PC  1,280px × 800px
※Macbook Pro 13インチなど
タブレット 768px × 1,024px(縦向き)
※iPadなど
スマートフォン 320px × 568px 
※iPhone5Sなど

参考ページ:iPhone/iPad解像度(画面サイズ)早見表 – Qiita

この表を見ると、
PCが1,280px〜タブレットが768px〜1,024px
スマートフォンが320px〜568px、ということになります。

PCやスマートフォンはともかく、タブレットは横向きにすることが多いですよね。
横向きにすると横幅も768pxから1,024pxに変わります。

PCの場合のブレイクポイント

PCは他の端末よりモニターサイズが大きいですよね。だから、タブレットの横向きサイズ(1,024px)より大きい場合のブレイクポイントを設定します。

PCとタブレットのブレイクポイント

タブレットは、PCより小さくスマートフォンより大きいモニターです。

経験上、タブレットの横向きはPCと同じ表示にすればいいので、まずはブレイクポイントの最小値をタブレットの縦向きの時の横幅(768px)に設定し、ブレイクポイントの最大値をPCの画面サイズ未満(1,023px)に設定します。

タブレットとスマートフォンのブレイクポイント

最後にスマートフォンですが、3つのデバイスの中で最も小さいモニターですね。
この場合タブレットの縦向きの横幅未満(767px)に設定します。

ブレイクポイントまとめ

以上のことから、各ブレイクポイントは以下の数値に設定しましょう。

デバイス ブレイクポイント
PC  1,024px〜
タブレット 768px 〜 1,023px
スマートフォン 〜767px 

実際のプロジェクトの制作時でも、ほとんど上記の数値の通りのブレイクポイントでレスポンシブWebデザイン対応を行っています。

CSS3 Media Queries(メディアクエリ)

レスポンシブWebデザインによってスマートフォンなどへの対応をするには、
CSS3 Media Queriesという記述方法を用いて記述を行っていきます。

CSS3 Media Queriesの基本的な記述方法

たとえば<p></p>の文字色を、PC表示では黒、タブレット表示では赤、
スマートフォン表示では青にしたいとしましょう。
その場合のCSS3 Media Queriesの記述方法は以下のようになります。

CSS

/* -- PC表示の場合(1,024px〜) -- */
p {
  color: black;
}

/* -- タブレット表示の場合(768px 〜 1,023px) -- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  p {
    color: red;
  }
}

/* -- スマートフォン表示の場合(〜767px) -- */
@media screen and (max-width: 767px) {
  p {
    color: blue;
  }
}

先ほど設定したブレイクポイントここで使われ
画面サイズが◯◯px以上、◯◯px〜△△pxの範囲内、
◯◯px以下の場合の、それぞれの条件分岐
を行っています。

PC表示の場合のブレイクポイントは「1,024px〜」、
タブレット表示の場合のブレイクポイントは「768px 〜 1,023px」、
スマートフォン表示の場合のブレイクポイントは「767px〜」でしたよね?

基本的に「@media screen and (max-width: 767px) {〜}」などの条件分岐の中に、<p></p>や<div></div>などの各セレクタを囲うように記述します。

CSS

@media screen and (ブレイクポイント) and (ブレイクポイント) {

  セレクタ1 {
    プロパティ: 値;
  }

  セレクタ2 {
    プロパティ: 値;
  }

  セレクタ3 {
    プロパティ: 値;
  }

}

この記述により、ページを表示したりブラウザをリサイズしたりすると、
それぞれのブレイクポイントに応じた表示に切り替えられるわけです。

CSS3 Media Queriesで何をして、どう変わる?

ここまでで、画面サイズによってブレイクポイントを決めて、それをもとにCSS3 Media Queriesによって表示の切り替えを行うというのはわかりましたが、実際にどういったことをして、どのような表示に変わるのでしょうか?

対応をせず、そのままPCサイトを見た場合は以下の画像のような表示になります。

対して、対応を行った場合は以下の画像のような表示になります。

ぴったりと収まっていますよね。

レスポンシブWebデザインの表示最適化対応ですることは、PC表示で指定したCSSの指定を、タブレット表示やスマートフォン表示のCSSの指定によって上書きするという作業の連続になります。

レスポンシブWebデザインに対応したHTMLコーディング

では実際にレスポンシブWebデザインを用いたコーディングを行います。

ひとまずDreamweaverを起動して「index.html」「main.css」ファイルを開き、
今回のコーディングの準備を行ってください。

手順は以下。

  1. Adobe Dreamweaver を起動する。
  2. 「html」フォルダの中にある「index」というファイルと「css」フォルダ内にある「main」というファイルを、Dreamweaverのウィンドウ内にドラッグ&ドロップして開く。

もう一度言いますが、
今回と次回のコーディングは、ウェブデザイン演習の講義で、
皆さんが最初にコーディングしたデザインを使います。

・・・「html」フォルダに制作したファイルはありますよね??

<head></head>セクションへの記述

まず最初に「viewport」の設定を行います。
viewportとは、文字コードを決める際に記述した<meta charset=”utf-8″ />と同じように<head></head>セクション内に記述する<meta>タグで、ユーザーがページを開いた時に表示をどう制御するかの設定を行うものです。

詳しくは以下の参考ページを見てみてください。

参考ページ:もう逃げない。HTMLのviewportをちゃんと理解する – Qiita

以前記述していた「<meta charset=”utf-8″ />」の下を改行し、
ハイライトされている「<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1″ />」を記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<!-- 〜下部省略〜 -->

「content=”◯◯”」の指定のところに、「width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0」とありますね、それぞれは以下のような意味です。

記述 説明
width=◯◯ ページの横幅の指定
・初期値:980px
・指定範囲:200px〜10,000px
・その他:device-width(閲覧中のデバイスの横幅)
initial-scale=◯◯ ページを開いた時のズームの倍率
・初期値:1
maximum-scale=◯◯ ズームの最大倍率
・初期値:1.6
・範囲:0〜10
user-scalable=◯ ズームを許可するかどうか
・指定範囲:yes(=1) or no(=0)

上述の通り、ユーザーの操作に対しての制御がviewportの役割ですね。

参考ページ:viewportの指定はどうするのが適切なのかいろいろ検証してみた | ichimaruni-design

今回のHTMLへの指定は以上です。

レスポンシブWebデザインに対応したCSSコーディング

次にCSSへの指定を行います。
基本的に、今まで記述したCSSの方はできる限り記述を変更せずに、
main.cssへの追記でスマートフォン対応を行っていきます。

また今回、PC表示は上記の例の通り「1,024px〜」としますが、
スマートフォンとタブレットはモバイル端末という括りで、
「0px〜1,023px」のサイズで解説します。

ですので実質2種類のブレイクポイントを指定すると考えてください。

全体への記述

まずは、全体に一括で指定している要素への指定を行いましょう。
Dreamweaverのタブを「main.css」に切り替えてください。

ウェブデザイン演習 第08回で「<div class=”container”></div>タグに関する指定」を行いましたが、その「.container {〜}」の指定の下を改行し、ハイライトされている「@media screen and (min-width: 0px) and (max-width: 1023px) {〜} 」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

.container {
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}

@media screen and (min-width: 0px) and (max-width: 1023px) {

  #container,
  header,
  nav,
  article,
  footer {min-width: 100%;}

  .container {width: 100%;}
  
}

header .container {
  padding-top: 30px;
  padding-bottom: 20px;
  overflow: hidden;
}

/*-- 〜下部省略〜 --*/

<div id=”container”></div>、<header></header>、<nav></nav>、<article></article>、<footer></footer>に一括で指定していた「min-width: 1040px;」CSS Media Queriesを使用して、スマートフォン表示の時は「min-width: 100%;」に指定して上書きします。

また<div class=”container”></div>も同様に「min-width: 1040px;」を指定していましたが、これもCSS Media Queriesで「width: 100%;」に指定して上書きします。

ちなみにmin-widthは「要素の最小の横幅を指定」するプロパティ、
widthは「要素の横幅を指定」するプロパティでしたよね?

スマートフォンやタブレット表示でもこの指定は適用されてしまい、
それにより、コンテンツがモニターより大きいためにはみ出してしまうんです。

「100%」への指定は、横幅・最小の横幅を画面幅に指定してはみ出さないようにしているわけです。

<header></header>セクションの記述

次に<header></header>セクションに関するCSS Media Queriesを指定します。
header .tel {〜} と、nav ul {〜} の間を改行し、
ハイライトされているコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

header .tel {
  margin-bottom: 10px;
}

@media screen and (min-width: 0px) and (max-width: 1023px) {

  header .container {padding: 30px 20px;}
  
  header h1,
  header .contact {
    float: none;
    width: 100%;
  }

  header h1,
  header .tel,
  header .mail {text-align: center;}
  
  header h1 img {height: auto;}

}

nav ul {
  width: 1000px;
  overflow: hidden;
  margin: 0 auto;
}

/*-- 〜下部省略〜 --*/

それぞれの指定を解説します。

header .container {〜} の、padding: 30px 20px;

PC表示では「padding-top: 30px;」「padding-bottom: 20px;」と指定していました。
スマートフォン表示ではこれを「padding: 30px 20px;」とし、上下に30px、左右に「20px」の内側の余白を持たせています。

header h1, header .contact {〜}の、float: none;とwidth: 100%;

PC表示では、 h1 {〜} には「float: left;・width: 350px;」、
header .contact {〜} には「float: right;・width: 230px;」という指定を行っていました。

ですが、スマートフォンの小さな画面で左寄せや右寄せ、また横幅の指定を行ったとしても、思った通りのレイアウトにはならずにレイアウト崩れを引き起こすだけです。

そのため、一括指定で両要素に「float: none;」を指定しの回り込みを解除させ、
さらに「width: 100%;」を指定して横幅を画面幅に指定しています。

左寄せや右寄せの回り込みを多用するWebサイトのレイアウトではレスポンシブWebデザインの対応を行う際に、この「回り込みを解除(float: none;)・横幅を画面幅に指定(width: 100%;)」が最も頻度の高い指定になります。

<nav></nav>セクションの記述

次に<nav></nav>セクションに関するCSS Media Queriesを指定します。
nav li:nth-of-type(5) a:hover {〜} と、#slider {〜} の間を改行し、
ハイライトされているコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/
nav li:nth-of-type(5) a:hover {background-position: -800px -50px;}

@media screen and (min-width: 0px) and (max-width: 1023px) {

  nav {display: none;}

}

#slider {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0 0;
}
/*-- 〜下部省略〜 --*/

<nav></nav>に対する指定はこれだけです。

nav {〜} の、display: none;

PC表示では<nav></nav>はグローバルナビゲーションの役割を持っていました。
ただスマートフォン表示では横幅に余裕がありません。そのため「display」プロパティの値に「none」を指定することにより、ブロックごと非表示にしています。

「ナビゲーションなくなっちゃったけどどうするの?」と思うかもしれませんが、スマートフォン表示でのナビゲーションの実装にはJavaScriptの記述が必要になりますので、次回の講義で解説しようと思います。

<div id=”slider”></div>セクションの記述

スライドショーもレスポンシブWebデザイン対応しましょう。
#slider {〜} と article {〜} の下を改行し、ハイライトされているコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

#slider {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0 0;
}

@media screen and (min-width: 0px) and (max-width: 1023px) {

  #slider {
    width: 100%;
    padding: 0;
  }

  .bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 !important;
    -webkit-box-shadow: 0 !important;
    box-shadow: 0 !important;
    border: 0 !important;
    left: 0 !important;
  }
  
}

article {
  padding: 30px 0 130px;
}

/*-- 〜下部省略〜 --*/

スライドショーに関しては、横幅を100%に指定し、
ドロップシャドウを消したり枠線を消したり位置を調整しただけです。

<article></article>セクションと、その内側の<div id=”main”></div>、<aside></aside>の記述

メインコンテンツ部分のレスポンシブWebデザイン対応も必要です。
aside > ul > li > ul li a:hover {〜}
と、footer {〜} の間を改行し、
ハイライトされているコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

aside > ul > li > ul li a:hover {
  text-decoration: none;
}

@media screen and (min-width: 0px) and (max-width: 1023px) {

  article {padding: 0 30px 30px;}

  #main , aside {
    float: none;
    width: 100%;
  }

  #main {margin-bottom: 30px;}

}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}

/*-- 〜下部省略〜 --*/

今回は追加もあります。

aritcle {〜} の、「padding: 0 30px 30px;」

PC表示の、article {〜} のpaddingの指定「padding: 30px 0 130px;」でした。
<footer></footer>を下部に固定表示するために、<footer></footer>の高さ + αを、<article></article>内側の下部の余白に含めていました。

しかし、スマートフォン表示ではそもそもモニターの高さが小さいため固定表示をする必要がありません。

また固定表示するために高さを固定してしまうと、今度はその高さをはみ出してしまう恐れがありますので、スマートフォン表示ではpaddingの値を実際に必要なサイズにしておきましょう。

#main , aside {〜} の、「float: none;・width: 100%;」

PC表示では、メインコンテンツの記事部分である<div id=”main”></div>を左寄せに、余談や補足のブロックである<aside></aside>を右寄せにしていました。

スマートフォン表示では、<header></header>の時に行ったように、回り込みを解除して横幅を100%にしておきましょう。

#main {〜} の、「margin-bottom: 30px;」

このプロパティは追加になります。
PC表示ではそもそも「margin-bottom」プロパティは指定していませんでしたが、スマートフォン表示に対応するために<div id=”main”></div>と<aside>の回り込みを解除して縦並びにしたことにより、互いの間に余白が必要になりました。

<div id=”main”></div>へ「margin-bottom: 30px;」を指定することで、<div id=”main”></div>の下部と<aside></aside>の上部の間に30px分の距離を取ります。

<footer></footer>セクションの記述

今回はこの<footer></footer>への指定が最も多いです。
main.cssの一番下、footer .copyright {〜} の下を改行し、ハイライトされているコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

footer .copyright {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  font: normal 12px/30px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;
  text-align: center;
  color: #fff;
  background: #400f09;
}

@media screen and (min-width: 0px) and (max-width: 1023px) {

  footer {
    height: auto;
    position: relative;
    left: auto;
    bottom: auto;
  }

  footer .container {padding: 20px 30px 30px;}

  footer address,
  footer ul {float: none;}

  footer .copyright {
    position: relative;
    left: auto;
    bottom: auto;
    line-height: 1.8em;
  }
  
}

PC表示では<footer></footer>は下部固定を行うために幾つかのプロパティを組み合わせた指定を行っていました。具体的に言えば、「height: 100px;」で高さを100pxに指定し、「position: absolute;・left: 0px;・bottom: 0px;」でサイトの左から0px、下から0pxの位置に絶対配置しました。

スマートフォン表示ではこれをすべてリセットする必要があります。

footer {〜} の、「height: auto;」

まずPC表示では高さが100pxと決まっていたものを、
可変リサイズできるように「auto」を指定します。

footer {〜} の、「position: relative;・left: auto;・bottom: auto;」

今度は左下への絶対配置を解除します。
PC表示では絶対配置の<footer></footer>を「position: relative;」で相対配置に、
「left: auto;」「bottom: auto;」で位置が移動できるようにします。

footer address , footer ul {〜} の「float: none;」

PC表示では、<footer></footer>の<address></address>は左寄せに、<ul></ul>は右寄せにしていましたが、こちらも回り込みを解除します。

footer .copyright {〜} の、「position: relative;・left: auto;・bottom: auto;」

著作権表示の<p class=”copyright”></p>は、左下に絶対配置した<footer></footer>の中で、さらに左下に絶対配置していました。これも高さを100pxに指定していたことに起因しますので、高さが可変になったスマートフォン表示では、絶対配置する必要がありません。移動できるようにしておきましょう。

footer .copyright {〜} の、「line-height: 1.8em;」

「line-height」プロパティは行間、文字の高さでしたね。これも多少調整しておきましょう。

以上です。 記述が終わったら、index.htmlをブラウザ、できればGoogle Chromeで開いて、ブラウザのウィンドウをリサイズして、サイズによって表示が切り替わるかどうかを確認してみてください。

課題の提出

今回のレスポンシブWebデザイン対応も課題として提出を行います。
「html」フォルダのデータ
を提出しましょう。

提出用に「html」フォルダをまるごとzip形式で圧縮してください。

「html」フォルダをzip形式で圧縮

まず、「html」フォルダ圧縮の手順は以下。

  1. 「html」フォルダを右クリックして、「送る」→「圧縮(zip形式フォルダー)」を選択してzipファイルを作る。
  2. ファイル名を自分の学籍番号に変更する。

以上です。

zip圧縮したファイルをフォームから送信

なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。zip形式ではないファイルだと送信の際にエラーが出て送信ができませんので、必ず「html」フォルダをまるごと圧縮してzip形式で提出してください。

学籍番号(必須)
氏名(必須)
フリガナ (必須)
メールアドレス
質問など
課題ファイル

課題の提出ができたら今回の講義は終了です。
次回は最終回です。非表示にしてしまった<nav></nav>の代わりになるナビゲーションを作ります。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE