&nbsp;←これって何の呪文ですか？

&と;で挟まれている文字は**文字実体参照**と言う。
でも呪文っぽくて面白いな:star:
参考サイト→http://rinrin.saiin.net/~aor/hms/cer

##文字の間隔を調整

```jittai_sansho01.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字実体参照01</title>
    <link rel="stylesheet" href="css/jittai_sansho01.css">
  </head>
<body>
  <div class="container01">
    <p class="sansho01">
      間が&nbsp;空くよ
    </p>
    <p class="sansho02">
      間が&ensp;空くよ
    </p>
    <p class="sansho03">
      間が&emsp;空くよ
    </p>
    <p class="sansho04">
      間が　空くよ
    </p>
    <p class="sansho05">
      間が&thinsp;空くよ
    </p>
  </div>
</body>
</html>
```

```jittai_sansho01.css
.sansho01 {
	background: #fdc1c1;
}
.sansho02 {
	background: #fdf4c1;
}
.sansho03 {
	background: #c3fdc1;
}
.sansho04 {
	background: #c1fde9;
}
.sansho05 {
	background: #c1ccfd;
}
```
<img width="121" alt="20191125_Qiita01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/711f6b0b-9f6d-faf0-9180-70a8d717b593.png">
4つ目は全角スペースで空けているけど、細かい文字間は文字実体参照を使った方が良い。

| 文字実体参照 | 説明 | 備考 |
|:---------|:------------------|:-------------------|
| `&nbsp;` | 無視・改行されない空白 | no-break spaceの略 |
| `&ensp;` | nの字の幅の空白(半角スペース) | en spaceの略 |
| `&emsp;` | mの字の幅の空白(全角スペース) | em spaceの略 |
| `&thinsp;` | `&nbsp;`より狭い空白 | thin spaceの略 |
「`&nbsp`は半角スペース」と説明しているサイトがあったが、Photoshopで図ってみたら半角スペースより狭かった。

##権利の表示

```jittai_sansho02.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字実体参照02</title>
    <link rel="stylesheet" href="css/jittai_sansho02.css">
  </head>
<body>
  <div class="container02">
    <p class="sansho06">
      &copy;株式会社あいうえお&emsp;2010-2019
    </p>
    <p class="sansho07">
      商品名かきくけこ&reg;
    </p>
    <p class="sansho08">
      商品名さしすせそ&trade;
    </p>
  </div>
</body>
</html>
```

```jittai_sansho02.css
.sansho06 {
	background: #ff7c7c;
}
.sansho07 {
	background: #dcff7c;
}
.sansho08 {
	background: #7cffae;
}
```
<img width="241" alt="20191128_Qiita01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/6beba59e-fb2b-0ba4-bdfc-df82dcd10916.png">

| 文字実体参照 | 説明 | 備考 |
|:---------|:------------------|:-------------------|
| `&copy;` | 著作権表示記号 | copyright signの略 |
| `&reg;` | 登録商標記号 | registered sign = registered trade mark signの略 |
| `&trade;` | 単に「商標」を意味する| Trade markの略 |
デベロッパーツールで見てみると©って直接書いてあるところもあるけど、ホントはダメだと思う…
参考までに→[商標用語辞典](https://www.jazy-ip.com/dictionary/)


##マークアップ記号

```jittai_sansho03.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字実体参照03</title>
    <link rel="stylesheet" href="css/jittai_sansho03.css">
  </head>
<body>
  <div class="container03">
    <p class="sansho09">
      ハッピー！&amp;ラッキー！
    </p>
    <p class="sansho10">
        &apos;ここを囲う&apos;
    </p>
    <p class="sansho11">
        &quot;引用文献です&quot;
    </p>
    <p class="sansho12">
        遊び&lt;勉強
    </p>
    <p class="sansho13">
        睡眠欲&gt;食欲
    </p>
</body>
</html>
```

```jittai_sansho03.css
.sansho09 {
	background: #7cc4ff;
}
.sansho10 {
	background: #9f7cff;
}
.sansho11 {
	background: #ff7cde;
}
.sansho12 {
	background: #ff7cb9;
}
.sansho13 {
	background: #979797;
}
```
<img width="168" alt="20191128_Qiita02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/945fe040-d6b5-1755-6eb1-035b567f1934.png">

| 文字実体参照 | 説明 | 備考 |
|:---------|:------------------|:-------------------|
| `&amp;` | アンド記号 | ampersandの略 |
| `&apos;` | アポストロフィ | apostropheの略 |
| `&quot;` | 引用符 | quotation mark = APL quoteの略 |
| `&lt;` | 不等号（小なり） | less-than signの略 |
| `&gt;` | 不等号（大なり） | greater-than signの略 |