LoginSignup
35
17

More than 3 years have passed since last update.

 ←これって何の呪文ですか?

Last updated at Posted at 2019-11-25

&と;で挟まれている文字は文字実体参照と言う。
でも呪文っぽくて面白いな: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;
}

20191125_Qiita01.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;
}

20191128_Qiita01.png

文字実体参照 説明 備考
&copy; 著作権表示記号 copyright signの略
&reg; 登録商標記号 registered sign = registered trade mark signの略
&trade; 単に「商標」を意味する 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">
      ハッピー!&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;
}

20191128_Qiita02.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
17