cssでの文字の設定

質問

HPを作る際、全体的な文字の設定はどのくらいにするのがベストだと思いますか？
以前はpx指定をしてましたが、ユーザービリィティー/アクシビリティーを考えると
%指定かem指定になると思うんですけど、%指定なら80%,em指定なら0.8emあたりが
ベストなんでしょうか？
またcssで記入する際は、bodyの要素に指定したほうがいいでしょうか？
よろしくお願いします。

例

body {
　font-size:指定したい値;
}

回答No.4

koutarou504 · ベストアンサー

悩むなら指定しないのが望ましいです。
指定するには、それなりの意味がある必要があります。
その意味（作成者の意図）によって指定は異なりますし・・・。

ユーザービリィティー/アクシビリティー　という事だけなら、それこそ何も指定しない事がベストです。

そしてそれこそ基準が１００％，１ｅｍなのですから
どこか特定の箇所を大きくしたい小さくしたいとなった場合に９０％とか１．５ｅｍとかすれば良いのです。
故に body に指定しようかなという時点で、その指定はするべきではない物という事です。
（フレームとか複数ページが同時に表示される様な特別な場合は例外ですが、それこそその状況次第なので一般的な質問としてはサイズの回答はしようがないし・・・）

＞またcssで記入する際は、bodyの要素に指定したほうがいいでしょうか
意味（意図）次第ですが・・・。
もともと当該箇所に個別に指定するのが望ましいのであり、また基準はユーザまかせが良いので
基準とするサイズを指定したいというのが不適切であるがそれをするならば基準であるのだから body となるのがあたりまえだし・・・。
というか既に考え方から不適切なのだから、どうするのも自由かと・・・。

という事で DIV など文章の処で class を用いて複数に指定するなり、個々に ID を指定してそれに一括して指定するなり、P に対して指定するとか（P は入れ子できませんし）

ただ私ならその様なページは、スタイルシートを無効にして読むかも・・・。
（もしくは文字サイズを大きくさせるなど、ブラウザの設定を変えるかなぁ。）
かえってレイアウトが崩れるかも・・・。

回答No.5

cyokokichi

指定しない方が無難でしょうね。
いろいろサイトを見ていて突然文字の大きさが変わるのも違和感がありますからね。
ブラウザに任せるのが一番良いでしょう。
スタイルシートの優先順位は
ユーザースタイルシート＞作成者のスタイルシート＞ブラウザのスタイルシート
といわれていますのでユーザースタイルシート、作成者のスタイルシートが設定されていなければブラウザのスタイルシートが生きてきますからブラウザに任せたらいかがでしょうか。

レイアウト重視のページでどうしても文字の大きさに拘るならセレクタはbodyでもhtmlでも全称でも結果は同じですよ。
font-sizeはその要素に指定されていなければ、親要素の値が参照されますから。

回答No.3

UKY

ユーザーのことを考えるのなら何もしないのが一番でしょう。CSS にはユーザースタイルシートというものがありますからね。

下手に
body { font-size: 100% }
とか
body { font-size: 0.9em }
とか指定するくらいなら何も指定しないほうがより多くの人が幸せになれるでしょう。

補足

ご回答ありがとうございます。
何もしないのが一番ということなのですが、一般的な企業サイト、誰もが知ってるポータルサイト等（yahoo,msnなど）基本的に文字は小さめだと思いますがいかがでしょうか？

回答No.2

noname#96725

こんばんは。

■フォントサイズ
閲覧者がどんなフォントサイズで見ているか、どんな解像度の画面かとも関係しますし
閲覧者の想定年齢とも関係しますから難しいですね。

カッコ良い小さいフォントのデザインにするか、視認性がよい大きめフォントにするか、悩むところですが、
一般性を持たせるなら0.9emから1.0emくらいを中心にしては如何でしょうか。
私は主な文章は0.9em　ごく限られた付随的な場所では0.8emを使い、その代わり行間は空け気味にしています。
細かい設定が出来、デザイン性を追及出来るのもCSSの良いところですね。

最終的には以下の要因を加味して大きさを決めて下さい。

１）一行の長さ
２）行間の空き
３）HPに文章が多いのか少ないのか
４）フォントの色と背景の色の取り合わせ方

H1やH2などでは80pxとか60pxとかを使ってメリハリをつけます。（特に大きいフォントにはピクセル指定が良いと思います）

■指定する要素
場所によって文字の大きさを変えたい時があるでしょうから（そうするとデザインのメリハリがつきます）
BODYに設定しないやり方をお勧めします。

回答No.1

_nekoko_

ユーザビリティ/アクシビリティを考えたＨＰ作成の勉強中です。

ＨＰの全体的な文字設定は原則的にユーザー側に任せるべきだと思います。

そのために、cssで一番上の行に

* { font-size:100% ; font-weight:normal }

とまず入れています。こうすると、「*～」で全ての要素の文字の大きさを」「100%」それぞれ閲覧する方のブラウザ標準サイズに、と初期状態にできるそうです。

こうした上で、強調したり、標準サイズの○○倍、という意味で大きさ変えたりすると、見ている側では、その方にとっての標準サイズが大きくなったり少し小さくなったり、強調されたり、、するので、見やすいのではないか、と思っています。

補足

ユニバーサルセレクタ（全称セレクタ）は最初に考えましたけど、*はすべての要素（子孫セレクタ？等）まで影響を与えるので、例えばdivの一つのブロックの下に、またdivで新たなブロックを定義すると、全称セレクタでfont-size:100%なら、問題ありませんが、90％などにしてしまうと、最初のdivブロックで90％の文字、その下のブロック要素では90％の文字のさらに90％と文字が小さくなってしまうのです。なので、全称セレクタでサイズを指定をするなら、divのブロック要素が入れ子にならないものとか、あとは各ブロック要素でサイズ指定をしなければいけなくなると思うんですけど。いかがでしょうか？

例
<!--html-->
<div class="main">てすと
<div class="main2">てすと
<span class="main3">てすと</span>
</div>
</div>

/*css*/
* {
font-size:90%;
}
.main {
width:300px;
height:300px;
background-color:#FFFF00;

}
.main.main2 {
width:150px;
height:150px;
background-color:#0000FF;
color:#FFFFFF;
}
.main.main2.main3 {
font-size:12px;
}