Article Category

분류 전체보기 (230)
DS/ALGORITHUM (2)
OS (0)
C/C++/MFC (4)
VB/C# (1)
JAVA/JSP (71)
Java (13)
Jsp (1)
Struts1 (0)
Struts2 (13)
Css (8)
Source (36)
DATABASE (18)
PHP (7)
SE (10)
Project (10)
Flex (3)
Document (34)
TIP (47)
JAPANESE (11)

Notice

Recent Article

Recent Comment

Recent Trackback

'JAVA/JSP/Css'에 해당되는 글 8건

  1. 2010.09.08 css

css

| JAVA/JSP/Css 2010. 9. 8. 10:59
Posted by S & S

wordBreak.js
CSSによるフォントサイズの指定は「font-size」属性を使って簡単に設定することができますが、ピクセル指定などの絶対的サイズで統一する方法にくらべて非常にやっかいなのが、相対的なサイズによるサイズの統一です。

ブラウザによって異なる、フォントサイズの境界

例えば「font-size:70%」というふうに指定して、Internet Explorer 6とFirefox2.0で見てみたページが以下のようなものです。　※ページはxmlタグつきのXHTML1.0 Strictで作成、つまりInternet Explorer6は下位互換モードで表示されていますが、標準モードでも同じサイズで表示されます。

css_font_size_differ.jpg

あきらかにFirefoxで表示されたページのフォントサイズが小さくなっていることがわかります。　このように、フォントをパーセント指定した場合は、その数値によってフォントサイズを規定する境界に微妙なずれがあり、WEBページの製作者はこの点を理解してフォントのサイズを指定する必要があります。

と煽っておいてなんですが、手軽に指定する方法があります。　それはYahoo! User Interface Library（通称「YUI」）というJavaScriptのライブラリ内で利用されているfonts.cssの中のフォントサイズチャートに倣って指定すれば良いのです。

準備

まず、基本となるフォントサイズを指定します。　YUIに倣うと、bodyタグとtableタグへのスタイル追加で以下のような指定を行います。　でもこれでは日本語フォントをサポートしている指定方法ではないので、デフォルトでは「ＭＳＰゴシック」を適用させるようにしておきます。　これによって、基本となるフォントサイズ（font-size:100%）が13ピクセルになります。　　基本フォントがゴシック系になってしまうのが難点ですが。。

body {


    font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;


    *font-size:small;


    *font:x-small;


}


table {


    font-size:inherit;


    font:100%;


}

CSSフォントサイズチャート

次に、Yahoo!開発チームが検証した「フォントサイズをピクセル指定からパーセント指定にした場合に何パーセントになるか」のチャートに従って、パーセンテージを指定します。　以下のチャートは独自にルーラーを付加したバージョンです。　ピクセル数に対する幅の一致をお持ちのブラウザごとに確認してみてください。　ブラウザごとでも幅が一致していることがお分かりでしょうか。

指定ピクセル ピクセル表示 指定％ ％表示
10pixel サンプル sample 77% サンプル sample
11pixel サンプル sample 85% サンプル sample
12pixel サンプル sample 93% サンプル sample
13pixel サンプル sample 100% サンプル sample
14pixel サンプル sample 108% サンプル sample
15pixel サンプル sample 116% サンプル sample
16pixel サンプル sample 123.1% サンプル sample
17pixel サンプル sample 131% サンプル sample
18pixel サンプル sample 138.5% サンプル sample
19pixel サンプル sample 146.5% サンプル sample
20pixel サンプル sample 153.9% サンプル sample
21pixel サンプル sample 161.6% サンプル sample
22pixel サンプル sample 167% サンプル sample
23pixel サンプル sample 174% サンプル sample
24pixel サンプル sample 182% サンプル sample
25pixel サンプル sample 189% サンプル sample
26pixel サンプル sample 197% サンプル sample

小数点第一位までこだわる辺り、プロだなといった感じです。　また新たに奇妙なブラウザが登場したら更新されるかもしれません。　ひとまず現状ではこれで大丈夫なようです。

動作確認： IE7, IE6, Firefox2, Safari3, Opera9

追記：Opera9では22pixel以降の%指定で若干小さく表示される、という問題が発生しています。参考にされる場合はご注意を。（解決案をご存知の方はお知らせいただけると幸いです。）

簡単にまとめてみた

サイズ指定もこんな感じでクラスにしておくと便利ですね。

body {


    font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;


    *font-size:small;


    *font:x-small;


}


table {


    font-size:inherit;


    font:100%;


}


.text10 { font-size:77%; }


.text11 { font-size:85%; }


.text12 { font-size:93%; }


.text13 { font-size:100%; }


.text14 { font-size:108%; }


.text15 { font-size:116%; }


.text16 { font-size:123.1%; }


.text17 { font-size:131%; }


.text18 { font-size:138.5%; }


.text19 { font-size:146.5%; }


.text20 { font-size:153.9%; }


.text21 { font-size:161.6%; }


.text22 { font-size:167%; }


.text23 { font-size:174%; }


.text24 { font-size:182%; }


.text25 { font-size:189%; }


.text26 { font-size:197%; }


WebMoney ぷちカンパ  Yahoo!ブックマーク  favicon  はてなブックマーク  livedoorリーダー Buzzurl

関連情報

コメントフォーム

저작자표시 비영리 동일조건

'JAVA/JSP > Css' 카테고리의 다른 글

慌てずにこうすればOK キーボードのトラブルも恐くない！  (0) 2010.09.08
영역을 넘어가는 연결된 문자 줄 바꿈하는 방법론  (0) 2010.09.07
억지춘향줄바꿈..?  (0) 2010.09.07
文字限定  (0) 2010.08.05
범위내 확장 축소..  (0) 2010.06.02
And
prev | 1 | 2 | 3 | 4 | 5 | ··· | 8 | next

Tag Cloud

Calendar

«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28

Archive

My Link

티스토리툴바