「落書き帳」におけるフォントサイズについて

ときどき覗かせてもらっていて、数回しか書き込みしたことがないのに
ちょっと僭越かなとも思うんですが、
フォントサイズの設定が変わって見づらくなってしまいました。

[14106]オーナー グリグリさん
拝見しますと、本文のフォントサイズが80%に指定してあるようなのですが、
ブラウザの基本フォントサイズは各々に見やすいと思うサイズに設定しているはずで、
それがさらに80%になってしまうと見づらくならないでしょうか。

「標準設定で今までとそれほど違わないサイズ」ということですが、
それってちょっと違うんじゃないかなと思います。
というのは、以前のサイズがいい場合には
ブラウザを標準設定に戻せということになりますし、
自分の望みのサイズにするためには
ブラウザの設定を変えるか拡大・縮小しなきゃいけないですよね。

最近はブラウザの基本フォントサイズが16ピクセルになっているため、
それでは大きいというオーナー グリグリさんの判断なのかと思うのですが、
大きいと思う人はすでに設定を小さくしてるでしょうし...。

僕もウェブがらみの仕事をしていて、
フォントサイズの問題では結構悩まされるのですが、
ページの中で基本となるサイズはノーマルにしておく方がいいように思います。

いかがでございましょうか。

フォントサイズについてはまだまだ悩んでいます。

[14168] H2 さん
拝見しますと、本文のフォントサイズが80%に指定してあるようなのですが、
ブラウザの基本フォントサイズは各々に見やすいと思うサイズに設定しているはずで、
それがさらに80%になってしまうと見づらくならないでしょうか。
大変的確なご指摘をありがとうございます。おっしゃるとおりです。
最近はブラウザの基本フォントサイズが16ピクセルになっているため、
これは知りませんでした。80%というのはどこかのページに推奨サイズとして書いてあったのをそのまま持ってきたものでした。元の設定は12pxを基準サイズに固定していたので、16pxの80%だと、12.8pxとなり、Winだと少し大きめというのがあたっていますね。
ページの中で基本となるサイズはノーマルにしておく方がいいように思います。
ということで、以下のページは100%（ノーマル）にしてみました（あくまでも実験です）。
http://uub.jp/frm/index.html
http://uub.jp/frm/14100.html
いつものサイズにするには、ブラウザの設定を小さめにする必要があります。ただし、いろいろなブラウザやMac/Winの環境の違いにより、思わぬ結果になる場合もあるかと思います。とても追い切れませんのでご了解ください。今回の実験はあくまでも「絶対指定」から「相対指定」のテストです。絶対といいながら環境によってはサイズを変えられる場合があったりと、必ずしも思惑通りにならないのが悩みですが。

今回の相対指定への変更実験がとくに問題なければ、この設定への変更を行ってもよいとは思うのですが、他のサイズ要素、例えば、表の幅などは相変わらず絶対サイズで指定していますので、気持ち的には元の絶対指定に戻したいと思っています。ただ、最近は高解像度での利用者比率も高まっていますので、基準サイズ＝12px というのは小さすぎるのかもしれませんね。基準サイズを例えば 14px や 16px に変えるとなると、他の絶対サイズ指定も変えないとレイアウトが崩れる場所が沢山出てくるのでちょっと面倒です。

そう言う意味で、今回の実験ページのようにフォントサイズのみ相対指定にし、レイアウトを崩さないためには、例えば、Win/IEであれば、フォントサイズを「小」にするのを推奨する、という言い方もあります。でも、これはあまりやりたくないですね。

うだうだうだうだと書いちゃいましたが、いろんな所の変更を考えると、元の設定に戻すのが正解かな。その場合でも、MacとWinの違いは吸収してどちらもほぼ同じサイズになるようにしたいとは思っています（実はこの違いがどうもよく分からないんです）。どうしても、元の設定では読みづらいという方がたくさんいらっしゃるようでしたら、考え直します。ご意見ください。

オーナー グリグリ様へ
[14124][14129]
ご多忙の中、かなり以前の過去の書き込みまでフォロー頂き誠に恐縮です。

