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

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

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

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

ゴミコ
最近はスマホでの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

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

参考1-5-1
ゴミコ
全体を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を無効する */
	}
}

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

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

参考1-5-2
ゴミコ
スマホはfloatが解除されて1カラム表示になっているわね。

自主学習1-5について、講師の評価

よく勉強していますね。この調子でがんばってください。

CSSのメディアクエリが反映される順序のことを「モバイルファースト」や「デスクトップファースト」という言葉で表現するということは今回初めて知りました。

最近ではマーケティング的な観点から、ユーザへ最適なコンテンツを提供する思想のことを「モバイルファースト」「スマホファースト」と呼びます。

同じ呼び方でも文脈で意味が変わる言葉だということを覚えておいた方が良さそうですね。

byゴミリョ

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村