レスポンシブデザイン

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

Google広告でデバイス別の統計の衝撃

広告内容にもよると思いますが8割がスマホでした。ホームページのデバイス別統計では4割がスマホでした。(2020-7現在)

落書き人のレスポンシブ思考は?

モバイルファースト

もう、スマホ向けデザインが基本で、パソコン向けは二の次と考える様に発想を切り替えました。
そろそろ、パソコン向けのごちゃごちゃしたデザインにはさようならしましょう。 CSSはモバイル用に書いて、デスクトップ用は二の次

モバイル用のCSS記述~
@media screen and (min-width: 600px) {
	デスクトップ用のCSS記述
}

コンテンツでブロック分け

デバイス毎にブロックの配置と幅を考えるだけのシンプルなところから始めています。
HTML記述はこのブロックを意識しますが、配置は考えない。
以前は表による配置も在りでしたが、レスポンスデザインの弊害になるので論外です。

レスポンシブで必要なこと

viewportを指定

<meta name="viewport" content="width=device-width, initial-scale=1.0">
							
ビューポートはブラウザのWindowコントロールなどをのぞいた、HTML文書が表示される領域です。

Tips:モバイルブラウザのビューポート
分かりづらいのは「width=device-width」です。
スマホの場合は可読に適した擬似的CSSピクセル数と読み替えるとわかりやすい。これは、最近のスマホ画面はデバイス解像度がパソコン並に高解像度(AppleはRetinaと呼ぶ)で、ドットピッチが非常に小さいのです。これにデバイスピクセル=CSSピクセルで表示してしまうと、表示が小さくて可読困難です。そこで可読に適した擬似CSSピクセル数を小さく(表示を大きく)しています。
つまりスマホはデバイスピクセルにレンダリングする時に拡大レンダリングして疑似CSSピクセルに合わせます。スマホで見ると綺麗に見えるのは、この拡大レンダリングの為せる技です。

text-size-adjustの指定

Webkit系の古いブラウザ対応はもういいでしょ。

linkで別CSSファイルに書く

デバイス毎に別のCSSファイルとする方法

<link rel="stylesheet" href="style_smapho.css" media="screen and (max-width:480px)">
<link rel="stylesheet" href="style_tablet.css" media="screen and (min-width:481px) and (max-width:810px)">
<link rel="stylesheet" href="style_pc.css" media="screen and (min-width:811px) and (max-width:1024px)">
<link rel="stylesheet" href="style_wide.css" media="screen and (min-width:1021px)">
							

CSSの中に書く

スマホ向け,タブレット向け,パソコン向け,ワイド画面向けのCSSを併記する方法

/* スマホ向けCSS */
p {
	color: blue;
}
@media screen and (min-width:480px) and ( max-width:810px)  { 
    /* タブレット向けCSS */
	p {
		color: yellow;
	}
}
@media screen and (min-width:810px) and ( max-width:1024px) {
    /* パソコン向けCSS */
	p {
		color: red;
	}
}
@media screen and (min-width:1024px) {
    /* ワイド画面向けCSS */
	p {
		color: fchsia;
	}
}
							

bodyのwidth指定

まだ書いていませんが、自分の中での再確認でいつの日か?

横配列と縦配列き切り替え

まだ書いていませんが、自分の中での再確認でいつの日か?

イメージのサイズを動的に変える

まだ書いていませんが、自分の中での再確認でいつの日か?

テキストのサイズを動的に変える

これはお勧めしませんが、手法としてのメモでまだ書いていませんが、自分の中での再確認でいつの日か?

タッチイベントを拾うべきか?

まだ書いていませんが、自分の中での再確認でいつの日か?