ご指導頂きました表作成の要領、了解致しました。
ただ、小生としては、グリグリ様の「表機能」を利用させて頂いて、今後とも（ご迷惑でなければ）出来るだけ多くのデータを提示したく存じます。
その場合、これは[14258]でご説明下さっておられる「フォントサイズ」とも絡んでくるのですが、元の設定の方が、見やすい表を作成し易く思います。
例えば、拙稿[10068]にあるような、画面いっぱいにデータを書き詰めた表などは、今後は作成できないのでは？、と不安です。（これもこちらはWinで見ていますので、Macではどのように映るのかが解らないのですが・・・）
もちろん、「Win/IEであれば、フォントサイズを「小」にするのを推奨する」というのも一計ですが、
表を見る度にいちいち文字サイズを変更するのも、抵抗を感じます。
「元の設定では読みづらい」とのご意見が多く、現在実験しておられる「相対指定」を続けるとしても、もし、出来ることであれば表作成の場合のみ、元のフォントサイズの設定で書ければ、と望みます。
（小生は全くの初心者で、プログラムの知識は一切持っていませんので、もの凄く非常識なことを書いている様にも思いますが）

[14258]オーナー グリグリ
気持ち的には元の絶対指定に戻したいと思っています。
＜中略＞
ご意見ください。

[14264]ニジェガロージェッツ さん
元のフォントサイズの設定で書ければ、と望みます。
[14282] 雑魚 さん
私も同じ理由から当初の設定を支持します。

ブラウザの見え方は、各人のパソコンに依存する部分でもあり、一般論は申し上げられないのですが、少なくとも、私個人の見え方としては、今の見え方、は字が大きすぎます。
あえてフォントサイズとは言わず、「見え方」と言わせていただきます。

ニジェガロージェッツ さんご指摘のように、一覧性のある表をできるだけ、一画面に収めたい。
また、非常に書込み量が多いので、一画面に収まる行数が少なくなると、スクロールするのが大変。

今まで、ここの掲示板に関して「字が小さい」とのご意見がいくつか書かれていましたが、私は全く不自由に思ったことが無かったので、やはり見え方は随分違うんだな、と感じました。
同じ解像度、同じブラウザ設定でも、「見え方」は違いますからね。

私も自分のサイトを、パソコンショップなどで他の機種で見たとき、すいぶん間の抜けたデザインだなあ、と愕然とすることがあります。

ですが、やはり個人サイトのデザインセンスは、オーナーの主観と好みに依って良いのではないでしょうか。
全く判読不能とか、そういうクレームが続出しない限り、グリグリさん自身のハード・ソフト環境とデザイン嗜好で、決められて良いのではないでしょうか。

私は、少なくとも前の方が良かったです。
一画面に字が沢山見えた方が。何せ、この掲示板は情報量多いので。

あ、そう、このプレビュー画面で見える見え方が好きです。

[14258]オーナーグリグリ さん
グリグリさん、落書き帳上部のデザインやフォントサイズなどの変更作業、大変お疲れ様です。

フォントサイズが大きくなったことで、”文字”自体は見やすくなったかな、でも、新規書き込みのプレビュー画面などの文字は、少し小さくなってしまった気が・・・、という印象を持つのですが、私自身は以前の設定のままでイイのではと思います。

基本的には[14288]のkenさんのご意見に、私も同感です。

[14258] オーナー グリグリさん

一応専門ですので、もう少し情報提供をさせていただきますね。

InternetExplorer 5.1.6 for Mac (IE/Mac)
Netscape 7.0.2 for Mac (Netscape/Mac)
InternetExplorer 6.0 for Win (IE/Win)
Netscape 7.0.2 for Win (Netscape/Win)

という主要な4環境でみた場合、＜IE/Winのみが＞基本フォントサイズをユーザーが設定できません。メニューの「文字のサイズ」でフォントサイズを大きくしたり小さくしたりできるだけです。つまり、IE/Winではノーマルなフォントサイズは＜必ず＞16pxになります。ただ、そのままだと少々ぶかっこうと思う人が多いためか、通常時からメニューの「文字のサイズ」を「小」にして利用していたり（13pxになります）、作り手側が絶対指定をして小さくしたりしますね。問題なのは、絶対指定（px指定）した場合は、＜IE/Winのみが＞メニューの「文字のサイズ」の変更が効かなくなってしまうのです。

他の3つの環境では、基本フォントサイズをユーザーが設定（変更）できますし、さらに「文字のサイズ」の大小も切り替えられます。作り手側に絶対指定されていても切り替えることができます。

