LogoMark.png

Webデザイン/2020/0623

第8回 CSS入門 その2

Webデザイン/2020造形短期大学部|2020.06.23

第8回目の展開と要件



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



本日のメニュー


はじめに

今回は、CSSを用いたレスポンシブデザインについて学習します。

レスポンシブデザインとは、PC、タブレット、スマートフォンなどの様々なサイズの画面表示に対して、フレキシブルにレイアウトを最適化して表示する手法のことをいいます。

PCとスマホ、あるいは遡って、PCとケータイで、ブラウザの仕様が異なっていた時代は、PC用のWebサイトと、モバイル用のWebサイトは、別々にコーディングを行なっていました(ケータイ専用のHTMLも存在していました)。その当時は、PC用のHTMLから情報を削ってケータイ用を作るといった2度手間が必要で、どちらか一方の更新が遅れて混乱するといった問題もありましたが、現在では、HTML(すなわち掲載する情報内容)は1つ(One Source)で、そのビジュアルのみを CSS の切り替えによって各デバイスに最適化するということが可能になりました。

レスポンシブデザインの技術を使うと、ブラウザのウインドウ幅によって表示スタイルが変わります。今回以降、この仕様を標準的なものとして、演習していきますので、Webサイトの開発においては、ウインドウ幅を広げたり、縮めたりしながら、最適なスタイルが実現されているかを確認するようにしてください。



1. レスポンシブデザインの実現方法

一般に、HTML側の meta タグで viewport指定を行うとともに、CSS側のメディアクエリを使って実現します。

1.1. HTML側


1.2. CSS側

デバイスのタイプと特性に応じて、CSSファイルの中でスタイルを書き分ける、あるいは、CSSファイルを分けて読ませることが必要です。これには、メディアクエリーという機能を使います。主に以下の3つの方法があります。

1.3. CSS内の @media で書き分ける


参考1:HTML>head の linkタグの media属性で選別する方法


参考2:親CSS において子CSS を @import する際に選別する方法

2. デバイス優先順位とCSSの記載順序

2.1. レスポンシブデザインにおける優先順位の考え方

2.2. 記載順序

CSSでは読み込み順にスタイルが適用されていきます。先に読み込まれたスタイルは、後から読み込まれたスタイルによって上書きされるので(つまり後着優先なので)、デバイスに依存しない共通スタイル情報を先行して、デバイスごとの変更部分を後から設定する・・という順番で記述します。
 複数のファイルに書き分けた場合は、後半で読み込んだスタイルが、前半で読み込んだスタイルを上書きします。デバイスごとにCSSを完全に区別して読み込む場合は、それぞれに必要なスタイルをすべて記載する必要がありますが、追加読み込みしていく場合は、変更点のみ記載すればOKです。

一般に、以下のような順序で読み込むようにすると、スタイルの上書きが必要最小限になるので効率的です。

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用のブラウザには、スマホ、タブレットでどのように表示されるかを確認するツールが用意されています。以下の手順で表示されるので、表示の確認にご活用ください。

MEMO



以下、レスポンシブデザインの仕組みを確認する演習です。





4. 演習

4.1. サンプルのダウンロード

以下に、サンプルを置いています。ひとつのCSSファイル(style.css)をモバイルファーストで記述したパターンのもので、PC用のスタイルをソースの後半で @media を使って追加上書きしています。

4.2. 新規のフォルダで編集体験

このサンプルをベースに、中身を編集する形で、レスポンシブデザインの仕組みを確認してください。




5. 本日の成果をGitHub にアップロード

本日の体験は、これまでの SampleSite の更新ではなく、新規のフォルダを作成して行なっていただきましたので、GitHub の方も同様に、新規のリポジトリを作成して、別のサイトとして公開します。

GitHubPagesNew.png
GitHubPages01.png
GitHubPages02.png
GitHubPages03.png


GitHubPagesSettings.png
GitHubPages05.png



第8回目は、以上をもって終了とします。お疲れ様でした。
第9回は、JavaScript / jQuery について学習します。





PAGES

GUIDE

DATA

Last-modified: 2020-06-23 (火) 10:43:51