コーディング
schedule2011.5.1

フォント属性に関してのシート｜CSSプロパティ

CSS

CSSで制御する事のできるフォント（文字）に関する属性のリストです。文字の見た目を変える場合に指定する属性をまとめました。

CSS フォント プロパティ

font: ★ ★ ★ ★ ★;

個別プロパティ
  • font-style
  • font-variant
  • font-weight
  • font-size（必須）
  • line-height
  • font-family（必須）

fontに関する属性をまとめて指定。『font-size』と『font-family』は必ず含めなければならない。

書き順は以下の通り：※属性同士は半角でわける。フォントは,でわける。
font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family]; 

/* 全て */
font: italic normal bold 100%/150% "ＭＳ Ｐゴシック",sans-serif;
 
/* 最小限 */
font: 100% sans-serif;
 
/* 『font-style』『font-variant』『font-weight』は順不同 */
font: bold normal italic 100% "ＭＳ Ｐゴシック",sans-serif;

font-family: ★;

値
  • フォントファミリ名
  • sans-serif（ゴシック体）
  • serif（明朝体）
  • cursive（筆記体）
  • fantasy（装飾系）
  • monospace（等幅系）

フォントの種類を指定できる属性。左に記述した値から順に候補に選ばれる。
ユーザーのPC環境に依存するのでインストールされていない書体は表示されない。

/* 一般的な書体 ゴシック体 */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 
/* 一般的な書体 明朝体 */
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;

/* ゴシックor明朝 */
font-family: sans-serif;
font-family: serif;

font-size: ★;

数値指定（相対）
  • px（ディスプレイのドット）
  • em（1em = 100%）
  • %（1文字分）
  • ex（xの大きさ）
数値指定（絶対）
  • mm（1mm）
  • cm（10mm）
  • in（2.54cm）
  • pt（1in = win:72pt / mac:96pt）
  • pc（12pt）

フォントの大きさを指定できる属性。値をパーセントで指定した場合、親要素の値に依存する。

/* 設定されている値を継承しての大きさ */
font-size: 1em;
font-size: 100%;

font-size: 0.5em;　※50%になる
 
/* ディスプレイに対して絶対的な大きさ */
font-size: 10mm;
font-size: 10pt;

color: ★;

値
  • RGB(#******)
  • カラーネーム

文字の色を指定できる属性。
値には色のRGBコード、またはカラーネームを記述する。
コード：#ffffff　ネーム：red

/* RGBコード */
color: #000000;
 
/* カラーネーム */
color: black;

font-style: ★;

値
  • normal
  • italic
  • oblique

イタリック体と斜体を指定できる属性。デフォルトの値はnomalで指定してある。

font-style: italic;

font-weight: ★;

値
  • normal
  • bold
数値
  • 100〜900
相対的指定
  • lighter（一段細く）
  • bolder（一段太く）

文字の太さを指定する属性。デフォルトの値はnomalで指定してある。

残念ながら数値で指定しても『標準』『太文字』でしか表されないので指定しない。

font-weight: bold;

text-decoration: ★;

値
  • none
  • underline（下線）
  • overline（上線）
  • line-through（取り消し線）
  • blink

文字の装飾にライン指定する属性。値に『blink』を指定して点滅も可能。ただし対応するブラウザはほとんどない。

デフォルトはnoneで指定してある。半角スペースで区切ると複数指定可能。

リンク要素は値にunderlineが指定されている。

/* ひとつの属性だけ指定 */
text-decoration: underline;

/* 複数指定も可能 */
text-decoration: underline overline;

/* aリンクのアンダーラインを消す場合 */
a {
    text-decoration: none;
}

font-variant: ★;

値
  • normal
  • small-caps

英文で記述されたテキストの小文字をサイズ変更せずに大文字表示させる属性。

font-variant: small-caps;

text-transform: ★;

値
  • none
  • capitalize（頭を大文字）
  • lowercase（全て大文字）
  • uppercase（全て小文字）

英文で記述されたテキストの大文字と小文字を指定できる属性。デフォルトはnoneで指定してある。

text-transform: capitalize;

最新記事一覧

もっと見る