作り手側で絶対指定する場合、最近では14px（一回り小さいのを12px）にすることが多いようです。こうすると、小さくてみにくいと思う人も少なくなり、MacとWinでほぼ同じ感じにできます（実際にはフォントが異なれば変わってきますけど）。ただ、絶対指定をする限り、一番利用者が多いIE/Winではユーザーがサイズを変更できないという悩ましい問題は残ってしまいます。しかし14pxでも大きいと思う人も多く、IE/Winの「小」と同じ13pxを絶対指定する作り手もいますが、OSオフィシャルなフォントが13pxのビットマップフォントをもたないMac(MacOS9.1)では、Netscape/Macではジャギーな表示になり、IE/Macでは12pxの字形を使って13px相当のスペーシングで表示されます。IE/WinとNetscape/Winでも、スペーシングは13px相当ですが字形は12pxと同じものになります(MS Pゴシックなどの場合)。ただし、MS系フォントはその13px相当のビットマップデータももっている模様です（少し不確か）。なおMacのオフィシャルなフォントは、最近のブラウザの基本フォントサイズのデフォルトである16pxのビットマップデータももっていません（もっているのは9,10,12,14,18,24）。なので、Netscape/Macではジャギーな表示になってしまいます。IE/Macでは14pxの字形を使って16px相当のスペーシングで表示されます。この辺の事情はMacOS X環境（のフォントデータ）では異なっているかもしれません。

結局、同じピクセルサイズでも大きいと思う人も小さいと思う人もいて（目がよくない人は大きめにして使う傾向もあるようです）、そういう人たちへの配慮と作り手の意図との折り合いをどうつけるかですが、「このサイズでみれ」というのも一つの選択でしょうし、作り手として意図するイメージとは多少違ってもユーザーに自由度を残すのも一つの選択ですね。オーナー グリグリさんがあまりやりたくないとおっしゃる『Win/IEであれば、フォントサイズを「小」にするのを推奨する』という注釈を入れるのは、現実の中でその辺のバランスをうまくとったものと言えると思います。絶対にバランスを崩したくない場合には画像化する（Flashなども含む）という選択になりますね。ちなみに、Operaというブラウザでは、文字だけでなく画像も含めて拡大・縮小ができるようです（実際に使っていないので伝聞）。これなら、作り手の意図するバランスは崩れにくいですね。

以上、ご参考になれば幸いです。

以下、少しレイアウトが崩れると思いますが、4環境の設定ごとのピクセルサイズを表にしました。空欄は設定できないものですが、CSSで相当サイズを指定することは可能です。

	Maicntosh	Maicntosh	Windows	Windows
	IE5.1.6	Netscape7.0.2	IE6.0SP1	Netscape7.0.2
	96dpi	96dpi	--	96dpi	default dpi
	<default>	<default>	<中>	<default>
	16(14)px	16px =jaggy	16px	16px	normal
	13(12)px	13px =jaggy	13(12)px	13(12)px	small
	<14px>	<14px>		<14px>
	14px	14px	--	14px	normal
	12px	11px =jaggy	--	11(10)px	small
		<13px>	<小>	<13px>
	--	13px =jaggy	13(12)px	13(12)px	normal
	--	10px	12px	11(10)px	small
	<12px>	<12px>	<最小>	<12px>
	12px	12px	12px	12px	normal
	10px	10px	11(10)px	10px	small

[14295] H2 さん
一応専門ですので、もう少し情報提供をさせていただきますね。
どうもありがとうございました。専門家の方から説明をいただき感激です。いろいろネットでも調べたりしていたのですが、どうしてもしっくりこないことが多かったのですが、かなり事情が把握できました。
InternetExplorer 5.1.6 for Mac (IE/Mac)
Netscape 7.0.2 for Mac (Netscape/Mac)
InternetExplorer 6.0 for Win (IE/Win)
Netscape 7.0.2 for Win (Netscape/Win)
問題は私の主環境が
Netscape 4.7 for Mac (Mac OS 9.2.2)
ってことですね。このため、IE/Winとの相性が悪く、TABLEタグのBGCOLORの問題とかいろいろ苦労しています。余分なコードを書かざるをえなくてファイル容量も大きくなる原因です。OS-Xもインストールしたのですが、それ以来Macの調子が悪くなり使ってません。IE/Macも何となく使い辛いんですよね。新しい環境への移行は労力が大きすぎてやりたくないし興味も湧かないですね。そう言うわけで、かなり亜流のスタイルになりがちです。スタイルシートも本当は使わなくてすむのならそうしたいとも思っていますが、なんせ世の中の流れには逆らえない部分もあって困ったものです。

