WEBOLVE -Webクリエイター 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: フォント

フォントには、

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

で指定します。

ルビの揃え 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 : 小型英大文字

で指定します。

2005 - 2008 Copyright Webolve. All Rights Reserved.