00 NewEntry
--/-- スポンサーサイト
11/14 Webサイトでの文字サイズ指定&行間について
01 Categories
02 RecentComments
03 Links
04 Archives

--.--.-- --

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--:-- | スポンサー広告 | edit

2012.11.14 Wed

ご興味がある方は「続きを読む」からどうぞ。ご質問はブログコメや拍手などからお気軽に。

Webサイトで文字を表示する場合、pxやptでサイズを指定すると
ブラウザボタンでの文字サイズ変更ができません。
目次などは文字サイズを固定するほうが配列の崩れが抑えられて良い場合もありますが、
解説文や小説などは文字サイズを変更できるようにしておくほうがユーザーに親切です。

それだけでなく、px表示では9px~12pxで一行の幅が崩れるバグが出るブラウザがあります。
pt表示では文字が震えるように見えるバグが出るブラウザがあります。

そんなわけでfontは相対性サイズのemやパーセントで指定しておくのが
webサイトでは適切とされていますが、emは基本サイズを指定してそこから相対値を決定するなど
ちょっとわかりにくい部分があるので、最初はパーセントのほうが扱いやすいと思います。

パーセントを使う場合の注意点は75%以上で指定すること。
ブラウザによっては74%~60%はバグが生じて、意図したサイズで表示されません。
ゆえにパーセント表示では75%以上を使う、と覚えておくとよいと思います。
(59%以下の文字サイズは小さすぎて使うことは無いでしょう)

pxとパーセントは以下のように対応しています。
12px=75%、14px=88%、16px=100%、18px=113%、20px=125%となります。
(デフォルトで16pxを100%としているブラウザが多いので、それを基準としています。
また奇数pxに対応させると拡大時に崩れることがあるので偶数pxに対応させるほうが無難です)

※Oさんへ私信。11px=69%なのでバグ対象になってしまいます。
今のうちにスタイルシートを75%(12px相当)にしたほうがよろしいかと…。


ついでに行間についてもアドバイスしますと、文字サイズをパーセントで指定した場合は
行間もパーセントで指定するのが基本です。
行間は120%~180%が適当とされています。書体や文章の長さや背景色とのバランスなどで
どのパーセントが良いのかを見極めますが、180%以上広くすると間延びして読みづらくなることが多いです。
ただし、文字サイズが行間よりも大きい場合はパーセント指定をすると重なりますので、
その時は単位なしで倍数で書きます。(150%だったら1.5)

サイト制作のご参考になれば幸いです。

16:22 | セキュリティ・web制作などPC関連 | edit | trackback(0) | comment(0)






Trackback

URL : http://def.blog5.fc2.com/tb.php/1117-318d989f

01 Categories 04 Archives
2017年03月 (1)
2017年01月 (1)
2016年12月 (2)
2016年11月 (3)
2016年09月 (3)
2016年08月 (1)
2016年06月 (1)
2016年05月 (2)
2016年04月 (3)
2016年03月 (3)
2016年02月 (3)
2016年01月 (1)
2015年11月 (7)
2015年10月 (4)
2015年09月 (4)
2015年04月 (4)
2015年03月 (5)
2015年02月 (2)
2015年01月 (3)
2014年12月 (4)
2014年11月 (4)
2014年10月 (4)
2014年09月 (8)
2014年08月 (3)
2014年07月 (5)
2014年06月 (1)
2014年05月 (4)
2014年04月 (2)
2014年03月 (2)
2014年02月 (3)
2014年01月 (5)
2013年12月 (7)
2013年11月 (4)
2013年10月 (13)
2013年09月 (15)
2013年08月 (7)
2013年07月 (7)
2013年06月 (8)
2013年05月 (7)
2013年04月 (8)
2013年03月 (12)
2013年02月 (11)
2013年01月 (7)
2012年12月 (16)
2012年11月 (13)
2012年10月 (11)
2012年09月 (6)
2012年08月 (9)
2012年07月 (11)
2012年06月 (9)
2012年05月 (10)
2012年04月 (4)
2012年03月 (4)
2012年02月 (2)
2012年01月 (1)
2011年12月 (3)
2011年11月 (6)
2011年10月 (7)
2011年09月 (10)
2011年08月 (10)
2011年07月 (13)
2011年06月 (7)
2011年05月 (8)
2011年04月 (7)
2011年03月 (10)
2011年02月 (8)
2011年01月 (10)
2010年12月 (10)
2010年11月 (14)
2010年10月 (15)
2010年09月 (9)
2010年08月 (12)
2010年07月 (9)
2010年06月 (8)
2010年05月 (9)
2010年04月 (8)
2010年03月 (12)
2010年02月 (10)
2010年01月 (12)
2009年12月 (17)
2009年11月 (9)
2009年10月 (18)
2009年09月 (12)
2009年08月 (14)
2009年07月 (14)
2009年06月 (12)
2009年05月 (12)
2009年04月 (16)
2009年03月 (19)
2009年02月 (14)
2009年01月 (23)
2008年12月 (20)
2008年11月 (20)
2008年10月 (20)
2008年09月 (19)
2008年08月 (20)
2008年07月 (23)
2008年06月 (19)
2008年05月 (21)
2008年04月 (19)
2008年03月 (20)
2008年02月 (20)
2008年01月 (15)
2007年12月 (16)
2007年11月 (20)
2007年10月 (21)
2007年09月 (20)
2007年08月 (17)
2007年07月 (18)
2007年06月 (17)
2007年05月 (13)
2007年04月 (6)
2007年03月 (8)
2007年02月 (8)
2007年01月 (11)
2006年12月 (14)
2006年11月 (10)
2006年10月 (15)
2006年09月 (14)
2006年08月 (9)
2006年07月 (15)
2006年06月 (12)
2006年05月 (11)
2006年04月 (18)
2006年03月 (19)
2006年02月 (11)
2006年01月 (15)
2005年12月 (11)
2005年11月 (11)
2005年10月 (12)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。