いかん、愚痴になってしまいました。H2さんのお陰で問題が絞れたように思います。ありがとうございました。やはり、元の環境に戻そうかな。

ところで、MacとWinのdpiの違いについてやはりよく分からないのですが、ご存知でしたらご教授ください。以前ある方から教えていただいたのは、Win=96dpi, Mac=72dpi なので、同じ12pxでもWinの方が小さくなるというのは正しいでしょうか。これが正しいとすると、Macの12pxとWinの16pxが同じになってしまいます。しかし実際は、Macの12pxとWinの13pxが大体同じくらいのように思うのですが。どうなんでしょう。なんか頓珍漢なことを言っているようなきもしています。

[14302]グリグリさん
コンテンツ作成は私の専門ではないのですが思ったことを述べさせてください。専門の方から見たら頓珍漢なことかもしれません。

スタイルシートも本当は使わなくてすむのならそうしたいとも思っていますが、なんせ世の中の流れには逆らえない部分もあって困ったものです。
スタイルシートを使わない場合の“<FONT size=3>”が“{font-size: small;}”に相当するものだと思っていましたが、この設定法ではいかがでしょうか。
1～7にはxx-small、x-small、small、meium、large、x-large、xx-largeが対応します。
多くのブラウザで無指定時のサイズがsmallになります。一部mediumになるブラウザもあるようです。
この方法で指定すれば、IE/Winであってもユーザがサイズを手動で変更できます。


[14295]H2さん
つまり、IE/Winではノーマルなフォントサイズは＜必ず＞16pxになります。
私の手許の環境で確認したのですが、IE5.01SP2/Win95OSR2、IE6.0SP1/Win2KSP3共に
「文字のサイズ」を「中」にしたときのフォントサイズは12pxであるような気がします。私の環境は普通ではないのでしょうか。
# 「もしや『コントロールパネル→画面→デザイン』に連動しているのでは?」と思って確認しましたがそうでもないようでした。

以下は読み流してくださって結構です。極端なことを言えば、モノクロディスプレイを使っている人には「自分色」や「色を変える引用表現」は見えない訳です。「どこまでやるか」、ですよね。

[14306]ゆうさん
多くのブラウザで無指定時のサイズがsmallになります。一部mediumになるブラウザもあるようです。

私の手許の環境で確認したのですが、IE5.01SP2/Win95OSR2、IE6.0SP1/Win2KSP3共に
「文字のサイズ」を「中」にしたときのフォントサイズは12pxであるような気がします。私の環境は普通ではないのでしょうか。

すみません。一つ忘れていました。
CSS2の規格ではフォントサイズのデフォルトはmediumであるはずなのですが、最近のIE/Win（IE/Macは未確認）では＜標準準拠モードが有効になっている場合＞、デフォルトのフォントサイズはmediumではなくsmallになるのでした。「標準準拠モード」というのは、HTMLの1行目に書く（ない場合もある）「DOCTYPEなんちゃら」という部分の書き方に依ります。「互換モード」にすれば、IEの＜勝手な振る舞い＞はなくなります（笑）。ホント、ややこしいですね。

ちなみにここの掲示板はDOCTYPEの記述がありませんので、主要4環境とも「互換モード」だと思います（確認が少し手抜きです）。

[14302]オーナー グリグリさん
僕もCSSはあまり好きではないんですよ。全面的な移行を考えると面倒で（笑）。ただフォントサイズに関しては、fontタグでの大小指定は避けて、smallタグ・largeタグを使うようにしています。そしてそれらのタグのフォントサイズをCSSで指定すれば、CSSの有効・無効に関わらず機能しますね。

dpi（dot per inch／1インチあたりのピクセル数）についてですが、フォントサイズをピクセル指定する場合には関係ないと考えてよいです。12pxはMacでもWinでも12ピクセルで表示されます。ただ、同じ12ピクセルで表示しても、1280x1024の解像度を持つモニタでも16インチと19インチでは文字の＜物理的な大きさ＞は異なってきますので、このdpiというのも実際には目安でしかありません。また、モニタと瞳の距離で＜見掛けの大きさ＞も変わってきますね。

