TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～CSS第4の1回～

# アジェンダ
* フォント
* 文字のスタイル
* 文字のスモールキャップ
* 文字の太さ
* 行間(行の幅)
* 文字の配置
* 実践


# フォント
フォントを指定する場合、以下のように書く。

```
font-famiry: フォント名1, フォント名2, フォント名3, ...;
```
フォントには次のようなルールがある。

* 複数のフォントを指定した場合、先に記載したフォントが優先して使用される。
* 閲覧者のPCに、指定したフォントがない場合、次に記載したフォントが使用される。
* 閲覧者のPCに、記載したフォントが全てない場合、初期値のフォントが使用される。

閲覧者ごとにWebページの見た目が著しく変わってしまうことを防ぐために、最後に以下のフォントを指定するのが好ましい。
<dl>
  <dt>serif</dt>
  <dd>明朝のように、文字の端に突起(?)が付いているフォント。</dd>
  <dt>sans-serif</dt>
  <dd>ゴシックのように、文字の太さが統一されているフォント。</dd>
  <dt>monospace</dt>
  <dd>全ての文字の幅が等しいフォント。主にソースコードを表示させる時に用いる。</dd>
</dl>

# 文字のスタイル
文字のスタイルを指定する場合、以下のように書く。

```
font-style: 値;
```
値は以下の単語で指定する。
<dl>
  <dt>normal</dt>
  <dd>通常</dd>
  <dt>italic</dt>
  <dd>斜体</dd>
  <dt>oblique</dt>
  <dd>斜体</dd>
  <dt>inherit</dt>
  <dd>親要素の値を引き継ぐ</dd>
</dl>

# 文字のスモールキャップ
文字のスモールキャップを指定する場合、以下のように書く。

```
font-variant: 値;
```
値は以下の単語で指定する。
<dl>
  <dt>normal</dt>
  <dd>通常</dd>
  <dt>small-caps</dt>
  <dd>スモールキャップを適応させる(全てのアルファベットは、表記は大文字・サイズは小文字で表示される)</dd>
  <dt>inherit</dt>
  <dd>親要素の値を引き継ぐ</dd>
</dl>

# 文字の太さ
文字の太さを指定する場合、以下のように書く。

```
font-weight: 値;
```
値は、単語か数値で指定する。
単語は、以下のようなものが存在する。
<dl>
  <dt>lighter</dt>
  <dd>やや細い。</dd>
  <dt>normal</dt>
  <dd>普通(数値の400と等しい)</dd>
  <dt>bolder</dt>
  <dd>やや太い</dd>
  <dt>bold</dt>
  <dd>太い(数値の700と等しい)</dd>
  <dt>inherit</dt>
  <dd>親要素の値を引き継ぐ</dd>
</dl>
尚、フォントによっては、表現できない太さが存在する場合がある。
表現できない場合、指定が無視され、デフォルトの太さが使用される。

# 行間(行の幅)
行間を指定する場合、以下のように書く。

```
line-height: 値;
```
値は数値で指定する。

lihe-heightの示す幅は以下の画像の通り。
行間というよりは、行の幅である。
![line-height.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/551456c4-33e3-22e1-2083-023cc887c1a5.png)


# 文字の配置
文字の配置を指定する場合、以下のように書く。

```
text-align: 値;
```
値は単語で指定する。
単語は、以下のようなものが存在する。
<dl>
  <dt>left</dt>
  <dd>左寄せ</dd>
  <dt>center</dt>
  <dd>中央寄せ</dd>
  <dt>right</dt>
  <dd>右寄せ</dd>
  <dt>justify</dt>
  <dd>両端揃え(アルファベットの文書のみ可能)</dd>
</dl>
# 実践
上記内容を用いて、以下のindex.htmlとstyle.cssを作成した。

```html: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>
```

```css: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ブラウザに表示させるとこんな感じ。
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/37d069f7-7c36-bf73-b283-5f8882edaa78.png)
sans-serifの日本語フォントは斜体に対応していないが、monospaceの日本語フォントは斜体に対応しているようだ。
また、small-capsはちょっとおしゃれ。

# おわりに
今回は、フォントについて学んだ。
読みやすく、かつおしゃれなサイトを作るためには、フォントや表記はとても重要だ。

次回 >> [ここ](https://qiita.com/MakoMakoMakotsu/items/9cfaf57bd9e8b530f38d)

## 参考
[4-1 フォントの指定（CSSの文字とリスト）](https://www.youtube.com/watch?v=AI2uNO48txI&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=16)
[4-2 文字の太さの指定（CSSの文字とリスト）](https://www.youtube.com/watch?v=3L9CR1MPYsg&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=17)
[4-3 文字のスタイルの指定（CSSの文字とリスト）](https://www.youtube.com/watch?v=3X4HvmjW9OA&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=18)
[4-4 行間の指定（CSSの文字とリスト）](https://www.youtube.com/watch?v=VIfF8CGD570&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=19)
[4-5 文字の配置（CSSの文字とリスト）](https://www.youtube.com/watch?v=MV7038MeHXM&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=20)