HTML・CSS独学応援 2-7 「特殊文字」

HTMLでは、普通に打ち込んでも表現できない文字や記号があります。
それを「特殊文字」と言います。

今回は、「特殊文字」について紹介していきます。
サンプルサイトでも使用しています。

©の部分が「特殊文字」になります。

特殊文字とは

「プログラムの一部として使用されている文字」や
「特別な文字」をHTMLで表示したい時に使います。

パソコンは、
実は人間ほど複雑なことはできません。

1つのものに、いろんな意味持たせたりするのが
とっても苦手なんです。

パソコンが混乱しないように、明らかに違う書き方をして、
「ここはこうして!」っとはっきり伝えるのが特殊文字!

そんなイメージでOKです。

なんで必要なの?

例えばHTMLで、
こう表示したい場合を考えてみてください。

この時に書いたコードは、こんな感じになります!

<!DOCTYP html>
    <html lang = "ja">
        <head>
            <meta charset = "UTF-8">
            <title>特殊文字について</title>
        </head>
        <body>
            <h1>段落の書き方</h1>
            <p>段落は<p>タグを使います。</p>
        </body>
    </html>

でも、このコードでは、
パソコンが混乱してしまいます。

<p>タグの開始タグと終了タグの間に
もう1つ<P>タグがあるように、パソコンは考えます。

すると、
「あれ?こっちの<p>タグに終了タグがないよ!」
ってなってしまいます。

そのため、タグではなく、
文字として<p>を認識させるたいわけです。

そんな時に、「特殊文字」を使う必要があります。

< の特殊文字は &lt; です。
> の特殊文字は &gt; です。

<!DOCTYP html>
    <html lang = "ja">
        <head>
            <meta charset = "UTF-8">
            <title>特殊文字について</title>
        </head>
        <body>
            <h1>段落の書き方</h1>
            <p>段落は &lt; p &gt;タグを使います。</p>
        </body>
    </html>

こうすることで、
「<p>タグ」と
「文字として表示したい<p>」の区別ができるようになります。

まとめ

HTMLで、プログラム的な意味を持ってしまうような文字
は特殊な書き方ををする事で
「プログラムの一部」なのか、「そのまま表示したい文字」なのか
はっきり区別してあげる必要があります。

基本的には、必要な時に調べればOKですが。
よく使う、代表的の物は
下にまとめてみました。

表示したい文字書き方意味
<&lt;小なり
>&gt;大なり
&&amp;アンド
 &nbsp;空白
©&copy;著作権マーク

HTMLリファレンス(特殊文字)

リファレンスでは現在使われている特殊文字がまとめられています。

見てもらえばわかるとおり、数が多いです。

覚えるのではなく、必要な時に、
調べるがのが良いと思います。

繰り返し使うものは、メモしておくと便利かもですね。