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

CSS

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

CSS フォントプロパティ

font: ★ ★ ★ ★ ★;※属性をまとめて記述する
font-family: ★;※フォントの種類
font-size: ★;※大きさ
color: ★;※文字色
font-style: ★;※イタリックor斜体
font-weight: ★;※太さ
text-decoration: ★;※文字の装飾
font-variant: ★;※英文の小文字サイズで大文字で表示
text-transform※英文の大文字、小文字を変換

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;
}