dpiが影響してくるのはポイント（pt）などで指定した場合で、72dpi設定での12ptは12pxですが、96dpi設定での12ptは16pxとなります。これは1pt=1/72inchというそもそもの定義に由来します。Macの最近のブラウザはデフォルトが96dpiになっていますから、もうそろそろ96dpiを基準に考えてもいいようにも思います。

Macの12pxとWinの13pxが大体同じくらいのように思うのですが。

これはWinでの13px指定が実際には12pxの字形を使って表示されることと、フォントの字形のデザインによるものだと思います。曖昧な書き方になってしまいますけども、MS系フォントが「詰まっている」のに対し、MacのOsakaフォントなどは「空いている」ため、Macの12pxとWinの13pxが同じ感じに見えるのだと思います。


正直なところ、この辺の問題は僕もうんざりしてます（笑）。Microsoftが勝手な仕様にしたり、Netscape6がプアだったせいで長いことNetscape4.7(Mac)が生き残っていたりというのが原因だと思いますが、今はMac/WinともIE5.0以降・Netscape7以降を「推奨環境」にしてもいいんじゃないかなと思っています。僕もちょっと前までNetscape4.7も常用していたんですが（仕事柄4環境全部使っています）、何も表示されなかったりクラッシュしてしまうページがあまりに多くなってきたため、Netscape/Macの常用バージョンを7.0.2にしました。グリグリさんがおっしゃるのと同じく動作が少したるいですけど、タブ機能は便利に使っていますよ。

僕自身の結論的なものとしては、フォントサイズを変えることによって画像がガタガタになるのは避けるように気をつけているのですが、ユーザーさんの設定でフォントが大きかったりして少々ぶかっこうになるのは放置しています（笑）。

このサイトの場合、全部は見ていませんけども、フォントサイズに依存してガタガタになるようなことはあまりなく、うまくつくられているように思うのですが。

[14298]般若堂そんぴんさん
[12561]に記したとおり Opera では全体をズームしてしまうので，拡大すると上下のみならず左右までもブラウザ・ウィンドウからはみ出してしまうことになります．

これはズーム機能ですから幅がピクセル指定されている場合にはそうなりますよね。全体の比率は変わらないので作り手の見た目の意図は保たれると思いますが、モニタサイズを越えて横スクロールさせないようにするには、幅をパーセントで指定することになりますね。Amazon.co.jpやasahi.comは一定幅以上はウィンドウサイズに自動追従した幅で表示されますけども、配慮すべきこともいろいろ出てきて大変だよなぁと思います。僕は手間を省くために、内容によって幅600ピクセルか幅760ピクセルに固定してつくっています（でも専門デザイナーではありません。システム一式をつくってます）。

フォントサイズの実験については一旦終了します。
http://uub.jp/frm/index.html
http://uub.jp/frm/14100.html
元の設定以上の設定がまだつかめないので上記ページについては元の設定に戻します。

[14323] H2さん
さらにさらに、詳しい説明をありがとうございます。これから出掛けるのであらためてじっくり読ませていただき、適切な設定を検討します。今後ともよろしくお願いいたします。

＃NS7.02はまだ慣れないですね。使い勝手もまだ馴染めない。きっと設定方法があるのだろうけど

[31521] 2004 年 8 月 7 日 (土) 23:12:43 Hiro(＆TOKO) さん
最初から一貫してテキストエディタによる直打ちです。その前に1997年から音楽関連のページも運営しておりまして、その時代には、今ほどビルダーがなかったので、学生だった私は一生懸命HTMLタグを覚えてページを作った思い出があります。だから今でもページの作り方は変わらないのですが、逆に新しいタグやスタイルシートなどに対応できないでいるのです。
おおっ、やっぱり直打ちだったんですか。ソースの書き方が綺麗で丁寧なので直打ちかなぁとは思っていたのですが。レイアウトのコンセプトが整理された上ではっきりしていて、経験の積み上げが感じられます。私も新しいタグやスタイルシートは未だに苦手です。過去に何度も議論があったのですが、フォントサイズ問題は未だに悩ましい問題です。時間に余裕があればHP全体のレイアウトやスタイルを整理したいんですが....　現状維持が精一杯だなぁ。