【HTML】文字の色や大きさを変えたい！装飾方法9つのまとめと解説　byウェブカツ　

今回は**HTMLの文字装飾方法の基礎9つ**についてまとめてみました。

## HTMLの文字装飾方法の基礎9つ

文字の装飾は、基本的にはCSSでの記述で行いますのでそれぞれのCSSの書き方を解説していきます。

### 文字色を変更したい
文字色の指定は**「color」プロパティ**を使用します。

```CSS
セレクタ { color : 色; }
```
【例】pタグの文字色を赤色にする場合の指定方法

```CSS
p { color : red; }
```
また、色の指定方法は4つあります。

#### 色名で指定
「red」「blue」「green」などの<span class="keiko_blue keiko_yellow">**色の英語表記**</span>で指定ができます。

> 英語表記での指定可能なのは140種類あります。
>
> [HTMLリファレンス > WEBカラーリファレンス > カラーネーム140色](http://www.htmq.com/color/colorname.shtml)

#### カラーコードで指定
**「#」と6桁の16進数の組み合わせ**で各色に与えられたコードで指定します。

> カラーコードが一目でわかるWEB色見本
>
> [原色大辞典](https://www.colordic.org/)

#### RGBで指定
**赤、緑、青の3色を0〜255の数字で組み合わせて**指定することができます。

> RGBと16進数カラーコードの相互変換ツール
>
> [peko-step](https://www.peko-step.com/tool/tfcolor.html)

#### RGBAで指定
RGBの指定方法に、<span class="keiko_yellow">**さらに透過度を加えて**</span>指定することができます。

> カラーコードを指定すると10種の透過度のRGBA形式に変換するジェネレーター
>
> [rgba変換ジェネレーター](https://generator.web-alpha.info/rgba/index.php#step1)

### 文字サイズを変更したい
文字色の指定は**「font-size」プロパティ**を使用します。

```CSS
セレクタ { font-size : 大きさ; }
```
【例】pタグの文字の大きさを24pxにする場合の指定方法

```CSS
p { font-size : 24px; )
```
文字の大きさの指定方法を4つご紹介します。

#### pxで指定
pxとは**1ピクセルを1とする単位**で指定することができます。

#### %で指定
**親要素のfont-sizeに対して何%かで**指定することができます。

#### emで指定
**%と同じく**親要素に対して相対的な大きさで指定することができます。

> **1em = 100%**

#### remで指定
emと同じく相対的な大きさで指定できるが、**親要素ではなくルート（html）に対して**相対的な大きさで指定することができる。

> 基本的にhtmlは16pxなので、<span class="keiko_yellow">**1rem=16px** </span>となります。
>
> html要素のサイズを変更すると1remの大きさも相対的に変わる。

### フォントを変更したい
文字の太さの指定は**「font-family」プロパティ**を使用します。

```CSS
セレクタ { font-family : フォントの種類; }
```
【例】pタグのフォントをserifにする場合の指定方法

```CSS
p { font-family : serif; )
```

#### フォントは複数指定する
OSによって表示可能かどうかが異なるため、フォントは複数設定するのが一般的です。
また、複数設定した場合、前に書いたものが優先されます。

```CSS
セレクタ { font-family : フォントA , フォントB , フォントC; }
```
フォント間は「,」で区切ります。
「フォントA」がインストールされていたら「フォントA」で表示。
→ なければ、次に「フォントB」がインストールされていたら「フォントB」で表示。
→ それもなければ、次に「フォントC」がインストールされていたら「フォントC」で表示。

【例】実際の例です。前から優先されます。

```CSS
p { font-family : "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif"; )
```

#### 最後に「総称ファミリー」を入れる
最後には必ず**「総称ファミリー」**を入れるようにしてください。
「総称ファミリー」とは、指定したフォントがいずれもインストールされていない場合に、どの系統のフォントで表示するかを指定してくれるフォントファミリーです。

* serif ：明朝体系フォント
* sans-serif ：ゴシック体系フォント
* cursive ：筆記体系フォント
* fantasy ：装飾体系フォント
* monospace ：&nbsp;等幅系フォント

### 太字にしたい
文字の太さの指定は**「font-weight」プロパティ**を使用します。

```CSS
セレクタ { font-weight : 太さ; }
```
【例】pタグの文字の太さを太字にする場合の指定方法

```CSS
p { font-weight : bold; )
```
文字の太さの指定方法も数値指定などの方法がいくつかありますが、細かく指定してもブラウザが対応していないこともあるためあまり使いません。
よく使われるのは以下の2つです。

#### bold
font-weight : bold; で**太文字**になります。

#### normal
font-weight : normal; で**普通の太さ**になります。

### 斜体にしたい
文字の斜体指定は**「font-style」プロパティ**を使用します。

```CSS
セレクタ { font-style : italic; }
```
【例】pタグの文字を斜体にする場合の指定方法

```CSS
p { font-style : italic; }
```

### 字間を変更したい
文字の間隔の指定は**「letter-spacing」プロパティ**を使用します。

```CSS
セレクタ { letter-spacing : 大きさ; }
```
【例】pタグの文字の間隔を10pxにする場合の指定方法

```CSS
p { letter-spacing : 10px; }
```
ここも大きさ指定は文字の大きさと同じく**px、em、remが使えます**。
また、「-2px」のようにマイナスの数字を使うことで文字の**間隔を狭めることも可能**です。

### 下線を引きたい
文字に下線を引くには**「text-decoration」プロパティ**を使用します。

```CSS
セレクタ { text-decoration : underline; }
```
【例】pタグの文字に下線を引く場合の指定方法

```CSS
p { text-decoration : underline; }
```
この方法は基本的な下線の引き方ですので、**下線の色は文字色と同じ**になります。
もし下線の色を変えたり、太さを変えたりしたい場合は**border-bottomプロパティ**を使うことで、そういった装飾が可能です。
### 取り消し線を引きたい
文字に取り消し線を引くには、同じく**「text-decoration」プロパティ**を使用します。

```CSS
セレクタ { text-decoration : line-through; }
```
【例】pタグの文字に取り消し線を引く場合の指定方法

```CSS
p { text-decoration : line-through; }
```

### 線で囲みたい
文字に取り消し線を引くには**「border」プロパティ**を使用します。

```CSS
セレクタ { border : 線の太さ 線の種類 線の色; }
```
【例】pタグの文字に赤色で太さが3pxの実線で囲む場合の指定方法

```CSS
p { border : 3px solid red; }
```
#### 線の種類の中から、**よく使われる4つ**をご紹介します。

##### ・solid
**1本の実線**で表示されます。

##### ・double
**2本の実線**で表示されます。

##### ・dashed
**破線**で表示されます。

##### ・dotted
**点線**で表示されます。

まとめ
---
**HTMLの文字装飾方法の基礎9つ**はHTML・CSSの学び始めでよく使いますので是非マスターしてください。

---
#### かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
[https://webukatu.com/](https://webukatu.com/)