アジェンダ
- フォント
- 文字のスタイル
- 文字のスモールキャップ
- 文字の太さ
- 行間(行の幅)
- 文字の配置
- 実践
フォント
フォントを指定する場合、以下のように書く。
font-famiry: フォント名1, フォント名2, フォント名3, ...;
フォントには次のようなルールがある。
- 複数のフォントを指定した場合、先に記載したフォントが優先して使用される。
- 閲覧者のPCに、指定したフォントがない場合、次に記載したフォントが使用される。
- 閲覧者のPCに、記載したフォントが全てない場合、初期値のフォントが使用される。
閲覧者ごとにWebページの見た目が著しく変わってしまうことを防ぐために、最後に以下のフォントを指定するのが好ましい。
- serif
- 明朝のように、文字の端に突起(?)が付いているフォント。
- sans-serif
- ゴシックのように、文字の太さが統一されているフォント。
- monospace
- 全ての文字の幅が等しいフォント。主にソースコードを表示させる時に用いる。
文字のスタイル
文字のスタイルを指定する場合、以下のように書く。
font-style: 値;
値は以下の単語で指定する。
- normal
- 通常
- italic
- 斜体
- oblique
- 斜体
- inherit
- 親要素の値を引き継ぐ
文字のスモールキャップ
文字のスモールキャップを指定する場合、以下のように書く。
font-variant: 値;
値は以下の単語で指定する。
- normal
- 通常
- small-caps
- スモールキャップを適応させる(全てのアルファベットは、表記は大文字・サイズは小文字で表示される)
- inherit
- 親要素の値を引き継ぐ
文字の太さ
文字の太さを指定する場合、以下のように書く。
font-weight: 値;
値は、単語か数値で指定する。
単語は、以下のようなものが存在する。
- lighter
- やや細い。
- normal
- 普通(数値の400と等しい)
- bolder
- やや太い
- bold
- 太い(数値の700と等しい)
- inherit
- 親要素の値を引き継ぐ
尚、フォントによっては、表現できない太さが存在する場合がある。
表現できない場合、指定が無視され、デフォルトの太さが使用される。
行間(行の幅)
行間を指定する場合、以下のように書く。
line-height: 値;
値は数値で指定する。
lihe-heightの示す幅は以下の画像の通り。
行間というよりは、行の幅である。
文字の配置
文字の配置を指定する場合、以下のように書く。
text-align: 値;
値は単語で指定する。
単語は、以下のようなものが存在する。
- left
- 左寄せ
- center
- 中央寄せ
- right
- 右寄せ
- justify
- 両端揃え(アルファベットの文書のみ可能)
実践
上記内容を用いて、以下のindex.htmlとstyle.cssを作成した。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><linktype="text/css"rel="stylesheet"href="./style.css"><title>ふぉんとぉ？</title></head><body><h1>Is that font?</h1><pclass="serif left">この行はserifで表示しています！</p><pclass="sans-serif center">この行はsans-serifで表示しています！</p><pclass="monospace right">この行はmonospaceで表示しています！</p></body></html>style.css
h1{font-variant:small-caps;}.serif{font-family:serif;font-style:normal;}.sans-serif{font-family:sans-serif;font-style:italic;}.monospace{font-family:monospace;font-style:oblique;}.left{text-align:left;}.center{text-align:center;}.right{text-align:right;}これをWebブラウザに表示させるとこんな感じ。
sans-serifの日本語フォントは斜体に対応していないが、monospaceの日本語フォントは斜体に対応しているようだ。
また、small-capsはちょっとおしゃれ。
おわりに
今回は、フォントについて学んだ。
読みやすく、かつおしゃれなサイトを作るためには、フォントや表記はとても重要だ。
次回 >> ここ
参考
4-1 フォントの指定（CSSの文字とリスト）
4-2 文字の太さの指定（CSSの文字とリスト）
4-3 文字のスタイルの指定（CSSの文字とリスト）
4-4 行間の指定（CSSの文字とリスト）
4-5 文字の配置（CSSの文字とリスト）