YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね

CSSでフォントサイズの指定って何でしてますか？っていうのは何年も前からある話題で最近は全然見ないですけど、特にそういう議論をしたいわけじゃなくて。

僕はYUI 3のCSS Fontsを使っていますが、%指定になるので実際何pxになるのかCSSだけでは分かりにくいときもあるので、共通CSSに下記のようなコメントでpx対応テーブルを書いておくとすぐに指定できてわかりやすいと思いますが、皆さんどうしてますか？

はYUI 3のページから持ってきて使ってますが、26pxまでしかないのがたまに不便かもですね。普通のサイト作ってるときは26px以上ってあまり使わないので困らないですけど。

共通CSSに記載するpx対応テーブル

/*-----------------------------------------------------------
 hoge.css

 フォントサイズの指定はYUI Fontsに基づき
 下記テーブルで指定します

 |px|%|
 |10|77|
 |11|85|
 |12|93|
 |13|100|
 |14|108|
 |15|116|
 |16|123.1|
 |17|131|
 |18|138.5|
 |19|146.5|
 |20|153.9|
 |21|161.6|
 |22|167|
 |23|174|
 |24|182|
 |25|189|
 |26|197|

 ex) 12px
 element {
        font-size: 93%;
 }
 ------------------------------------------------------------*/

あとは共通CSSで

div.main {
  font-size: 93%; /* 12px */
}

とかにしたら、モジュールとか個別CSSでは最初のコメントにそれ書いておくと分かりやすいですね。

リンク

何か役に立つことがあったらシェアしてみてください

このエントリーをはてなブックマークに追加

Related Entries

Comments: 4 - Leave a comment

  1. javascript forum
    Reply

    This is a good tip especially to those fresh to the blogosphere.
    Brief but very accurate info… Thank you for sharing this one.
    A must read post!

  2. santa
    Reply

    大変参考になりました。ありがとうございます！

  3. encore
    Reply

    いつもレベルの高いエントリー、楽しく読ませてもらってます。

    私の職場ではフォントサイズの％指定の際に
    下記サイトを利用してます。
    http://fordinteractive.com/tools/emchart/

    すでにご存知かもしれませんが。

    1. santa

      YUI フォント調べてやって参りました。

      ＞http://fordinteractive.com/tools/emchart/

      こちらもすごく気に入りました。
      便利ーーー。
      ありがとうございます！

Leave a comment

Trackbacks: 1

Trackback URL for this entry
Listed below are links to weblogs that reference
YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね from 5509
  1. trackback from jmblog.jp

    YUI の CSS Fonts を使う場合は Scss を利用すると管理しやすいよ

    YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509 というエントリーを見て、それ Scss を使うと便利だよと思ったので、ご紹介。

    _f…

Author

nori
nori
- UI Engineer
Location
- ,