TOPページ >  文字を修飾する(書体、色、大きさなど...) > 文章の書体、サイズ、行の高さ、スタイルをまとめて指定する

文章の書体、サイズ、行の高さ、スタイルをまとめて指定する

文章の書体、サイズ、行の高さ、スタイルをまとめて指定することができます。

e3.gif n2.gif
<タグ名 style="font:イタリックや斜体の指定 スモールキャップスの指定 文字の太さ 文字の大きさ/行の高さ 書体">スタイルを指定する文字</タグ名>

というふうに、スペースで区切って指定内容を併記します。

  1. タグ名: <p>や<div>、<span>などが一般的ですが、他にも下記のタグが使用できます。 e3.gif n2.gif
    ■ブロックタグ  bodyaddressblockquotedivdirdlformh1~h6menuolpreplaintexttableulxmp
    ■インラインタグ  abbigblinkcitecodeemfontiinputkbdssampselectsmallspanstrikestrongsubsuptdtextareattuvar
  2. イタリックや斜体の指定: 下記のキーワードで指定できます。 e3.gif n2.gif
    キーワード 文字のスタイル
    normal 通常
    italic イタリック体
    oblique 斜体
  3. スモールキャップスの指定: 下記のキーワードで指定できます。 e3.gif
    キーワード 文字のスタイル
    normal 通常
    small-caps スモールキャピタル
  4. 文字の太さ: 下記のキーワードまたは数値で指定できます。 e3.gif n2.gif
    キーワード 文字の太さ
    normal 通常
    bold 太字
    bolder より太く
    lighter より細く
    数値
    100(細い)~900(太い)
    ※100刻みで指定
  5. 文字の大きさ: 文字の大きさは、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。 e3.gif n2.gif
    絶対
    サイズ
    意味
    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 標準
    xx-large 超特大
    x-large 特大
    large
    相対サイズ
    キーワード
    文字の大きさ
    smaller より小さく
    larger より大きく
  6. 行の高さ (→詳しくはこちら): 行の高さは、下記の絶対サイズまたは相対サイズから指定できます。 e3.gif n2.gif
    絶対
    サイズ
    意味
    in インチ( 1 in = 25.4 mm )
    cm センチメートル
    mm ミリメートル
    pt ポイント( 1 pt = 1/72 in)
    pc パイカ( 1 pc = 12 pt )
    px ピクセル(表示上の 1 ドット幅)
    相対
    サイズ
    意味
    em 基準書体の文字の高さ
    ex 基準書体の文字 x の高さ
    % 基準書体のサイズに対する百分率
    数字のみ 基準書体のサイズに対する倍率
    ※正確にはデバイス依存の相対サイズ
  7. 書体名 (→詳しくはこちらe3.gif n2.gif
    ' Osaka ' , ' 極細明朝 '
    というふうに、' (シングルクォート)で囲った上に、,(カンマ)で区切って複数指定することができます。これは、ブラウザのシステムが対応していない場合に、代わりに表示する書体を指定するためです。

サンプルソースです。

<div style="font:italic 16px/2em '極細明朝' ,MS 明朝'"> この段落は、イタリック体、文字の大きさ 16ピクセル、行の高さ 2em、<br> 書体は極細明朝、なければMS 明朝で表示されます。<br> Netscape では、フォント名に日本語を指定すると無視されます。 </div>

これを表示させると、次のようになります。

この段落は、イタリック体、文字の大きさ 16ピクセル、行の高さ 2em、
書体は極細明朝、なければMS 明朝で表示されます。
Netscape では、フォント名に日本語を指定すると無視されます。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
文字の大きさを指定する(FONTタグ)
文字の修飾方法を指定する
文字を点滅させる
ルビ(ふりがな)の位置揃えを指定する
ルビ(ふりがな)の表示位置を指定する
文字にルビ(ふりがな)を付ける
文章の一部にスタイルを適用する
文字を等幅文字にする
文章の書体、サイズ、行の高さ、スタイルをまとめて指定する
文章の書体を指定する(スタイル指定)
文章の段落を指定する
文字をイタリック/斜体にする
文字の書体を指定する(専用タグ)
文字に下線をつける(アンダーライン)
文字を見え消しにする(取消線)
文字を強調する
文字の太さを指定する
文字を太字にする
上付き/下付き文字にする
文字の色を変える
文字を一段大きく/小さくする
文字の大きさを指定する(スタイル指定)
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス