第８回 レスポンシブデザイン
Webデザイン基礎B/2020｜造形短期大学部｜2020.11.09｜遠隔
情報共有シート｜特設サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - 今回はレスポンシブデザインについて学びます。
- 最後に GitHubへのアップロードを求ています。
以下、LIVE動画をご覧下さい。記事に沿って解説しています。
本日のメニュー
はじめに
今回は、CSSを用いたレスポンシブデザインについて学習します。
レスポンシブデザインとは、PC、タブレット、スマートフォンなどの様々なサイズの画面表示に対して、フレキシブルにレイアウトを最適化して表示する手法のことをいいます。
PCとスマホ、あるいは遡って、PCとケータイで、ブラウザの仕様が異なっていた時代は、PC用のWebサイトと、モバイル用のWebサイトは、別々にコーディングを行なっていました（ケータイ専用のHTMLも存在していました）。その当時は、PC用のHTMLから情報を削ってケータイ用を作るといった２度手間が必要で、どちらか一方の更新が遅れて混乱するといった問題もありましたが、現在では、HTML（すなわち掲載する情報内容）は１つ（One Source）で、そのビジュアルのみを CSS の切り替えによって各デバイスに最適化するということが可能になりました。
レスポンシブデザインの技術を使うと、ブラウザのウインドウ幅によって表示スタイルが変わります。今回以降、この仕様を標準的なものとして、演習していきますので、Webサイトの開発においては、ウインドウ幅を広げたり、縮めたりしながら、最適なスタイルが実現されているかを確認するようにしてください。
1. レスポンシブデザインの実現方法
一般に、HTML側の meta タグで viewport指定を行うとともに、CSS側のメディアクエリを使って実現します。
1.1. HTML側
- はじめに、HTMLファイルの＜head＞内に＜meta＞タグを使って、以下の記述を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
この記述は、スマートフォン、タブレット等での表示幅・拡大率等を適正にするための「定番の書き方」とご理解ください。コード中にある device-width とは「当該機器の画面のピクセル数」を意味するもので、上記のように記載しておけば、375 とか 480 といった具体的な数字を書く必要はありません。
- 閲覧するデバイスの画面幅に応じてレイアウトを変更できるようにするには、HTMLが柔軟な構造で記述されていることが必要です。CSSの変更のみでレイアウト変更が簡単にできるように HTMLの構造を最適化する必要があります。
1.2. CSS側
デバイスのタイプと特性に応じて、CSSファイルの中でスタイルを書き分ける、あるいは、CSSファイルを分けて読ませることが必要です。これには、メディアクエリーという機能を使います。主に以下の３つの方法があります。
- 1) CSS内の @media で書き分ける
- 2) HTML＞head の linkタグに media属性を記述して選別
- 3) 親CSS において子CSS を @import する際に選別
1.3. CSS内の @media で書き分ける
- 以下の記述を CSS ファイル内の必要な箇所で行います。
@media メディアタイプの指定 and (メディア特性の指定) { /* 当該デバイス用のスタイル記述 */ } - 例）640px以下の場合に、フォントサイズを小さく変更する。
h1 { ： font-size : 2rem; } @media screen and (max-width: 640px) { h1 { font-size : 1.2rem; } }
参考１：HTML＞head の linkタグの media属性で選別する方法
- 以下の記述を HTML の link タグで行います。
<link rel="stylesheet" href="読み込むファイルのパス" media="メディアタイプの指定 and (メディア特性の指定)">
- 例）640px以下の場合は mobile.css を読み込む
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)">
参考２：親CSS において子CSS を @import する際に選別する方法
- CSSを分割・階層化するとともに、以下の記述を親となるCSS ファイルの先頭で行います。
@import url( '読み込むファイル' ) メディアタイプの指定 and (メディア特性の指定);
- 記述例）640px以下の場合は mobile.css を読み込む
@import url('mobile.css') screen and (max-width: 640px); - 具体例）規模の大きなサイトのスタイル開発を複数のスタッフで手分けして行うような場合は、以下のように CSS を分割した上で、それらを main.css などにインポートする方法が採用されます。
main.css/* CSS の文字コード */ @charset "UTF-8"; /* 共通CSS */ @import url('base.css') screen; /* Mobileサイズのみに適用 */ @import url('mobile.css') screen and (max-width: 768px); /* PCサイズのみに適用 */ @import url('pc.css') screen and (min-width: 769px); /* 当該サイト固有のテーマ（追加のCSS）*/ @import url('theme.css') screen; /* プリンタ出力用のCSS */ @import url("print.css") print;
2. デバイス優先順位とCSSの記載順序
2.1. レスポンシブデザインにおける優先順位の考え方
- モバイルファースト
スマートフォンのCSSを基本として、大きな画面での閲覧を例外ケースとして書く方法。基本的にはこちらの方が「上書き」が減って効率は良くなります。
- PCファースト
PC用のCSSを基本として、徐々に小さな画面での閲覧に適したCSSへと順に変更点を追記する方法。従来型の情報量の多いPCサイト向け。
2.2. 記載順序
CSSでは読み込み順にスタイルが適用されていきます。先に読み込まれたスタイルは、後から読み込まれたスタイルによって上書きされるので（つまり後着優先なので）、デバイスに依存しない共通スタイル情報を先行して、デバイスごとの変更部分を後から設定する・・という順番で記述します。
複数のファイルに書き分けた場合は、後半で読み込んだスタイルが、前半で読み込んだスタイルを上書きします。デバイスごとにCSSを完全に区別して読み込む場合は、それぞれに必要なスタイルをすべて記載する必要がありますが、追加読み込みしていく場合は、変更点のみ記載すればOKです。
一般に、以下のような順序で読み込むようにすると、スタイルの上書きが必要最小限になるので効率的です。
- 1) デバイスに関係なく、共通するスタイル情報
- 2) デザインがシンプル（縦に直線的に並ぶ）なモバイル用のスタイル
- 3) デザインが２次元的で複雑になるPC用のスタイル
2.3. 記載例
例えば、モバイル用のスタイルを基本として、PCの画面サイズまで広がったら「メニュー（nav ul）を横並び」に、「コンテナ（#container）の幅を60%」に変更する・・といった場合は、以下のように @media を用いて変更部分のみ記載すればOKです。
/* Mobile サイズ（基本） */
nav ul {
：
flex-direction: column;
}
main {
：
width: 100%;
}
/* PC サイズ */
@media only screen and (min-width: 640px) {
nav ul {
flex-direction: raw;
}
main {
width: 60%;
}
}
3. その他
ブレイクポイントについて
デザインを切り替える画面幅のポイントについては、標準的なスマホ、タブレット、PCの画面幅を参考にして決めることになります。最新の情報
時代とともにデバイスのサイズは変わるので、px単位だと、その都度修正が必要になります。文字幅の単位である em を使うのも賢明な手法です。
@media only screen and (max-width: 36em) {・・・・・・}
ブラウザの機能を使った確認方法
PC用のブラウザには、スマホ、タブレットでどのように表示されるかを確認するツールが用意されています。以下の手順で表示されるので、表示の確認にご活用ください。
- Firefox：ツール＞Web開発＞レスポンシブデザインビュー
- Chrome：ディベロッパーツール＞デバイスツールバーで切り替え
- Safari：開発＞レスポンシブデザインモード
MEMO
- HTMLタグ内に style属性を使ってCSSを書き込んでしまうと、そちらが優先されて、CSSファイルに書かれたメディアクエリーが効きません。原則どおりHTMLとCSSは完全分離で・・。
- スマートフォンからのWebアクセスが PC を上回っています。モバイルフレンドリーなサイトづくりが求められています。
https://developers.google.com/webmasters/mobile-sites/?hl=ja - 以下、サイトがモバイル表示に関して適正か否かをチェックできます。
Googleモバイルフレンドリーテスト - フォントもロゴもレスポンシブに・・
Google:レスポンシブ・フォント Google:レスポンシブ・ロゴ
以下、レスポンシブデザインの仕組みを確認する演習です。
4. 演習
4.1. サンプルのダウンロード
以下に、サンプルを置いています。ひとつのCSSファイル（style.css）をモバイルファーストで記述したパターンのもので、PC用のスタイルをソースの後半で @media を使って追加上書きしています。
- 上記、CODE のページの右側に、Clone or Download という緑色のボタンがあります。それをクリックして Download ZIP を選んでください。
- サンプルがまるごとダウンロードされるので、解凍してください。
4.2. 新規のフォルダで編集体験
このサンプルをベースに、中身を編集する形で、レスポンシブデザインの仕組みを確認してください。
- 新規にResponsiveDesign という名称のフォルダを作成して、上記のサンプルの中身をまるごとコピーしてください。
- style.css をエディタで開いて編集します。
- 以下の点について、値を変えて動作確認してください。
- ブレイクポイントを確認する
- nav や main の配置（縦＞横）が Flexbox で変更されている部分を確認する
- 時間に余裕があれば、HTMLの構造を変更して、自分の思い通りのデザインが実現できるか、試してください。
5. 本日の成果をGitHub にアップロード
本日の体験は、これまでの SampleSite の更新ではなく、新規のフォルダを作成して行なっていただきましたので、GitHub の方も同様に、新規のリポジトリを作成して、別のサイトとして公開します。
- GitHub にログインして下さい。
- 画面右上のプラスアイコン「+」をクリックし、New repository を選択。
- Repository nameという入力欄にリポジトリ名を入力します。リポジトリ名は任意ですが、ここでは、みなさんの手元のフォルダ名と同じ、 ResponsiveDesign という名称にした前提で、説明します。
- Create repository をクリック
＞ 以上でリポジトリができました。
- リポジトリ作成後は右のような画面が表示されます。表示された画面で Uploading an existing file の部分をクリックして下さい。
- ファイルをドラッグ&ドロップ できるスペースが表示されるので、手元にある ResponsiveDesign フォルダの中身を丸ごとアップします（フォルダそのものをアップしないでください。フォルダの中身のファイル、つまりindex.htmlとstyle.css をアップして下さい）。
- Commit changes をクリックすることで、操作が完了します。
- リポジトリが以下のようになれば正解です。
- 公開設定を行います。リポジトリ画面の右端のタブ Settings をクリックします。
- ページの下の方に GitHub Pages という項目があります。見つけて下さい。
- Source の項目が None となっているので、これを main（master） に変更して save（保存）して下さい。
＞ 公開URL が表示されます。
- 自身の公開URLにアクセスしてみて下さい。
https://（ユーザー名）.github.io/ResponsiveDesign
設定変更から公開まで数分かかることがあります。
- 特設サイトの以下の部分から、サイトにアクセスして本日更新したWebサイトが閲覧できればOKです。
==GitHub Pages== * https : //JaneSmith.github.io/SampleSite ← 前回までの演習の成果 * https : //JaneSmith.github.io/ResponsiveDesign ← 今回の演習の成果 <br>
第８回目は、以上をもって終了とします。お疲れ様でした。
第９回から、各自のオリジナルサイトの制作に着手していただきます。