(1) テキストのスタイル

文字の大きさ font-size

font-sizeは文字のサイズを指定するプロパティです。値は主にpxやrem，%を用います。

次の例ではpタグの文字の大きさを14pxに指定します。


        p{font-size: 14px;}
指定方法 説明
ピクセル 画面上の１画素（ピクセル）を基準とした単位。本文のサイズは、16pxが標準とされていて、14px〜18pxに設定するのが一般的です。
rem ルート要素（htmlセレクタ）で指定したサイズを基準とした割合で指定します。
em 親要素のサイズの何倍かを指定します。
% 親要素のサイズを基準とした割合で指定します。
キーワード xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
絶対的なサイズのキーワードで、ユーザーの既定のフォントサイズ (medium) を基準とします。

フォントの種類 font-family

font-familyはフォントの種類を指定するプロパティです。値で指定したフォントをユーザーがインストールしていない場合は、ブラウザで設定されているデフォルトのフォントで表示されます。値には複数のフォントを指定でき、先に指定したものから順に適用されます。

次の例ではh1タグのフォントを「ヒラギノ丸ゴ Pro W4」に指定します。もし、ユーザーが「ヒラギノ丸ゴ Pro W4」をインストールしていなければ、「游ゴシック体」にします。


        h1{font-family: "ヒラギノ丸ゴ Pro W4", "游ゴシック体";}
指定方法 説明
フォント名 フォントの名前をダブルクォート"で囲んで指定します。
キーワード sans-serif(ゴシック系)，serif(明朝系), monospace(等幅)などのキーワードで指定します。

文字の太さ font-weight

font-weightは文字の太さを指定するプロパティです。数値で指定することもできますが、通常はnormalやboldなどのキーワードで指定する方が一般的です。また、太字や細字など、太さのバリエーションが用意されていないフォントでは適用されません。

次の例では、pタグの文字の太さを太字にします。


        p{font-weight: bold;}
指定方法 説明
キーワード normal(標準)，bold(太字)，lighter(１段階細く)，bolder(１段階太く)
数値 1〜1000の任意の値。単位なし。

行の高さ line-height

line-heightは行の高さを指定するプロパティです。

次の例では、pタグの行の高さを1.5倍にします。


        p{line-height: 1.5;}
指定方法 説明
normal ブラウザが判断した行の高さで表示。
数値 px，em，%などの単位で指定する。また、単位なしの場合は、フォントサイズとの比となる。

行揃え text-align

text-alignはテキストの位置を揃えるプロパティです。日本語では、デフォルトは左揃えになっています。

次の例では、pタグの行揃えを両揃えにします。


        p{text-align: justify;}
指定方法 説明
left 左揃え
right 右揃え
center 中央揃え
justify 両端揃え

文字色 color

colorは文字の色を指定するためのプロパティです。

次の例では、bタグの文字色を赤系の#c83e36，emタグの文字色を青系の#3e687dに指定します。


        strong{color: #c83e36;}
        em{color: #3e687d;}
指定方法 説明
色名 gray，red，purpleなどの色名を使って指定する方法です。
カラーコード #808080(灰)， #FF0000（赤）， #FFC0CB（ピンク）， #800080（紫）などのように、色を16進数で表現する方法です。シャープ#のあとの２桁で赤，次の２桁で緑，最後の２桁で青の値を２桁の16進数（00〜FFまでの256階調）で指定します。
RGB値 rgb(127, 82, 31)， rgb(25%, 50%, 75%) のように赤・緑・青の３原色の値を使って色を表現する方法です。
RGBa値 RGB値に不透明度を加えた値。 rgba(255, 0, 0, 0.50)のように最後に不透明度を指定します

(2) テキストのスタイル（実践）

テキストの書式設定の例

次のHTMLファイルに下のCSSコードを書き写して、その前後でテキストの書式がどのように変化するか確認してみましょう。 


        h1{
          font-size: 40px;
          font-family: sans-serif;
          color: #ff6464;
        }

        h2{
          font-size: 24px;
          font-family: sans-serif;
          color: #6464ff;
        }

        h3{
          font-size: 20px;
          font-family: sans-serif;
          color: #64cc64;
        }

        p{
          font-family: serif;
          color: #646464;
        }

        strong{
          font-family: sans-serif;
          font-weight: bold;
        }

        em{
          font-family: sans-serif;
        }

テキストの書式設定の実践

上の例を参考にして、次のHTMLファイルに自分でCSSコードを書き、その前後でテキストの書式がどのように変化するか確認してみましょう。 


        h1{
          /* ここにプロパティと値を指定します。 */
        }

        h2{
          /* ここにプロパティと値を指定します。 */
        }

        h3{
          /* ここにプロパティと値を指定します。 */
        }

        p{
          /* ここにプロパティと値を指定します。 */
        }

        strong{
          /* ここにプロパティと値を指定します。 */
        }

        em{
          /* ここにプロパティと値を指定します。 */
        }