文字の大きさを指定する(スタイル指定)
ホームページやブログなどのウェブサイトで 文字の大きさを変えたい時は、style指定が便利です。ピクセル値などの絶対サイズで細かく指定したり、LARGER/SMALLERなどのキーワードで他の文字より一段大きく/小さくなど相対的に指定したりできます。
<タグ名 style="font-size:文字の大きさ">大きさを指定する文字</タグ名>
- タグ名:PやDIV、SPANタグなどが一般的ですが、他にもほとんどのインラインタグおよびブロックタグが使用できます。
- 文字の大きさ:
文字の大きさは、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。
絶対サイズ 意味 in インチ( 1 in = 25.4 mm ) cm センチメートル mm ミリメートル pt ポイント( 1 pt = 1/72 in) pc パイカ( 1 pc = 12 pt ) px※ ピクセル(表示上の 1 ドット幅) 相対サイズ 意味 em 基準書体の文字の高さ ex 基準書体の文字 x の高さ % 基準書体のサイズに対する百分率 ※正確にはデバイス依存の相対サイズ絶対サイズ
キーワード文字の大きさ xx-small 超特小 x-small 特小 small 小 medium 標準 large 大 x-large 特大 xx-large 超特大 相対サイズ
キーワード文字の大きさ smaller より小さく larger より大きく
サンプルです。
例えば下記の文で、『東京ディズニーランド』を 18ピクセルの大きさで表示するとすると、
先週の日曜日に、<span style="font-size:18px;">東京ディズニーランド</span>へ行きました。
こんな感じが一番使いやすいと思います。これをブログの投稿欄にそのまま入力すると、こんなふうに部分的に文字の大きさを変えることができます。
先週の日曜日に、東京ディズニーランドへ行きました。
各キーワードで指定した場合のサンプルはこちら。
<div style="font-size:xx-small">超特小xx-smallです。</div>
<div style="font-size:x-small">特小x-smallです。</div>f
<div style="font-size:small">小smallです。</div>
<div style="font-size:medium">標準mediumです。</div>
<div style="font-size:large">大largeです。</div>
<div style="font-size:x-large">特小x-largeです。</div>
<div style="font-size:xx-large">超特大xx-largeです。</div>
<div style="font-size:smaller">より小さくsmaller(相対サイズ)です。</div>
<div style="font-size:larger">より大きくlargeer(相対サイズ)です。</div>
<div style="font-size:x-small">特小x-smallです。</div>f
<div style="font-size:small">小smallです。</div>
<div style="font-size:medium">標準mediumです。</div>
<div style="font-size:large">大largeです。</div>
<div style="font-size:x-large">特小x-largeです。</div>
<div style="font-size:xx-large">超特大xx-largeです。</div>
<div style="font-size:smaller">より小さくsmaller(相対サイズ)です。</div>
<div style="font-size:larger">より大きくlargeer(相対サイズ)です。</div>
このソースを表示させると、次のようになります。
超特小xx-smallです。
特小x-smallです。
小smallです。
標準mediumです。
大largeです。
特小x-largeです。
超特大xx-largeです。
より小さくsmaller(相対サイズ)です。
より大きくlargeer(相対サイズ)です。
文字の大きさを指定するには、FONTタグの size オプションを指定する方法もあります。詳しくは→文字の大きさを指定する(FONTタグ)
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス