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

"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>: [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.