ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS

ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS
BRANK

画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。本記事では事例とあわせて最近のレスポンシブ手法を紹介します。

ics.media 5 years ago

Open page

https://ics.media/entry/210604/

3 comments

池田泰延

@clockmaker

2 months ago

Appleのヒューマンインターフェイスガイドラインでも、アクセシビリティについて触れており、「テキストが読みやすいように、サイズを調整できる」「ユーザが設定をパーソナライズ」といった旨で紹介しています。
developer.apple.com/jp/design/huma… pic.x.com/KhCybDR6Cb
池田泰延

@clockmaker

2 months ago

<meta name="text-scale"> は私も期待。
chromestatus.com/feature/511224…

ウェブのフォントサイズは、OSのテキスト設定に依存させるべきだと私も以前より思っています。

またiOS Safariでは「ダイナミックタイプ」に対応でき、既にICS MEDIAで実施しています
ics.media/entry/210604/#…
池田泰延

@clockmaker

4 years ago

CSSのフォントサイズの単位に px か rem かが話題になっていますが、個人的にはiOSのダイナミックタイプにこそ意識して欲しいと思います。

ダイナミックタイプを設定していても、ウェブサイトのフォントが小さいことが多く･･･。

対応方法は次の記事を参考に。
ics.media/entry/210604/