テキストスタイル
親記事
css使い方内容
- フォントの種類を変える
- フォントのサイズを変える
- 文字の太さを変える
- 下線や打ち消し線を加える
- 文章の行間を設定する
- フォントの設定を一括で行う場合
フォントの種類を変える
プロパティはfont-familyを用いる。ユーザの環境によってはフォントがインストールされていない場合がある。その際はそのフォント種類で表示されない。こういう場合に備えて値を連続で書くこともできる。
font-familyの値リスト:http://www.htmq.com/style/font-family.shtml
また値は’’で括る具体的なフォントと’’を必要としないフォントがある点に注意。
値としてgoogle web fontsを用いることもできる。
Google Fonts
Google Fonts + Japanese • Google Fonts + 日本語
フォントのサイズを変える
プロパティはfont-sizeを用いる。値は多くの種類がある。値を2つの種類に分けることができる。絶対単位（mm,cm,in,pt,pc)と相対単位(em,ex,px,%)。
webページのスタイリングにおいて大きさの指定は相対のが望ましいとされる。
em:親要素の高さに対する倍率で長さ、高さを指定
ex:親要素の高さに対する倍率で長さ、高さを指定
px:画面を構成する点に対する倍率で長さ、高さを指定
%:親要素を基準にしてサイズを指定
文字の太さを変える
プロパティはfont-weightを使う。値には数値とキーワードの２種類がある。数値は100から900まで。キーワードはbolder,bold,normal,lighter等の種類がある。
下線や打ち消し線を加える
プロパティはtext-decorationを用いる。
| 値 | 効果 |
|---|---|
| none | ハイパーリンクの下線部を消すのに使ったりする。 |
| underline | テキストの下に線を引く。 |
| overline | テキストの上に線をつける。 |
| line-through | 打ち消し線を引く。 |
文章の行間を設定する
プロパティはline-heightを用いる。値の種類は以下の通りである。
normal(デフォルト), 100px, 1.5(フォントサイズの1.5倍の大きさが行間になる）, 200％（フォントサイズの200％文が行間となる。）
フォントの設定を一括で行う場合
fontというプロパティを用いる。値の順番は 太さ、大きさ/行間、font-familyである。
header h2 {
font : bolder 80px/80px serif
}
