「文字の見え方の違い」の版間の差分

提供:Wiki@KDS
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
7行目: 7行目:
----------
----------


==■ディスプレイ==
==ディスプレイ==
(最も不安定な要素、ディスプレイ)<br>
(最も不安定な要素、ディスプレイ)<br>
ディスプレイサイズは 1024 × 768 が圧倒的主流派ではないかと思われていましたが、時代とともに変わっていくものです。その他にも(実寸と解像度の両方において)途方も無く大きなディスプレイもあれば、わけのわからぬ縦横比を持つ画面もあるのが現実です。<br>
ディスプレイサイズは 1024 × 768 が圧倒的主流派ではないかと思われていましたが、時代とともに変わっていくものです。その他にも(実寸と解像度の両方において)途方も無く大きなディスプレイもあれば、わけのわからぬ縦横比を持つ画面もあるのが現実です。<br>
20行目: 20行目:
いくら高画質かつ高解像度でなめらかな文字だといっても、あまりにも小さく表示されてしまったら、読みにくいでしょう。それでは逆に、低解像度のディスプレイだと文字が大きすぎて画面内に文字数がそれほど収まらない可能性も有ります。ディスプレイの高解像度化によって、文字は小さくなり画面内の文字数は増えてしまいます。<br>
いくら高画質かつ高解像度でなめらかな文字だといっても、あまりにも小さく表示されてしまったら、読みにくいでしょう。それでは逆に、低解像度のディスプレイだと文字が大きすぎて画面内に文字数がそれほど収まらない可能性も有ります。ディスプレイの高解像度化によって、文字は小さくなり画面内の文字数は増えてしまいます。<br>


==■ブラウザ==
==ブラウザ==
(ブラウザによる見え方の違い)<br>
(ブラウザによる見え方の違い)<br>
ブラウザによってCSSの解釈が異なりまので(同ブラウザでもVerによって変わる)どうしてもレイアウトが変わってしまう場合があります。<br>
ブラウザによってCSSの解釈が異なりまので(同ブラウザでもVerによって変わる)どうしてもレイアウトが変わってしまう場合があります。<br>
27行目: 27行目:
Browsershotsはさまざまなブラウザーで見たスクリーンショットを無料で取ってくれるサイトです。URLを入れればスクリーンショットを撮ってくれますのでブラウザによる変化を確認ください。<br>
Browsershotsはさまざまなブラウザーで見たスクリーンショットを無料で取ってくれるサイトです。URLを入れればスクリーンショットを撮ってくれますのでブラウザによる変化を確認ください。<br>


==■フォント==
==フォント==
(フォントの設定による違い)<br>
(フォントの設定による違い)<br>
WindowsとMacintoshでは、それぞれのシステムに標準でインストールされているフォントが違い、それぞれ特有のフォントもあります。<br>
WindowsとMacintoshでは、それぞれのシステムに標準でインストールされているフォントが違い、それぞれ特有のフォントもあります。<br>
<br>
<br>
そのため、ある環境では、システムに標準でインストールされているフォントに自動的に置き換わってしまったり、1行で納めるように想定しても2行になってしまうなど、レイアウトが崩れる場合があります。<br>
そのため、ある環境では、システムに標準でインストールされているフォントに自動的に置き換わってしまったり、1行で納めるように想定しても2行になってしまうなど、レイアウトが崩れる場合があります。<br>

2010年4月13日 (火) 15:25時点における版


ホームページ(特にテキスト)は見る方の環境によって、いろいろと見え方が変化してしまうという一面があります。そのためクライアントの表示状態に合わせて改行を入れることで、その他の人にとっては大変見難い文章となってしまう場合があります。

ここでは文字の見え方の違いの原因を記述していきます。


ディスプレイ

(最も不安定な要素、ディスプレイ)
ディスプレイサイズは 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行になってしまうなど、レイアウトが崩れる場合があります。