アジェンダ
- フォント
- 文字のスタイル
- 文字のスモールキャップ
- 文字の太さ
- 行間(行の幅)
- 文字の配置
- 実践
フォント
フォントを指定する場合、以下のように書く。
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="./style.css">
<title>ふぉんとぉ？</title>
</head>
<body>
<h1>Is that font?</h1>
<p class="serif left">この行はserifで表示しています！</p>
<p class="sans-serif center">この行はsans-serifで表示しています！</p>
<p class="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の文字とリスト）