文字サイズを変更するfont-sizeプロパティ
font-size

 文字サイズを変更できます。もし、Webブラウザに対応するサイズがなければ、最も近い値の文字サイズが自動で選択されます。文字サイズを変更する際は、ピクセルで固定的な値を指定するのではなく、%の相対的な値を指定するようにしましょう。

 そうすることにより、古いWebブラウザでの問題点を回避でき、またユーザー自身で文字サイズ変更が可能です。

基本データ

構文 セレクタ{font-size:値;}
継承
絶対的なサイズをキーワードを使って指定する場合
xx-small、x-small、small、medium、large、x-large、xx-large
相対的なサイズをキーワードを使って指定する場合
larger、smaller
絶対的なサイズをpx(ピクセル)を使って指定する場合
○○px
相対的なサイズをキーワードを使って指定する場合
○○%、○○em
親から継承させる場合
inherit
効果 文字サイズを変更する
初期値 すべての要素
適用箇所 ブロック要素

ほげほげですね。

ほげほげですね。

ほげほげですね。

ほげほげですね。

ほげほげですね。
p { font-size: 1.5em;}
#col { font-size: 140%}
.ab { font-size: x-large; }
div#col h2 { font-size: 16px;}
blockquote { font-size: larger }

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.fontSize

jQueryを使った参照方法

$('【セレクタ】').css('font-size','【値】');
$('【セレクタ】').css({'font-size':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間