トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"Twilight"

Index Menu
(3)<FirstTitle>:実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点 <LastTitle>:実用的なWebページ(3):ユーザー・フレンドリー「フォント・サイズ変更による影響(フォント表示への阻害)」 (1)<FirstTitle>:JavaScriptデモ集 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:JavaScriptデモ/CanvasMouseDraw087 <FirstUser>:amanojaku@管理人 (2)<FirstTitle>:CSSデモ集(-) <LastTitle>:CSSデモ(+JavaScript)集 (1)<FirstTitle>:CSSデモ/シンプルCSSドロップダウンメニュー086 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:JavaScriptデモ/『Canvas「strokeStyle、lineWidth、moveTo()、lineTo()」、Mouse Event』 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:ベタ記事・案件なら可能かも <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [000000F9]  <Date>: 2021/06/02 22:25:47
<Title>: ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点
<Name>: amanojaku@管理人



(Webページ作成の基本のキとして)ブレイク・ポイントを念頭に置き、必ずワイヤー・フレームを作成して下さい(手書きでも良いですし、単純なレイアウトなら脳内だけでも おk)。

PCとスマホを同一のファイルにする手法はレスポンシブ・デザインと言われており、推奨されています。
レスポンシブ・デザインにする場合、スマホでは高度なCSSが効かないので、モバイル・ファーストで作成する事が推奨されます(折角PC用にCSSで高度な装飾を作っても、後で全面的に修正になる可能性があります)。
PC用を先に作る場合は、PC用を少し作ったら、スマホでも こまめにチェックする必要があります(とりあえずチェックするだけなのでPC用のコードのままでも良いです)。
また、(CSSで高度な装飾を使わない)パイロット版ページならPC用が先でも良いです。
また 絶えずレイアウト構成をスマホの「縦、横」画面、タブレットの「縦、横」画面、PCの画面(アスペクト比「4:3、16:9」)で表示可能か考慮しながら作る必要があります、そうしないと後で全面的に修正しなければならなくなります。

実用的なWebページ
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000037&bts+2021/03/21%2013%3A55%3A19&

(pxなどの)絶対単位は特定の解像度に依存するので使ってはダメです。
初心者の場合は、基本的に文字はrem、それ以外は%が扱いやすいでしょう。

ちなみに、その「実用的なWebページ」記事内のチンチロリンは「border、margin、padding」は計算による値、「文字、画像」はrem、それ以外は%です。
画像などはremが最適と言う意味ではありません、なぜならremで画像などを設定するとブラウザのフォント設定で画像などのサイズが変化しますので。

「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。
Chromeのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。
(各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。
また、フォント・サイズもイロイロ 変更してみて、イロイロなフォント・サイズに対応可能かどうかもチェックしてみると良いでしょう。

bodyには幅サイズは存在するので、注意深く配慮すれば子孫要素にも%で幅サイズを指定可能です。
どうしても%が気に食わないならvwで指定すれば良いでしょう、ただし 厳密な計算が必要になるので、初心者向きではありません。
ブロック要素はbox-sizingを使うことで、計算を簡略化できますが、それでも「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算する必要があります。
CSSの単位にvh(vmin、vmaxなども)を使っている場合、スマホでソフトウェア・キーボードを表示すると、ソフトウェア・キーボードが表示された分、viewport領域が縮小されレイアウトが崩れる場合があるので注意が必要です。
なので、縦サイズ(横サイズも)は「vh、vmin、vmax」を強く非推奨です。
基本的に縦サイズは内部の要素サイズで決まるようにすれば良いでしょう。
画像などは例外で縦サイズはautoにするなどで対応、それで対応できない場合は、object-fitを使って下さい。

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
https://www.webcreatorbox.com/tech/object-fit

ユーザーは自分が見やすいようにブラウザのフォント・サイズを設定しています(当然、目が悪い人は大きめにしています)のでデフォルトのフォント・サイズ以下にしたり、固定にしたりするとユーザビリティが著しく低下する可能性があるので注意が必要です(デフォルトのフォント・サイズより大きくするなら問題ない)。

その注意点として、文字を囲む要素のサイズはユーザーのフォント・サイズの変更に応じて動的に変化させる必要が有ります。
例えばフォント・サイズを大きくした場合、ザックリと言うと文字列の長さに応じて横幅を伸ばすか、横幅を固定するなら文字列を改行させて (その行数が入るように)縦を伸ばすかで対応しなければなりません。

当然、レイアウトの崩れが想定されるので、想定の範囲内でレイアウトが崩れるように、レイアウトを設計する必要があります。

まずは、前述のチンチロリン程度の簡単なレイアウトで作ってみると良いでしょう、前述のチンチロリンはPCとスマホでレイアウトが変化すると言うことに注意して下さい。
実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。
また、フォント・サイズの変更に伴なって、ブロック要素サイズが動的にリザイズするかチェックしてみて下さい。

Block( Address 000000FC Identity 000000F9 )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.