タグ: ウェブサイト作成

トップページ > サイト作成 > スタイルシート（CSS）の基本とプロパティの一覧 > スタイルシート（CSS）で文字色やフォントを設定する方法

スタイルシート（CSS）で文字色やフォントを設定する方法

[最新更新] 2022年07月09日
[初回公開] 2013年05月22日

スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から文字色やフォントを設定する使い方と実際に指定するプロパティを紹介する。

1. スタイルシート（CSS）で文字を設定するメリット

スタイルシート（CSS）で文字に対して色やフォントを設定するメリットとしては、伝えたい内容の印象が変わったり、見やすさの向上につながる。
例えば連絡事項や説明文においてはフォントの種類を明朝体にすることで引き締まった印象を与える。
繁体に親しみやすさを与えたい場合はゴシック体を利用するとよい。

また、文字のサイズを大きくすることで利用者が見やすくなり、ルビを振っている場合は本文の邪魔にならないようにルビの位置を指定するのも CSS で行うことができる。

2. スタイルシートの文字に関するプロパティ

スタイルシートの文字に関するプロパティは、主に文字自体に対するものと、文字の装飾、ルビの大きく 3 つに分類される。
特にフォントのサイズ（font-size）、フォントの太さ（font-weight）、フォントの種類（font-family）は一般的によく利用されるプロパティである。

2-1. 文字色を付ける（color）

スタイルシートで文字に色を付ける場合はプロパティ「color」を次のように利用する。
{Web カラー} には #FF0000 や red といった HTML タグで色を指定する値を入力する。

color: {Web カラー}

2-2. フォントの形状を変える（font-style）

スタイルシートで文字の形状を変えたい場合はプロパティ「font-style」を次のように利用する。
font-style を指定していない場合は normal と同様の扱いとなり、イタリックと斜体にしたい場合は {書体} に明示的に指定する。

font-style: {書体}

• normal ： 標準（指定しない場合の初期値）
• italic ： イタリック
• oblique： 斜体

2-3. フォントの太さを変える（font-weight）

スタイルシートで文字の太さを変えたい場合はプロパティ「font-weight」を次のように利用する。
font-weight を指定していない場合は normal と同様の扱いとなり、bold で一定の太さを指定したり、数値による指定を行うことができる。

font-weight: {太さ}

• normal　： 標準（指定しない場合の初期値）
• lighter ： 一段階細い
• bold　　： 太い（数字指定 700 と同等）
• bolder　： 一段階太い
• 100～900までの数値 ： 任意指定

2-4. フォントに下線や打ち消し線を加える（text-decoration）

スタイルシートで文字に下線や打ち消し線を付けたい場合はプロパティ「text-decoration」を次のように利用する。
text-decoration を指定していない場合は線が無い none と同様の扱いとなる。
また、A タグを使ったリンクは自動的に下線が付くため、この下線を非表示にしたい場合は none を指定することで消すことができる。

text-decoration: {装飾}

• none　　　： 標準（指定しない場合の初期値。またはリンクの下線を除去）
• underline ： 下線
• overline　： 上線
• line-through ： 取り消し線

2-5. フォントサイズを変える（font-size）

スタイルシートで文字のサイズを変えたい場合はプロパティ「font-size」を次のように利用する。
font-size を指定していない場合は medium と同様の扱いとなる。
small や large といった一定のサイズの指定の他、{数値}px といったように単位を付与することで明確にサイズを指定することも可能である。

font-size: {サイズ}

• medium　： 標準（指定しない場合の初期値）
• xx-small： 小2
• x-small ： 小1
• small　 ： 小
• large　 ： 大
• x-large ： 大1
• xx-large： 大2
• smaller ： 一段階小さい
• larger　： 一段階大きい
• {数値}pt： pt での指定
• {数値}px： px での指定
• {数値}% ： % での指定
• {数値}em： em での指定

2-6. 文字の大文字と小文字を指定する（text-transform）

スタイルシートで文字の大文字と小文字を切り替えたい場合はプロパティ「text-transform」を次のように利用する。
text-transform を指定していない場合は none と同様の扱いとなる。
対象の文字全てを大文字や小文字にする他、先頭文字のみ大文字にすることも可能である。

text-transform: {値}

• none　　　： 標準（指定しない場合の初期値）
• capitalize： 先頭文字のみ大文字
• uppercase ： 大文字
• lowercase ： 小文字

2-7. フォントの種類を変える（font-family）

スタイルシートで文字の種類を変えたい場合はプロパティ「font-family」を次のように利用する。
{フォント} には直接フォント名を指定できる他、指定するフォントが無い場合は sans-serif のように利用者が利用しているパソコンにインストールされているゴシック体のいずれかのフォントを利用するといった指定が可能である。

font-family: {フォント}

• フォント名 ： MS P ゴシック、Osaka など
• sans-serif ： ゴシック系フォント（MS P ゴシック、Arial など）
• serif　　　： 明朝系フォント（MS P 明朝、Times New Roman など）
• cursive　　： 草書体系フォント（Caflisch Script など）
• fantasy　　： 装飾フォント（Critter など）
• monospace　： 等幅フォント（MS ゴシックなど

また、フォントを明示的に指定する場合はカンマ区切りでフォント名を記載することで複数指定することも可能である。

2-8. ルビの位置を揃える（ruby-align）

スタイルシートでルビの位置を揃えたい場合はプロパティ「ruby-align」を次のように利用する。
ruby-align を利用する場合は、別途 ruby タグで文章を構成している必要がある。

ruby-align: {ルビの位置}

• left　 ： 左揃え
• center ： 中央揃え
• right ： 右揃え
• distribute-letter ： 均等
• distribute-space ： 前後に空白＋均等
• line-edge ： テキストの状態による
• auto ： 自動

2-9. ルビの位置を指定する（ruby-position）

スタイルシートでルビの位置を指定する場合はプロパティ「ruby-position」を次のように利用する。
ruby-position を利用する場合は、別途 ruby タグで文章を構成している必要がある。

ruby-position: {ルビの位置}

• above　： 文字の上
• inline ： 文字の後ろ

2-10. 大文字の字体を小さくする（font-variant）

スタイルシートで大文字の自体を小さくしたい場合はプロパティ「font-variant」を次のように利用する。
font-variant を指定していない場合は normal と同様の扱いとなる。

font-variant: {値}

• normal　　： 標準（指定しない場合の初期値）
• small-caps： 小型英大文字

関連記事