作業員山本のメモ(質問・回答への下調べメモ)


(以下は、このページの最後まで、作業員山もとのメモ、ノート

070905記 中尾さん、上田さんの質問関連事項メモ
フォントの種類および文字の大きさの指定。ユーザ側での変更、等、
--------------------------------
ピクセル表示(Px)とポイント表示(Pt)

文字サイズの概要。厳密性・正確度は疑問!
Windows IE6 のデフォルト(文字サイズ"中")では約 16 pxに相当
16Px が 12Ptと同じ大きさに見えた。(15インチディスプレイ、1024 x 768px)
↑が標準の大きさ。100%の大きさ。
24Px が 18Ptと同じ大きさに見えた。(15インチディスプレイ、1024 x 768px)
13Px が 10Ptと同じ大きさに見えた。(15インチディスプレイ、1024 x 768px)

(1)---------------------------------
(A型掲示板 スタイルシートで下記のように指定中)
0.文字コード
print "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\">\n";  シフトJIS 

1.文字フォント
特別に指定していません(受信側の指定による)。

2.文字サイズ
font-size : 13pt; /*ページの基本文字サイズ=13ポイント*/
input, textarea, select, .button { font-size : 14pt; } 入力画面等、14ポイント
.small, .sub { font-size : 90%; }  日付、時刻、曜日、記事番号:標準の90%

3.太字指定
.title, .name { font-weight : 700; }  タイトル、投稿者氏名等:太字指定
.comment { font-weight : 700; }  コメント欄:太字指定

(2)------------------------------------
(C3A型掲示板 スタイルシートで下記のように指定中)
#文字コード:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"> シフトJIS

# 本文の文字フォント
 受信者の指定による。但し、
$b_face = 'serif,MS UI Gothic, Osaka, MS Pゴシック';
<受信側の指定フォントが使用できない場合は、上記の左から優先適用)
(注、serif=明朝形のフォント。 osaka=Mac OS日本語版において使用。ゴシック系?。)

# 本文の文字サイズ
$b_size = '16px';   16ピクセル
body,tr,td,th { font-size:$b_size; font-family:"$b_face"; }

select,input,textarea {font-size:13pt;}  入力画面:13ポイント

(3)---------------------------------
pt、pxなどで「絶対指定」した場合は、IE6などではユーザの変更は無効

最も利用者数が多いwindows IE6の場合、文字サイズを絶対指定すると(pt、pxなど)、ユーザー側でブラウザーの文字サイズのコントロールが効かなくなります。
これはユーザビリティ的に推奨されていません。
他のブラウザ Windows FireFox(v1.5.0.6など)やWindows Netscape(v7.1)、Mac Safari(v1.3.2など)、Mac Netscape(v7.1)、Mac IE(v5.2)などでは、pt、pxなどを使用してもユーザー側の変更が優先されます。

出所: http://www.conifer.jp/browser-fontsize.html 
(cssで文字サイズ指定・サンプル)
-------------------------------------()
訪問者にやさしいウエブサイト作り
http://www.mars.dti.ne.jp/~fuminG/index.html
http://www.mars.dti.ne.jp/~fuminG/contents/index.html コンテンツページ編
http://www.mars.dti.ne.jp/~fuminG/contents/sizefix.htm 文字サイズは固定しない
----------------------------------------------------------(完)


「様式、例示画面」へ戻る