読書記録, レスポンシブ Web デザイン

「レスポンシブ Web デザイン」の本 [渡辺 2013] の読書記録について記す。

レスポンシブ Web デザイン:

- ウェブ制作の手法。

- ユーザが閲覧する端末の画面サイズに合わせて、ページのデザインやレイアウトを自在に変化

→種々の出力画面 (e.g., スマホ、タブレット、及び大画面テレビ等) でもユーザが使いやすいようにページを柔軟に順応させることが可能。

- 次の 3 手法に基づく

(i) レイアウト (フレキシブル・グリッドをベース):

　幅が可変な段組みレイアウト。詳細は後述。

(ii) フレキシブル・イメージ/メディア:

　フレキシブル・グリッド内でサイズが可変なメディア (e.g., 画像や動画等)

(iii) メディアクエリ: 画面サイズを判別してスタイル指定が可能。

- 未知の出力画面に対応するために標準に準拠.

- 「レスポンシブ」は 1960 年代の建築の分野「レスポンシブアーキテクチャ」からアイデアを得たとされる。これは、周囲の環境・状況により建築要素の姿や形を変える手法。

One Web:

- 概要: Web はアクセスするデバイス、回線環境等によって制限されるべきでなく、種々の環境で同様にアクセス可能であるべきという考え方。

- Berners-Lee が提唱。

- レスポンシブ Web デザインは One Web を限りなく近い形で実現。

グリッド・レイアウト: 印刷媒体で長年使われてきた段組みレイアウトを Web サイトに応用。

↓ (利用)

フレキシブル・グリッド: グリッド・レイアウトの幅をパーセント等の相対値で指定して、柔軟に可変させるレイアウト。

↓ (考え方を実装)

可変グリッド・システム (URL は 2020 年 2 月現在、アクセス確認済み)

e.g.,

- 本ブログでは、「レスポンシブ Web デザイン」の本 [渡辺 2013] の読書記録として導入部のみまとめた。

- 可変グリッド・システムの具体例は、[渡辺 2013] 記載の 2013 年時点の内容を参考にした。近年のものをコメント欄等でご教示いただきたく思っている。

- 本ブログは読解が進んだら追記予定。

- 「環境に応じて可変するシステム」のようなものへの情景があり、この特殊ケースとして、レスポンシブ Web デザインがあるように思う。この観点で思索していきたい。

[渡辺 2013] レスポンシブ Web デザイン製作の実践的ワークフローとテクニック, ソシム株式会社 (2013)

Tadachika Oki の日記