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

"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>: [00000051]  <Date>: 2021/12/08 14:30:48
<Title>: 実用的なWebページ(2):ユーザー・フレンドリー(所謂 リキッド・レイアウト)の注意点
<Name>: amanojaku@管理人



まず 絶対単位は使ってはダメです、また vh(vmin、vmaxなども)を使っている場合、「スマホ、タブレト」でソフトウェア・キーボードを表示すると、ソフトウェア・キーボードが表示された分、viewport領域が縮小されレイアウトが崩れる可能性があるので相対単位でも「vh、vmin、vmax」は注意が必用です(viewport領域が縮小されもレイアウトが崩れないなら単位に「vh、vmin、vmax」を使っても良いです)。

下記は、ユーザー・フレンドリーの話なので、ピクセル・パーフェクトなら基本的に考慮しなくても良いです。

ブラウザの横サイズの変更に応じて、場合によってはレイアウトが想定の範囲内で崩れるように設計しなければなりません。

フォントサイズの変更に応じて、場合によってはレイアウトが想定の範囲内で崩れるように設計しなければなりません。

フォントサイズの変更でテキスト表示が阻害されてはなりません。
下記は とある"実在"するサイトで、(ブラウザの設定の)フォント・サイズの変更に対応できていない"実例"です。

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

画像のサイズがネックになります。
画像のサイズの設定を簡単に対処したい場合は、手抜きには なりますが画像のサイズをremで設定すれば簡単に対応できます(デメリットとしてフォント・サイズと連動してしまいます)。
(チョッピリJavaScriptが必用になりますが)本気でやるなら画像のサイズをディスプレイ解像度から算出すると良いでしょう。


