&と;で挟まれている文字は文字実体参照と言う。
でも呪文っぽくて面白いな
参考サイト→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">
間が 空くよ
</p>
<p class="sansho02">
間が 空くよ
</p>
<p class="sansho03">
間が 空くよ
</p>
<p class="sansho04">
間が 空くよ
</p>
<p class="sansho05">
間が 空くよ
</p>
</div>
</body>
</html>
jittai_sansho01.css
.sansho01 {
background: #fdc1c1;
}
.sansho02 {
background: #fdf4c1;
}
.sansho03 {
background: #c3fdc1;
}
.sansho04 {
background: #c1fde9;
}
.sansho05 {
background: #c1ccfd;
}
4つ目は全角スペースで空けているけど、細かい文字間は文字実体参照を使った方が良い。
| 文字実体参照 | 説明 | 備考 |
|---|---|---|
|
無視・改行されない空白 | no-break spaceの略 |
  |
nの字の幅の空白(半角スペース) | en spaceの略 |
  |
mの字の幅の空白(全角スペース) | em spaceの略 |
  |
より狭い空白 |
thin spaceの略 |
「 は半角スペース」と説明しているサイトがあったが、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">
©株式会社あいうえお 2010-2019
</p>
<p class="sansho07">
商品名かきくけこ®
</p>
<p class="sansho08">
商品名さしすせそ™
</p>
</div>
</body>
</html>
jittai_sansho02.css
.sansho06 {
background: #ff7c7c;
}
.sansho07 {
background: #dcff7c;
}
.sansho08 {
background: #7cffae;
}
| 文字実体参照 | 説明 | 備考 |
|---|---|---|
© |
著作権表示記号 | copyright signの略 |
® |
登録商標記号 | registered sign = registered trade mark signの略 |
™ |
単に「商標」を意味する | Trade markの略 |
デベロッパーツールで見てみると©って直接書いてあるところもあるけど、ホントはダメだと思う…
参考までに→商標用語辞典
マークアップ記号
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">
ハッピー！&ラッキー！
</p>
<p class="sansho10">
'ここを囲う'
</p>
<p class="sansho11">
"引用文献です"
</p>
<p class="sansho12">
遊び<勉強
</p>
<p class="sansho13">
睡眠欲>食欲
</p>
</body>
</html>
jittai_sansho03.css
.sansho09 {
background: #7cc4ff;
}
.sansho10 {
background: #9f7cff;
}
.sansho11 {
background: #ff7cde;
}
.sansho12 {
background: #ff7cb9;
}
.sansho13 {
background: #979797;
}
| 文字実体参照 | 説明 | 備考 |
|---|---|---|
& |
アンド記号 | ampersandの略 |
' |
アポストロフィ | apostropheの略 |
" |
引用符 | quotation mark = APL quoteの略 |
< |
不等号（小なり） | less-than signの略 |
> |
不等号（大なり） | greater-than signの略 |