「文字の見え方の違い」の版間の差分
編集の要約なし |
編集の要約なし |
||
| (同じ利用者による、間の1版が非表示) | |||
| 1行目: | 1行目: | ||
<div id="manual"> | <div id="manual"> | ||
<br> | ウェブサイトは閲覧環境によって、見え方が変化する。<br> | ||
例えば、クライアントの環境に合わせてテキストに改行を入れると、エンドユーザーにとっては見づらくなる場合もある。<br><br> | |||
以下、環境による文字の見え方の違いについて説明をする。 | |||
<br> | |||
== | ==ディスプレイ== | ||
(最も不安定な要素、ディスプレイ)<br> | (最も不安定な要素、ディスプレイ)<br> | ||
ディスプレイサイズは | ディスプレイサイズは 1024×768 が圧倒的主流派ではないかと思われていましたが、時代とともに変わっていくものです。その他にも(実寸と解像度の両方において)途方も無く大きなディスプレイもあれば、わけのわからぬ縦横比を持つ画面もあるのが現実です。<br> | ||
[[画像:Display 2008.jpg]]<br> | [[画像:Display 2008.jpg]]<br> | ||
[2008年度ディスプレイサイズのシェア率移行グラフ]<br> | [2008年度ディスプレイサイズのシェア率移行グラフ]<br> | ||
| 20行目: | 17行目: | ||
いくら高画質かつ高解像度でなめらかな文字だといっても、あまりにも小さく表示されてしまったら、読みにくいでしょう。それでは逆に、低解像度のディスプレイだと文字が大きすぎて画面内に文字数がそれほど収まらない可能性も有ります。ディスプレイの高解像度化によって、文字は小さくなり画面内の文字数は増えてしまいます。<br> | いくら高画質かつ高解像度でなめらかな文字だといっても、あまりにも小さく表示されてしまったら、読みにくいでしょう。それでは逆に、低解像度のディスプレイだと文字が大きすぎて画面内に文字数がそれほど収まらない可能性も有ります。ディスプレイの高解像度化によって、文字は小さくなり画面内の文字数は増えてしまいます。<br> | ||
== | ==ブラウザ== | ||
(ブラウザによる見え方の違い)<br> | (ブラウザによる見え方の違い)<br> | ||
ブラウザによってCSSの解釈が異なりまので(同ブラウザでもVerによって変わる)どうしてもレイアウトが変わってしまう場合があります。<br> | ブラウザによってCSSの解釈が異なりまので(同ブラウザでもVerによって変わる)どうしてもレイアウトが変わってしまう場合があります。<br> | ||
| 27行目: | 24行目: | ||
Browsershotsはさまざまなブラウザーで見たスクリーンショットを無料で取ってくれるサイトです。URLを入れればスクリーンショットを撮ってくれますのでブラウザによる変化を確認ください。<br> | Browsershotsはさまざまなブラウザーで見たスクリーンショットを無料で取ってくれるサイトです。URLを入れればスクリーンショットを撮ってくれますのでブラウザによる変化を確認ください。<br> | ||
== | ==フォント== | ||
(フォントの設定による違い)<br> | (フォントの設定による違い)<br> | ||
WindowsとMacintoshでは、それぞれのシステムに標準でインストールされているフォントが違い、それぞれ特有のフォントもあります。<br> | WindowsとMacintoshでは、それぞれのシステムに標準でインストールされているフォントが違い、それぞれ特有のフォントもあります。<br> | ||
<br> | <br> | ||
そのため、ある環境では、システムに標準でインストールされているフォントに自動的に置き換わってしまったり、1行で納めるように想定しても2行になってしまうなど、レイアウトが崩れる場合があります。<br> | そのため、ある環境では、システムに標準でインストールされているフォントに自動的に置き換わってしまったり、1行で納めるように想定しても2行になってしまうなど、レイアウトが崩れる場合があります。<br> | ||
2010年4月16日 (金) 10:03時点における最新版
ウェブサイトは閲覧環境によって、見え方が変化する。
例えば、クライアントの環境に合わせてテキストに改行を入れると、エンドユーザーにとっては見づらくなる場合もある。
以下、環境による文字の見え方の違いについて説明をする。
ディスプレイ
(最も不安定な要素、ディスプレイ)
ディスプレイサイズは 1024×768 が圧倒的主流派ではないかと思われていましたが、時代とともに変わっていくものです。その他にも(実寸と解像度の両方において)途方も無く大きなディスプレイもあれば、わけのわからぬ縦横比を持つ画面もあるのが現実です。

[2008年度ディスプレイサイズのシェア率移行グラフ]
解像度もディスプレイによって様々です。解像度とは dpi ( dots per inch ) 、つまり1インチ(2.54mm)の幅に何ドット詰め込まれているか、、解像度が上がれば文字も小さく表示されます。 pt (ポイント)などの絶対単位は画面の解像度によらず、常に一定の大きさで表示されるハズなんですが実際は微妙なところみたいです。
CSS の規定で pt や cm の単位を使うと絶対的な寸法で表示されるというコトになっていますが、ディスプレイの解像度の影響は受けてしまい。スタイルシートのいかなる方法で文字の大きさを規定したとしても、ディスプレイの解像度が上がれば文字の表示サイズも縮小していく算段です。絶対指定は、 ppi (OS依存)と dpi(ディスプレイ依存)が一致した場合に実寸で表示されるようにピクセル数を調節します。
いくら高画質かつ高解像度でなめらかな文字だといっても、あまりにも小さく表示されてしまったら、読みにくいでしょう。それでは逆に、低解像度のディスプレイだと文字が大きすぎて画面内に文字数がそれほど収まらない可能性も有ります。ディスプレイの高解像度化によって、文字は小さくなり画面内の文字数は増えてしまいます。
ブラウザ
(ブラウザによる見え方の違い)
ブラウザによってCSSの解釈が異なりまので(同ブラウザでもVerによって変わる)どうしてもレイアウトが変わってしまう場合があります。
http://browsershots.org/
Browsershotsはさまざまなブラウザーで見たスクリーンショットを無料で取ってくれるサイトです。URLを入れればスクリーンショットを撮ってくれますのでブラウザによる変化を確認ください。
フォント
(フォントの設定による違い)
WindowsとMacintoshでは、それぞれのシステムに標準でインストールされているフォントが違い、それぞれ特有のフォントもあります。
そのため、ある環境では、システムに標準でインストールされているフォントに自動的に置き換わってしまったり、1行で納めるように想定しても2行になってしまうなど、レイアウトが崩れる場合があります。