初心者の場合は要素の横サイズは%が推奨されます。
どうしても%が気に食わないならvwで指定すれば良いでしょうが、100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてない問題があります(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
スクロールバーの幅を引きたい場合は、スクロールバーを自分でカスタマイズすれば、実際の表示領域を算出できるでしょう(又はJavaScriptで算出するか)。
要素には「box-sizing:border-box」を指定したほうが分かりやすいかもしれません。
なお フォント・サイズはemよりもremが推奨されます。
画像の横サイズをPC版と同じ値(「%、vw」など)で指定すると、当然 縦画面(タブレット、スマホ)では画像が見づらくなってしまいます。
なお、縦サイズも確定しているならobject-fitを使うことで、柔軟な設定が可能です(下記参照)。
キッチリやりたい場合はワイヤー・フレーム(横画面、縦画面)の各レイアウトを元にサイズ(相対単位)を算出しなければなりません、通常 widthの相対単位で計算するので、そうすると当然 ブラウザのウインドウ幅に連動します。
(それは あくまでもユーザー・フレンドリーの話なので)ピクセル・パーフェクトなら、単にメディアクエリで縦画面と横画面で、設定値を変えれば良いだけです。

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

(PC用の)ブラウザの横幅の変更に対し、レイアウトも動的に変化する、リキッド・デザイン(リキッド・レイアウト)と言う手法が提唱されています(つまり ここで言っているユーザー・フレンドリーのこと)。
※ブラウザの横幅が更に狭くなりすぎたら、スマホ用の縦画面のレイアウトに変更されたりします。
※要素の幅が外因性サイジングなら「CSS Grid」レイアウトの「grid-template-columns」で「repeat()」関数(「auto-fit、auto-fill」などを指定)を使えば自動的にレイアウトが崩れるGridが可能です(「内因性サイジング、フレキシブル・サイジング(fr単位)」では正常に横方向に並ばないようです)。
なお、フレキシブル・サイジング(fr単位)は直になら「grid-template-columns」で使用可能です。
また「justify-content」の「space-evenly、space-around、space-between、flex-start、center、flex-end」などで横方向の配置パターンを指定できます。
その場合はcolumn-gapにより列の間隔の最小値を指定できるようです(gapなら行・列の両方の間隔を指定可能)。

リキッドレイアウトと代替レイアウト | CC、CS6
https://helpx.adobe.com/jp/indesign/using/alternate-layouts-liquid-layouts.html

「要素、border、margin、padding」の各サイズをvwなどで設定すると、当然 ブラウザのウインドウ幅に連動します。
もし ユーザーが意地悪くブラウザのウインドウ幅を どんどん小さくしてしまうと、(レスポンシブ用などの)メディアクエリも効きますし、当然 それらも連動します。
(ユーザーの)ブラウザのウインドウ幅の変更で、当然 メディアクエリが効いて欲しい部分もあるでしょうが、メディアクエリが効いて欲しくない部分も有り得ます。
(通常 そこまで考慮しなくても良いですが)もし ブラウザのウインドウ幅に連動させたくない部分はチョッピリ JavaScriptが必要になります、ただし そうするとレイアウトが崩れる可能性があるので、想定の範囲内でレイアウトが崩れるように設計する必要があります。

CSS の値と単位
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units

フォント・サイズ系単位(remなど)は、解像度と因果関係が薄いので、フォント・サイズ系単位(remなど)を使う場合はレイアウトが崩れる可能性を考慮し、想定の範囲内でレイアウトが崩れるように設計する必要があります。
又は 要素の内部にテキストがあり、その要素が内因性サイジングでサイズが決定される場合も同様です。

HTML5ではbodyタグ直下またはbodyタグのheight値を継承している要素の子要素はheightの%指定が効かないと言う問題点があるので、%指定を使用する場合には、それを考慮して使わなければなりません(親要素にheight値が存在するなら、当然 その縦サイズは子孫要素に影響します)。
また、自要素サイズを%指定にすると、レイアウトの崩れなどで親要素がリサイズすると、自要素も それに合わせてリサイズすると言う問題があります(想定の範囲内のリサイズなら問題ないでしょうが)。
とりあえず、レイアウトが崩れても親要素の横サイズはリサイズしないように設計しておけば良いでしょう。
ただし、親要素の横サイズをリサイズしない設計にしたとしても、(レイアウトが崩れると想定した場合)親要素の縦サイズはリサイズするだろうと想定されるので、自要素の縦サイズは%指定を使用してはならない(ただし、レイアウトが崩れないと想定されるなら、自要素の縦サイズに%指定を使用しても問題は無い)。
もし、自要素の横サイズを文字列長に合わせたい場合は、%指定を使用してはならない(その場合は、通常 テキストも改行しない設定にする)。

ちなみに、「CSSフレックスボックス、CSSグリッド」では要素の横幅をブラウザ画面の割合で指定可能です。
「CSSフレックスボックス」「CSSグリッド」でググって下さい。

もし、実際にWebページを作る場合は、(いきなり難しいことを やろうとしても実現は困難なので)勉強の初めとして、その「チンチロリン」程度の単純なレイアウトか、又は もっと簡単なレイアウトから初めても良いです。
例えば、要素を2つ作って、要素内には必ずテキストを入れ、PCとスマホでレイアウトを変化させるモノを作ってみると良いでしょう。

それで各解像度に対応可能か、又 ブラウザ側でのフォント・サイズの変更に要素サイズが動的に追随可能かチェックしてみると良いでしょう。
なお デフォルトのフォント・サイズ以下にしたり、固定(絶対単位の指定)にしたりするとユーザビリティが著しく低下する可能性があるので注意が必要です(デフォルトのフォント・サイズより大きくするなら問題ない)。


<Number>: [00000058]  <Date>: 2021/11/26 14:59:34
<Title>: 実用的なWebページ(3):ユーザー・フレンドリー「フォント・サイズ変更による影響(フォント表示への阻害)」
<Name>: amanojaku@管理人



下記は、ユーザー・フレンドリーの話なので、ピクセル・パーフェクトなら基本的には考慮しなくても良いです(もちろん、考慮しても良いですが)。

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

注意点として、文字を囲む要素のサイズはユーザーのフォント・サイズの変更に応じて動的に変化させる必要が有ります。
下記は、ユーザー・フレンドリーの話なので、ピクセル・パーフェクトなら基本的に考慮しなくても良いです(もちろん考慮しても良いですが)。

例えば(ブラウザの設定で)フォント・サイズを大きくした場合、ザックリと言うと文字列の長さに応じて横幅を伸ばすか、横幅を固定(相対単位による固定)するなら文字列を改行させて (その行数が入るように)縦を伸ばすかで対応しなければなりません。

下記・画像は とある"実在"するサイトで、(ブラウザの設定の)フォント・サイズの変更に対応できていない"実例"です。
「2番目、3番目」の画像はフォント・サイズの変更に対応できておらず、フォントの表示が阻害されています(当然 SEO的な評価は低くなります)。

1番目の画像は、横幅は固定しており文字列を改行させて (その行数が入るように)縦を伸ばしています。

2番目の画像は、要素より文字列が大きいために、要素から文字がハミ出てしまっています。

3番目の画像は、要素よりフォント・サイズが大きいために、フォントの下の部分が隠れてしまっています。

Block( Address 0000026B Identity 00000037 )










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

   
   

管理者用 Password:

  




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