CSSで華やかなサイトにしたい②～文字や文章の装飾、Webフォントの使い方～

#文字や文章の装飾をしよう
今回はCSSで文字や文章の装飾をしていきます:relaxed:
文字は情報を伝えるだけでなく、ユーザーに様々な印象を与えるデザイン要素なので、Webサイト上で美しく表示できるようにしていきましょう:bangbang:


今回の記事:arrow_down:

- VSCを使ってCSSの簡単プロパティ指定
- 文字の大きさを変える「font-sizeプロパティ」
     - 適切な文字サイズは？
     - 見出しとジャンプ率
- 文字の太さを変える「font-weightプロパティ」
     - 長文に太文字は使わないほうが良い？
- フォントの種類を変える「font-familyプロパティ」
- Webフォントを使ってみよう
- 行の高さを変える「line-heightプロパティ」
- 文章をそろえよう「text-alignプロパティ」
     - 中央揃えは短文にしよう
- 文字に色を付けてみよう「colorプロパティ」

CSSの基礎文法はから確認したい人はこの記事へ:point_down_tone2:
[CSSで華やかなサイトにしたい①～CSS適用方法と基礎文法～](https://qiita.com/Yuriko-Y/items/b8a150379964b6695ce3)

#VSCを使ってCSSの簡単プロパティ指定
今回は、**VisualStudio Code(以下VSC)**を使用して、CSSを書いていきます。

インストールからプロジェクトの作成まで:point_down_tone2:
[Visual Studio Codeの導入と使い方](https://qiita.com/KotaArai0208/private/e6110d9eed6edab002be)

フォルダとファイル作成手順:point_down_tone2:
[HTML/CSS/JSデモ-cssで見た目の調整をしよう](https://qiita.com/Yuriko-Y/items/ff8f671168dd1ce0c8b3#css%E3%81%A7%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E8%AA%BF%E6%95%B4%E3%82%92%E3%81%97%E3%82%88%E3%81%86)

VSCではプロパティを指定すると候補を出してくれるので、便利です。
![GIF 2020-04-11 7-11-21.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/96507b3d-9a4e-5e17-d4f4-ab2eb1b55de4.gif)



#文字の大きさを変える「font-sizeプロパティ」
まずは、文字の大きさを変えていきましょう:wink:
**font-size**プロパティで指定します。大きさは主に「px」や「rem」、「%」を使います。

**主な値**

|  指定方法       |       説明|  
|:-----------------|------------------|
| 数値            |数値に「px」や「rem」、「%」などの単位を付ける |   
| キーワード          |xx-small,x-small,small,medium,large,x-large,xx-largeの7段階で指定できる。mediumが標準サイズ | 
 
ページ基準となる＜html＞タグに「font-size:100%」を指定すると、ブラウザーのデフォルト文字サイズ、またはユーザーがブラウザーの環境設定により調整したサイズを基準に**相対値**を設定できます。それに対し、「px」で指定したサイズは、基準サイズと関係なく**絶対値**として設定されます。

```HTML:HTML
   <h1>猫の好きな事</h1>
   <h2>毛づくろいをすることが好き</h2>
   <p>毛づくろいの目的はいくつかありますが、舌にある無数の突起をブラシ代わりにして、体を清潔にすることが大半。
    猫は、起きている時間の30〜50％を毛づくろいに費やすほどキレイ好きなんです。</p>
   
```

```css:フォントサイズ例：CSS
html{
    font-size: 100%;
}
h1{
    font-size: 2em;
}
h2{
    font-size: 20px;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/a979a3cd-43d2-2fb1-7270-bde911ba57cf.png)

※＜h1＞タグのテキスト「猫の好きな事」は「2em」が設定されているので、基準サイズである文章の2倍サイズになっています。

####適切な文字サイズは？

**適切な文字サイズ**は**14px~18px**程度に設定するのが一般的です:thumbsup_tone2:
また、デザインに統一感を持たせるため、文字サイズのバリエーションは**2~5種類**程度にとどめておきましょう。

####見出しとジャンプ率
文章の見出しをデザインする時は、文字の**ジャンプ率**についても考える必要があります。
**ジャンプ率**とは…？？:thinking:
:bulb:見出しと本文の文字サイズの比率のことです。
文字のサイズの大きさの違いが大きいと**「ジャンプ率が高い」**、小さいと**「ジャンプ率が低い」**と表現されます。ジャンプ率が高いと、躍動的で楽しい雰囲気になり、逆に低くなると上品で落ち着いた雰囲気になります。
![ジャンプ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/675c67f4-02f6-6594-cba1-32c43cd6e1a1.png)


#文字の太さを変える「font-weightプロパティ」
font-weightプロパティでフォントの太さを指定します。
1～1000の任意の数値で指定する指定することおできますが通常は「normal」「bold」などのキーボードで指定するほうが一般的です。

**主な値**

|  指定方法              |       説明|  
|:---------------------------|------------------|  
| キーワード          |normal(標準),bold(太字),lighter(一段階細く),bolder(一段階太く) |
| 数値              | 1～1000の任意の数値| 

```HTML:HTML
   <p>通常の太さのテキスト</p>
   <p class="bold">太字にしたテキスト</p>
```

```css:文字の太さ例：CSS
.bold{
    font-weight: bold;
}
```
<img width="158" alt="コメント 2020-04-10 082148.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/2729d1db-9749-5c7d-d77e-875240a15237.png">
強調したい文字は太字にすると目立たせることができます。


####長文に太文字は使わないほうが良い？
太いフォントで長い文章書くと、画面が黒々として、非常に読みづらくなってしまいます。長文の場合はすべて太字にするのは避けましょう。
太字は、見出しやキーワードに使うとメリハリが出てバランスが整います。
![amicafe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/15f6e402-5732-2130-810e-fdbb6145b6cb.png)



#フォントの種類を変える「font-familyプロパティ」
font-familyプロパティを使ってフォントの種類を指定します。CSSの設定では、複数のフォントを指定でき、「,(カンマ)」で区切って先に指定したものから順に適応されます。ブラウザーによっては日本語のフォント名を識別できないため、**英語表記のフォント名も同時**に指定しましょう。

**主な値**

|  指定方法              |       説明|  
|:---------------------------|------------------|  
|フォント名|フォントの名前を記述。日本語名やフォント名にスペースが含まれる場合は、フォント名をシングルクォーテーション「'」かダブルクォーテーション「"」で囲って指定する。 |
| キーワード|sans-serif(ゴシック体)、serif(明朝体)、cursive(筆記体)、fantasy(装飾体)、monospace(等幅)から指定する| 


以下はフォント適応例です。今回はわかりやすくh1タグにそれぞれのクラスを適応させます。(本来のh1タグの使い方としては正しくありません。)

```HTML:HTML
   <h1 class="serif">猫の好きな事</h1>
   <h1 class="gothic">猫の好きな事</h1>
   <h1 class="maru__gothic">猫の好きな事</h1>
```

```css:フォント例：CSS
.serif{
    font-family: serif;
}
.gothic{
    font-family: '游ゴシック体' , 'Yu Gothic', YuGothic, sans-serif;
}
.maru__gothic{
    font-family: 'ヒラギノ丸ゴ pro W4','Hiragino Maru Gothic Pro',sans-serif;
}
```
<img width="299" alt="コメント 2020-04-09 082102.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/69e228e4-5e82-e175-ae61-17bbb9c74550.png">

#Webフォントを使ってみよう
以前のWebページでは、ユーザーのデバイスにインストールされているフォントのみ表示することが可能でしたが、最近では、Webサーバー上にある**「Webフォント」**を使うことで、デバイスにフォントがなくても表示できるようになりました。
そんな便利なWebフォント導入の仕方を見ていきましょう:heart_eyes:

ここでは、Googleが無料で提供している**Google Font**を導入します。
手順:arrow_down:

- ①Google FontsのWebサイトにアクセス
- ②フォントを選択する
- ③HTMLファイルに読み込む
- ④CSSファイルにスタイルを指定

**①Google FontsのWebサイトにアクセス**
Google FontのWebサイト:point_down_tone2:
[Google Fonts](https://fonts.google.com/)

**②フォントを選択する**
使いたいフォントを選択します。
日本語のフォントも選ぶことができます。
![コメント 2020-04-11 073537.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/9b8328d3-6a51-f368-1fbf-f04b51f2517a.png)

選びたいフォントの右上の+ボタンを押すと場面下に黒い帯が表示されるので、クリックします。
![GIF 2020-04-11 7-44-00.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/3a730025-c126-0973-9bb4-26fc6d623d5c.gif)

**③HTMLファイルに読み込む**
「Embed Font」部分に書かれたコードをコピーします。
![コメント 2020-04-11 073946.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/a61b8d84-e438-586e-a5a8-d925937cc0b2.png)

HTMLファイルの＜head＞内に記述します。
![コメント 2020-04-11 074830.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/497945c4-3271-1159-7bf9-ed7afc588177.png)

**④CSSファイルにスタイルを指定**
「Specify in CSS」に書かれたコードをコピーし、フォントを適応させたい要素に指定します。

```HTML:HTML
    <div class="web_font">
        <h1>猫の好きな事ってなんだろう…？</h1>
        <h2>①毛づくろいをすることが好き</h2>
    </div>

    　　<h1>猫の好きな事ってなんだろう…？</h1>
    　　<h2>①毛づくろいをすることが好き</h2>
```

```css:Webフォント例：CSS
.web_font{
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
```
![コメント 2020-04-11 080002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/d23b6bd8-262a-ea09-3f26-52b93df77d80.png)

上がWebフォントを適応したものです。

うまく出来ましたか:question:
自分好みのWebフォントを探してみましょう:thumbsup_tone2:

#行の高さを変える「line-heightプロパティ」
行の高さ(行間)を指定するときは、line-heightプロパティを使います。行の高さが文字サイズより小さい場合は行が異なるので注意が必要です。

**主な値**

|  指定方法              |       説明|  
|:---------------------------|------------------|  
| normal          |ブラウザーが判断した行の高さで表示 |
| 数値(単位なし)             |フォントサイズとの比率で指定| 
| 数値(単位あり)             |「px」,「em」,「%」等の単位で数値を指定　| 


きれいに見える**おすすめの行間数値**は、**1.5~1.9**の間です。フォントや全体のデザインによって調整するのが良いでしょう。

```css:おすすめの行間：CSS
p{
  line-height: 1.7;  
}
```
違う行間のものを見比べてみると…
<img width="470" alt="コメント 2020-04-10 084912.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/ed9c1a23-82a3-3ef1-20f0-7caf55cce0d4.png">
やはり、1.7くらいがちょうどいいのではないでしょうか:point_up_tone2:

#文章をそろえよう「text-alignプロパティ」
**text-align**プロパティで、テキストをそろえる位置を指定します。日本語の場合、デフォルトで左揃えになっています。

**主な値**

|  指定方法              |       説明|  
|:---------------------------|------------------|  
| left         |左揃え |
| right            |右揃え| 
| center            |中央揃え　| 
| justify           |両端揃え　| 



「left」と「justify」を比べてみると…
「left」だと文章の右側がガタガタ不揃いですが、「justify」だと両端がきちっとなります。
![コメント 2020-04-11 064914.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/8bbba300-c113-4c82-953e-39a228f642ef.png)




####中央揃えは短文にしよう
デザインの中で中央揃えしたい場面が多々あると思いますが、中央揃えだと行のスタート位置がバラバラになってしまいます:disappointed_relieved:
それにより、段落や文章を認識しづらくしてしまいます。
2~3行より長くなる場合は**左揃えや両端揃え**にしたほうが読みやすいでしょう。

#文字に色を付けてみよう「colorプロパティ」
文字に色を付けるには、**color**プロパティを使います。ここで注意が必要なのは、**色の指定方法**です。

CSSで指定する方法は3通りあります:point_down_tone2:

- カラーコードで指定する
- RGB値で指定する
- 色の名前で指定する

わかりやすい方法としては、Googleの「カラーピッカー」を使うとよいかと思います。Googleで「カラーピッカー」と検索してみましょう:relaxed:
<img width="648" alt="コメント 2020-04-10 085510.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/1c57c3a8-59f6-357a-470b-01cb1c3ce248.png">

上記のHEXと書いてある「#」からははじまる6桁の英数字を合わせたものが**カラーコード**です。
**RGB**は赤(Red)、緑(Green)、青(Blue)の数値の組み合わせからできています。

**主な値**

|  指定方法              |       説明|  
|:---------------------------|------------------|  
|  カラーコード          |「#(ハッシュ)」で始まる3桁もしくは6桁のカラーコード指定 |
| 色の名前            |「red」「blue」などの決められた色の指定| 
| RGB値             |「rgb」から書き始め、赤、緑、青の値を「,(カンマ)」で区切って指定。透明度も含める場合は「rgba」から書き始め、赤、緑、青、透明度の値を「,(カンマ)」で区切って指定。透明度は0~1の間で記録する。　| 


```css:フォントカラー例：CSS
h1{
    color: #0bd;
}
h2{
    color: navy;
}
p{
    color: rgba(30, 30, 221, 0.842)
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/4a4b8207-956a-3dbc-83cc-dbc053a9e775.png)

文字の色が変わるだけで印象が変わりましたね:clap_tone2:
#参考文献
Mana著、「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」、SBクリエイティブ株式会社、2019年