CSSでよく使う、テキストの装飾

今回は、CSSでよく設定するテキストを装飾する為のプロパティを紹介します。
テキストの装飾は、ほぼ全てのWEBサイトで必須になってくるので、少しずつ覚えていきましょう。

文字の色を設定するcolorプロパティ

文字の色を設定する時に使うのがcolorプロパティです。値には、色の名前か、カラーコードを使います。

上記の様に設定すると、段落の文字が赤くなります。

文字の大きさを設定する、font-sizeプロパティ

文字の大きさを設定する時に使うのがfont-sizeプロパティです。値の指定には、幾つかの方法があって、パーセントや相対値、絶対値などで指定する事が出来ます。

上記の様に設定すると、段落の文字の大きさを25pxにする事が出来ます。

文字の太さを設定する、font-weightプロパティ

文字の太さを設定する時に使うのが、font-weightプロパティです。値は、大きく2通りの指定方法があります。
下記の9段階の数値を使う方法

100-最も細い
200
300
400
500
600
700
800
900-最も太い

名称で指定する方法

normal
bold

一般的には、後者で指定する事が殆どです。細かく太さを指定しても、細い太さのデータを持っていないフォントが多いので、実際にはノーマルサイズとボールドサイズの2種類しか表示されない事が殆どだからです。

上記の様に記述すると、段落の文字を太字に変える事ができます。

文字のスタイルを設定する、font-styleプロパティ

文字のスタイルをイタリックに設定する時に使うのが、font-styleプロパティです。normalかitalicを選択します。

上記の様に記述すると、段落の文字をイタリックにする事ができます。

フォントの種類を設定する、font-familyプロパティ

フォントの種類を指定したい時に使うのが、font-familyプロパティです。値には、フォントの名前が入ります。
複数指定する事が出来、記述した順に、表示しているPCにフォントがインストールされているかを調べ、インストールされていれば、そのフォントで文字を表示します。

上記のように記述すると、メイリオがインストールされていればメイリオで表示します。メイリオがインストールされていなければ、MS Pゴシックで表示し、MS Pゴシックもインストールされていない場合は、sans-serif(ゴシック体)で表示します。
このように、記述した順番が優先順位になります。
仮に、メイリオとMS Pゴシックの両方がインストールされている場合は、先に記述されているメイリオが優先されます。

文字の装飾を設定する、text-decorationプロパティ

文字に、下線などの装飾を設定する為に使うのが、text-decorationプロパティです。

上記の様に記述すると、段落の文字に下線が付きます。

文字の揃えを設定する、text-alignプロパティ

文字の揃えを設定するのが、text-alignプロパティです。文字を左揃えにしたり右揃えにしたり中央揃えにする事が出来ます。

上記の様に設定すると、文字を中央に揃える事が出来ます。

文字の行間を設定する、line-heightプロパティ

文字の行間を設定するのが、line-heightプロパティです。行間を空けたり、縮めたりする事が可能です。

上記の様に設定すると、行間を文字の1.6倍にする事が可能です。

まとめ

今回は、テキストの装飾によく使う一般的なプロパティを説明しました。
各々使い方に特徴があるので、少しずつ覚えていきましょう。