人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページの文字サイズを%やemでうまく指定するにはどうすればよいでしょうか?
うまいcss設定を教えてください。

ブラウザによって表示がまちまちな気がして。pxとかでしちゃえば楽なのですが、見る人が文字サイズを変えられないので、%やemで指定して、変更したければできるようにしたいです。

●質問者: tetlis
●カテゴリ:インターネット 趣味・スポーツ
✍キーワード:CSS EM PX うまい サイズ
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● HON2
●20ポイント

「相対的に文字サイズを微調整できる指定方法」は下の頁にありますが、

さらに見る人が文字サイズを変更できるのは、

絶対指定と同様に大中小などに変えるぐらいしかないと思います。(小生が知らないだけかな?)

また、文字サイズを見る人が変えられるということは、

元のレイアウトを崩してしまうことにもなります。

http://allabout.co.jp/internet/hpcreate/closeup/CU20041203A/inde...

◎質問者からの返答

確かにレイアウトを崩されることがありますが、だからこそベストなセッティング方法を知りたいのです。

アクセサビリティの観点からは変えられる方が良いみたいですので。実際小さな字のページでは自分も良く大きくして読みます。


2 ● backupper
●20ポイント

意図を汲みきれているか自信がありませんが。

* {font-size: 20pt;}/*絶対値*/

h1 {font-size: 200%;}

h2 {font-size: 140%;}

h3 {font-size: 130%;}

h4 {font-size: 120%;}

h5 {font-size: 110%;}

h6 {font-size: 100%;}

p {}/*20ptになる*/

みたいに、初めに全ての文字の標準の大きさを固定で指定した後、%やemの相対値で変更すると良いのでは無いかと思います。

アドレスはダミーです。

http://q.hatena.ne.jp/


3 ● jiangmin
●20ポイント

例えばどのような指定をしてうまくいかなかったのか、具体的なサンプルをhtmlとcssのセットで示されると、言わんとするところがよく伝わるのではないでしょうか。仕様書に出てくる実例も参考になるかもしれません。

http://www.w3.org/TR/CSS21/


4 ● 186
●20ポイント

Yahoo! UI Libraryに各種ブラウザで表示される文字サイズをなるべく統一しようというCSSがあります.

Yahoo! UI Library: Font CSS

これを組みこんでしまうのが一番速いと思います.

基本サイズは13px, line-heightは16pxになっています. 文字サイズの指定はすべて%で行います. 10px-26pxまではどのように指定すれば良いかの表も載っています.

Font-family Adjustment Example - YUI Fontsのサンプルを見ると分かりますが, ちゃんとIEの「文字のサイズ」→「最大」やFirefoxの「文字サイズ」→「大きく」等で文字サイズが変更できます.


5 ● Bill閣下
●20ポイント

ブラウザによって表示がまちまちな気がして。

この部分が質問の文章の中で解決すべき問題だと解釈しました。CSSバグリスト@CSSバグ辞典スレッドに載っているようなバグ(?)は避けるなりして、それでも表示が微妙に違うのが気になる場合には、文字サイズだけを気にしても、少なくても私には満足する結果が得られず、いつも line-height や vertical-align や margin や padding なども気にします。

wuさんという方が、各UA のデフォルトスタイルシートの差異で悩んでいる人のために、デフォルトスタイルの差異を無くすCSSというものを公開しています。これを使用した上で、さらに font-size を指定する際にはパーセント値で指定するのが良いと思います。font-size を em単位で指定すると、WinIE でブラウザのフォントサイズを変えたときに変化が大きすぎるようになるという問題があります。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