自主学習1-5「レスポンシブデザインにしてみよう(float使用)」

2020年7月29日 2020年9月14日

鷹の目ゴミコ

前回「自主学習1-4【補足】」の続きで今回はレスポンシブデザインについて学習していきます。

contents

1 レスポンシブデザインとは？
2 レスポンシブデザインの作成方法
- - 2.0.1 1.ビューポート（表示領域）を設定
  - 2.0.2 2.メディアクエリを利用して、スタイルシートを画面サイズごとに分けて記述する
3 実際にレスポンシブデザインを作ってみよう
4 自主学習1-5について、講師の評価

レスポンシブデザインとは？

ホームページのデザインを崩さずにスマホやタブレットで表示させるデザインを「レスポンシブデザイン」と呼びます。このレスポンシブデザインに対応していないサイトをスマホやタブレットで閲覧すると、パソコンで閲覧した状態とは違って（デザインが崩れて）表示されてしまいます。

ゴミコ

最近はスマホでのWEB閲覧が主流だから、レスポンシブデザインの学習は必須なわけだね。

レスポンシブデザインの作成方法

1.ビューポート（表示領域）を設定

HTMLのヘッダー内のmetaタグで下記のコードを記述します。

<meta name="viewport" content="width=device-width,initial-scale=1">

metaタグに記述した各属性の説明

meta name …プロパティの名前をつける（name属性で種類を指定）
content …プロパティ値を指定する（content属性でその内容を指定）

content属性で指定できるプロパティは下記表の通りです。

width=	表示領域の幅	device-width	端末画面の幅に合わせる
height=	表示領域の高さ	device-height	端末画面の高さに合わせる
initial-scale=	初期のズーム倍率	数値	倍率
minimum-scale=	最小倍率	数値	倍率
maximum-scale=	最大倍率	数値	倍率
user-scalable=	ズームの操作	yes OR no	許可する OR 許可しない

content属性の値に指定できるプロパティ一覧

ゴミコ

このビューポートを指定しないと、次の項目で指定するメディアクエリが有効にならないので、忘れずにHTMLファイルに記述しよう。

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

まずはパソコンで閲覧した時

ゴミコ

全体を2カラム表示にしてみたわ。

2カラム表示にする方法

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を無効する */
	}
}

スマホ画面では２カラム表示が崩れる可能性があるので、floatが無効になるよう記述しています。

続いてスマホで閲覧した時