
前回「自主学習1-4【補足】」の続きで今回はレスポンシブデザインについて学習していきます。
contents
レスポンシブデザインとは?
ホームページのデザインを崩さずにスマホやタブレットで表示させるデザインを「レスポンシブデザイン」と呼びます。このレスポンシブデザインに対応していないサイトをスマホやタブレットで閲覧すると、パソコンで閲覧した状態とは違って(デザインが崩れて)表示されてしまいます。

レスポンシブデザインの作成方法
1.ビューポート(表示領域)を設定
HTMLのヘッダー内のmetaタグで下記のコードを記述します。
<meta name="viewport" content="width=device-width,initial-scale=1">
meta name …プロパティの名前をつける(name属性で種類を指定)
content …プロパティ値を指定する(content属性でその内容を指定)
content属性で指定できるプロパティは下記表の通りです。
width= | 表示領域の幅 | device-width | 端末画面の幅に合わせる |
height= | 表示領域の高さ | device-height | 端末画面の高さに合わせる |
initial-scale= | 初期のズーム倍率 | 数値 | 倍率 |
minimum-scale= | 最小倍率 | 数値 | 倍率 |
maximum-scale= | 最大倍率 | 数値 | 倍率 |
user-scalable= | ズームの操作 | yes OR no | 許可する OR 許可しない |

2.メディアクエリを利用して、スタイルシートを画面サイズごとに分けて記述する
サイトを閲覧する端末の幅によって、スタイルシートを分けて記述していきます。メディアクエリを使ってスタイルシートを変更する方法は以下の3通りになります。
- HTMLでlinkタグにmedia属性を記述する
- CSS内で@importする際に記述する
- CSS内で@mediaを記述する
今回はCSS内で@mediaを記述する方法で進めます。
メディアクエリとは@mediaと記述する部分/*
@media以外の所は全てのサイズで読み込まれます。
*/
p {
color:red;
}
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む(スマホサイズ) */
p {
color:blue;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む(タブレットサイズ) */
p {
color:black;}
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む(小型PCサイズ) */
p {
color:green;}
}
このようにメディアクエリを利用するとスタイルシートをサイズ毎に分けて記述することができます。上記では小さいサイズから大きいサイズへと順に記述していますが、これを「モバイルファースト」と呼び、逆を「デスクトップファースト」と呼びます。(ブラウザには、ファイルを読み込む際に下に記述された命令が上の命令を上書きするという性質があるので、メディアクエリを記述する順番には注意する)

実際にレスポンシブデザインを作ってみよう
上記を踏まえて以下のサイトを参考にしながらホームページをレスポンシブデザインで作ってみました。
今回参考にした学習サイト:Syncer「初心者も分かる!レスポンシブ・デザインの作り方」
参考サイトSyncer
まずはパソコンで閲覧した時


- HTMLでdivタグを使用してブロックを作成する
- CSSのfloatプロパティでブロックの値を右寄せ、左寄せ、と分けて配置する
/* 全体に適用するCSS */
.main
{
float: left ; /* 左に寄せる */
}
.side
{
float: right ; /* 右に寄せる */
}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
.main
{
float: none ; /* floatを無効する */
}
.side
{
float: none ; /* floatを無効する */
}
}
スマホ画面では2カラム表示が崩れる可能性があるので、floatが無効になるよう記述しています。
続いてスマホで閲覧した時


自主学習1-5について、講師の評価
よく勉強していますね。この調子でがんばってください。
CSSのメディアクエリが反映される順序のことを「モバイルファースト」や「デスクトップファースト」という言葉で表現するということは今回初めて知りました。
最近ではマーケティング的な観点から、ユーザへ最適なコンテンツを提供する思想のことを「モバイルファースト」「スマホファースト」と呼びます。
同じ呼び方でも文脈で意味が変わる言葉だということを覚えておいた方が良さそうですね。
byゴミリョ

次回の記事
にほんブログ村