タグ: CSS, Web制作

トップページ > サイト作成 > スタイルシート > 文字の設定

文字の設定

文字色の指定 color

文字色を設定することができます。

color : Webカラー

Webカラーには"#FF0000"や"red"といった指定をします。

フォントの形状 font-style

フォントの形状を設定することができます。

font-style: 書体

書体には

• normal ： 標準（指定しない場合はこの指定となります）
• italic ： イタリック
• oblique： 斜体

で指定します。

リンクの下線 text-decoration

リンクの下線を表示・非表示することができます。

text-decoration: 設定

設定には"none"でリンクの下線を消す場合にのみ指定します。

フォントの太さ font-weight

フォントの太さを設定することができます。

font-weight: サイズ

サイズには、

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

で指定します。

フォントの装飾 text-decoration

フォントに装飾を設定することができます。

text-decoration: 装飾

装飾には、

• none　　　： 標準（指定しない場合はこの指定となります）
• underline ： 下線
• overline　： 上線
• line-through ： 取り消し線

で指定します。

フォントサイズ font-size

フォントのサイズを設定することができます。

font-size: サイズ

サイズには、

• medium　： 標準（指定しない場合はこの指定となります）
• xx-small： 小2
• x-small ： 小1
• small　 ： 小
• medium　： 標準
• large　 ： 大
• x-large ： 大1
• xx-large： 大2
• smaller ： 一段階小さい
• larger　： 一段階大きい
• 数値pt　： ptでの指定
• 数値px　： pxでの指定
• 数値%　 ： %での指定

で指定します。

文字の変換 text-transform

文字を大文字・小文字といった変換をすることができます。

text-transform: 変換

変換には、

• none　　　： 標準（指定しない場合はこの指定となります）
• capitalize： 先頭文字のみ大文字
• uppercase ： 大文字
• lowercase ： 小文字

で指定します。

フォントの種類 font-family

フォントを指定することができます。
しかし、閲覧者の端末にフォントがない場合があるので注意が必要です。

font-family: フォント

フォントには、

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

で指定します。

ルビの揃え ruby-align

"ruby"タグを指定している場合、ルビの横揃えの設定をすることができます。

ruby-align : ルビ

ルビには、

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

で指定します。

ルビの位置 ruby-position

"ruby"タグを指定している場合、ルビの位置を設定することができます。

ruby-position : ルビ

ルビには、

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

で指定します。

スモールキャップ font-variant

大文字の字体をそのまま小さくすることができます。

font-variant: サイズ

サイズには、

• normal　　： 標準（指定しない場合はこの指定となります）
• small-caps： 小型英大文字

で指定します。

関連記事