ホームページの文字表示サイズについての質問です。
私は全てWindows Vistaのメモ帳で作っているのですが、文字サイズを
<Font Size="サイズ">
で指定するやり方では、ＭＡＣで有効ではないと分かり、スタイルシートの外部から引き出すやり方で、まずs.cssに、
BODY { font-size: 13px }
と書き、index.htmlに
<head>
<style Type="text/css">
<!--
body,td {line-height:15pt;}
-->
</style>
<link href="s.css" rel="stylesheet" type="text/css">
</head>
と打ち込んでみました。
しかし、こうするとMacX10.5では文字化けを起こしてしまいました。
<link href="s.css" rel="stylesheet" type="text/css">
を挿入するやり方がどこかおかしいのでしょうか。
または、文字サイズの指定のやり方が、他にもあるのでしょうか。お手数かと思いますが、どうかお助けください。
投稿日時 - 2010-02-07 14:11:51
2人が「このQ&Aが役に立った」と投票しています
回答（4件中 1～4件目)
フォトサイズの指定法でのオススメです。
html {
font-size:medium !important;
font-size:small;
}
body {
font-size:100.01%;
}
これで大抵のブラウザでは16px相当で表示されます。(ブラウザの初期設定の値が大抵16pxなので)
あとは個別に%で指定していきます。htmlとbodyには上書き指定しないようにしてください。
以下指定サイズと%の関係。
10px 62.50%
11px 68.75%
12px 75.00%
13px 81.25%
14px 87.50%
15px 93.75%
17px 106.25%
18px 112.50%
19px 118.75%
20px 125.00%
21px 131.25%
22px 137.50%
23px 143.75%
24px 150.00%
25px 156.25%
26px 162.50%
27px 168.75%
28px 175.00%
29px 181.25%
30px 187.50%
31px 193.75%
32px 200.00%
投稿日時 - 2010-02-09 22:30:56
補足
metametamuさん、ご丁寧な回答ありがとうございます。さっそく試してみたところ、ＷＩＮでは問題なく表示されました。
しかし、Ｍａｃで確認してみたところ、文字化けを起こしてしまいました。
以下Ｍａｃで見た私のＨＰの上部のソースです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>KUI-TIME! *** ƒNƒCƒ^ƒCƒ€</title>
<meta name="description"
content="‚­‚錫‚½
「・「・‚Ì。ニn・#236;ƒCƒ「・#402;XƒgƒTƒCƒg
。">
<meta name="keywords"
content="‚­‚錫‚½,KUI-TIME,ƒNƒCƒ^ƒCƒ€,‚­‚
錫‚½‚錫‚Þ,食ŽžŠÔ,KUITAIMU,kuitaimu,KUITIME,kuitime,Kuita,Kuitaimushi,Kuitaimusi,‚­‚
錫‚½‚錫‚Þ‚µ,食‚
錫‚½‚錫。ヌŽ,ƒNƒCƒ^ƒCƒ€ƒV">
<meta name="ROBOTS" content="NOFOLLOW">
<style Type="text/css">
html {
font-size:medium !important;
font-size:small;
}
body {
font-size:81.25%;
}
<!--
body,td {line-height:15pt;}
-->
</style>
以下がＷＩＮのソースです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>KUI-TIME! *** クイタイム</title>
<meta name="description" content="くいた運営の創作イラストサイト。">
<meta name="keywords" content="くいた,KUI-TIME,クイタイム,くいたいむ,食時間,KUITAIMU,kuitaimu,KUITIME,kuitime,Kuita,Kuitaimushi,Kuitaimusi,くいたいむし,食いたい虫,クイタイムシ">
<meta name="ROBOTS" content="NOFOLLOW">
<style Type="text/css">
html {
font-size:medium !important;
font-size:small;
}
body {
font-size:81.25%;
}
<!--
body,td {line-height:15pt;}
-->
</style>
やはりどこか命令ミスを起こしているのでしょうか。
投稿日時 - 2010-02-10 15:12:14
・文字サイズの指定について
http://www5e.biglobe.ne.jp/~access_r/hp/css/css_exp_008.html#1
単位は使えるものは自由に使って良いのですが、例えば13pxと指定してしまった場合、高解像度のモニタを使っている人から見たら豆粒でしょうし、逆に携帯端末などで見ている人にとっては大きすぎて大変だったり、およそ見る人に親切とは言えません。
最近のブラウザは、文字サイズの変更機能も充実していますが、それを知っている方ばかりとは限らないですし。
文字に限らず、サイズの指定は、可能な限り"%"などの相対的な指定をすることをおすすめします。
・文字化けについて
No.1の方の回答の通りです。
投稿日時 - 2010-02-07 15:58:43
お礼
uriboarさん、ご回答ありがとうございます。
単位はpxだと見てくださる方に不親切だったのですね。今後は%などの指定にすることにします。
本当にありがとうございます。
投稿日時 - 2010-02-08 11:37:29
＞font-size: 13px
間違いではないが、通常 pt を使います。単位は正確に。
＞こうするとMacX10.5では文字化けを起こしてしまいました
しかし、文字化するとは思えません。設定が効くか、効かないかだと思いますが？
別な要因があるかと思います。
文字化けとは、具体的にどのような状態になっていますか？ 例を挙げてください。
またDOCTYPEとかどうなさっているのでしょうか？
ブラウザは何で、エンコードはどのようになっています？
また、HTMLファイル等はShift_JISですかユニコードで書いていますか？ さらにそれらを、ちゃんと指定していますか？
特に文字コードが混じっている場合、文字化けを起こしやすいですが？
投稿日時 - 2010-02-07 15:13:40
補足
bakakyatapさん、ご回答ありがとうございます。
文字化けは、おそらく命令文の挿入位置がおかしいだとか、設定がおかしいためと思われます。
文字化けは、Ｍａｃ OS X 10.5.8ではローマ字と記号、そしてロシア文字？に変換されてしまっていて、テキストエンコーディングをデフォルトから日本語（Ｓｈｉft ｊｉｓ等）に変更すると、ちゃんと表示されます。
例を挙げようと今ＭａｃでＨＰを開いたのですが、最初は文字化けしていたのに、今は普通に表示されています…デフォルトでもです。謎です。
テキストエンコーディングを日本語（ＥＵＣ）にしてみたとここ、これだけ
nCXgu
↑創作イラストサイトです が 化けた
このように化けました。
DOCTYPEは全く存在を知りませんでした。お恥ずかしい限りです。<html>より上に、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">を挿入してみました。
ブラウザはＩＥで、エンコードは自動選択にチェックが入っており、点が入っているのは日本語シフトＪＩＳです。
ＨＴＭＬファイル等は、何で書いているのか分かりません。申し訳ありません。検索をしてみたのですが、私の能力では無理でした。どうすればそれが分かるのか、大変申し訳ないのですが、お教え頂ければ幸いです。
文字コードについては、勉強不足ゆえによくわかっていません。本当に至らないばかりで申しわけないです。
投稿日時 - 2010-02-08 10:55:30
