[CSS]文字を装飾するためのプロパティまとめ

文字に対して適用できるスタイルについて、アレコレまとめてみました。

・文字色の変更
・文字のサイズを変更
・文字の太さを変更
・行の高さを調整する
・文字に装飾をつける
・フォントのスタイルを変更する
・フォントの種類を変更する
・行揃えを指定する

文字色の変更

テキストに対して使えるスタイルの中で、最もよく使うのが「色の変更」だと思います。まずは、文字色の変更方法を覚えましょう。
CSSで以下のように記述してみましょう。

p{
 color:red;
}

これをブラウザで開くとp要素のテキスト部分が赤くなっていると思います。

このようにcolorというプロパティの値を指定することでテキストの色が変わります。値の指定方法は、redやblueのように色の名前を指定する方法と16進数で表現するカラーコードを指定する方法があります。赤や青、黄色等のよく使われる色は登録されているので、そのまま色の名前を入れることでテキストの色を変更できます。

もっと細かい色合いを表現したい場合は、カラーコードを使います。カラーコードは、#ff0000のように頭にシャープ(#)をつけた6桁の数字(16進数)で表します。この6桁の数字で、RGBを指定するのですが、2桁区切りで「赤」「緑」「青」の順に色合いを16進数で指定します。colorに”#ff0000″を指定した場合、赤をフルに使って他の色は使わないので、色が赤に変更されます。

といっても、RGBを頭で考えながら16進数で指定していくのは非常に難しいので、カラーコードの一覧から選ぶ方が早いです。「カラーコード　CSS」等で検索するとたくさん出てきますので、ぜひ活用しましょう。

文字のサイズを変更

文字のサイズを変更するには、font-sizeプロパティを使います。
また、p要素に対して適用してみましょう。

p{
 font-size:20px;
}

これをブラウザで開くと、p要素のフォントサイズが20pxになります。

font-sizeはピクセルで指定する方法の他に%やemで指定する方法があります。

%: ブラウザ既定のサイズに対しての比率
em: 1emが1文字分の大きさ

色々な値が使えますが、%はブラウザによって表示が変わることもあり、emはちょっと慣れが必要なので、最初はpxで指定するのが無難です。

文字の太さを変更

文字の太さを変更するには、font-weightを使います。

p{
 font-weight:bold;
}

これをブラウザで開くと、p要素が太字になります。
font-weightの値は、normalで通常の太さ、boldで太字を指定できます。

その他に数値で太さを指定する方法もあります。数値で指定する場合、100・200・300・400・500・600・700・800・900で指定し、400が標準の太さになります。ただ、normalかboldで指定することが多いので、あまり数値で指定することはないです。そのため、normalとboldを覚えておけばOKです。

行の高さを調整する

行の高さを調整するには、line-heightを使います。

p{
font-size:14px;
line-height:50px;
}

これをブラウザで開くと、行間がぐっと広まります。

まず、font-sizeで14pxが指定されています。これで文字の大きさが14pxになります。続いて、line-heightで行の高さが50pxに指定されていますので、各行の高さは50pxになります。なので、50pxの高さのうち、14pxは文字で使って、それ以外(36px)が行間になるということです。

なお、line-heightもfont-sizeと同様に%やemで大きさを指定することができます。

文字に装飾をつける

文字に装飾をつける場合、text-decorationを使います。

p{
text-decoration:underline;
}

これをブラウザで開くと、文字に下線がつきます。
text-decorationには、以下の値を指定することができますので、それぞれ試しに適用してみましょう。

none：装飾なし
underline：下線
overline：上線
line-through：打ち消し線
blink：点滅

なお、text-decorationには複数の値を指定することができます。例えば”下線”と”上線”の両方をつけたい場合、以下のように半角スペースで区切って記述します。

p{
text-decoration:underline overline;
}

フォントのスタイルを変更する

フォントのスタイルを変えたい場合、font-styleを使います。といってもよくわからないと思うので、実際に見て覚えましょう。

p{
font-style:italic;
}

値がitalicとなっていますので、文字がイタリック体になります。
font-styleには、以下の値を指定することができます。

normal：標準
italic：イタリック体
oblique：斜体

イタリック体と斜体の違いについて、、、
イタリック体は斜めに傾けて筆記体調にデザインされたものが多く、斜体はシンプルに斜めに傾けてデザインされたものが多いです。指定したフォントにイタリック体や斜体がない場合は、ブラウザが判断してそのフォントの標準を斜めに傾けて表示します。

日本語フォントの場合、イタリック体や斜体が用意されていることがほとんどなくて、標準のものを斜めに傾けて表示しているので、イタリック体と斜体のブラウザ上での表示は同じになります。

フォントの種類を変更する

フォント自体を変更したい場合は、font-familyを使います。

p{
font-family:"ＭＳ 明朝",serif;
}

font-familyプロパティは、フォントの種類を指定する際に使用します。フォントの種類はカンマ(,)で区切って複数の候補を並べることができ、複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。

指定したフォントがユーザーの環境にインストールされていない場合は、ブラウザで設定されたデフォルトのフォントで表示されます。

行揃えを指定する

行揃えを指定する場合、text-alignを使います。text-alignはよく使いますので、必ず覚えましょう。

p{
text-align:center;
}

値にcenterが指定されているので、文字が中央揃えになります。
text-alignには、以下の値が指定できます。

left：左寄せ
right：右寄せ
center：中央揃え
justify：均等割付

文字のスタイルを変更することでガラッとWEBページの見た目も変わります。文字のスタイルを変更するためのプロパティは、紹介したようにたくさんありますので色々と値を試してみてください。