特殊記号の書き方！HTML,CSS,JSそれぞれの違いとエスケープまで解説します

HTML ※Web開発
特殊記号の書き方！HTML,CSS,JSそれぞれの違いとエスケープまで解説します
Web開発の世界では、文字や記号は単なる表示だけでなく、コードとしても特別な意味を持ちます。HTML、CSS、JavaScript（JS）それぞれの言語では、特殊な記号や文字の取り扱いに微妙な違いがあります。さらに特殊な文字や記号を文章中に...
lorem-co-ltd.com

「特殊記号が何かは知ってるけどHTML、CSS、JSで書き方が違うことまでは知らなかった」
「ネットで検索してコピペしているのに特殊記号が表示されないことがある」
「エスケープシーケンスの使い方や意味はよくわかっていない」

本日はそんな方に向けてHTML、CSS、JSでの特殊記号の書き方を解説します。

Web開発の世界では、文字や記号は単なる表示だけでなく、コードとしても特別な意味を持ちます。HTML、CSS、JavaScript（JS）それぞれの言語では、特殊な記号や文字の取り扱いに微妙な違いがあります。

さらに特殊な文字や記号を文章中に直接表示させる場合、エスケープと呼ばれる手法が必要です。

エスケープを使うことで特殊文字がコードとして解釈されずに表示されます。

ネットで調べても上手くいかないのは書き方の違いやエスケープの意味を理解していないことが原因です。

本記事を持って特殊記号をマスターしましょう。

また動画もあるので必要に応じてご利用ください。

- YouTube
YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。
youtube.com

Webサイトで登場する特殊文字、特殊記号は書いた方が良い

キーボードにない記号や文字化けの可能性があるものは特殊な文字として専用のコードで書くようにしましょう。

全角の変換で書くこともできますがエンジニアであれば安全な書き方で書くことをお勧めします。

ちなみにどれがどの記号かを全部覚えることは不可能ですので都度調べることになると思います。

一方で調べた書き方をコピペでやっても上手く表示されないことがあります。

HTML、CSS、JSのどのファイルで記載するかによって同じ記号でも書き方が違うからです。

HTMLでの特殊文字、特殊記号の書き方

まず特殊文字、特殊記号を表現する3種類を紹介します。

以下はコピーライトのマークを表示させるものです。

上から文字実体参照、10進数、16進数です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <!-- 文字実体参照 -->
    <h1>©</h1>
    <!-- 10進数 -->
    <h1>©</h1>
    <!-- 16進数 -->
    <h1>©</h1>
  </body>
</html>

そもそも3種類のパターンがあることをご存知ない方もいるかもしれませんが、実際のところ3種類のどれかを使えれば大丈夫です。

またHTMLでは3種類のどれを使っても問題ないですのでググったものをそのままコピペして上手くいくことがほとんどでしょう。

CSSでの特殊文字、特殊記号の書き方

CSSでは擬似要素のcontentプロパティを使って文字や数字を画面に表示させることがあります。

その過程で特殊記号を書くわけですが、先ほどの3種類のうち16進数しか使用できません。

さらに16進数のコードから先頭3文字と末尾のセミコロンを削除して、先頭にバックスラッシュ「\」を足します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <!-- 文字実体参照 -->
    <h1>©</h1>
    <!-- 10進数 -->
    <h1>©</h1>
    <!-- 16進数 -->
    <h1>©</h1>
 　　
　　 <!-- ここを追加 -->
    <h1 class="css"></h1>
  </body>
</html>
.css::after {
  display: inline-block;
  content: "\A9";
}

16進数の書き方は「&#xA9;」なのですが、CSSではエスケープと言って「\」を先頭に書かないと記号に変換されない仕様になっています。

ちなみにHTMLで書いたものをそのままcontentに書くと以下のようになります。

そのまま書いたものが文字列として出力されるわけですね。

先頭に「\」を書くと文字列→記号に変換してくれるようになります。

また先頭の「&#x」を削除することがCSSで特殊文字を書くときのルールです。

末尾の「;」については、そもそもCSSのプロパティ自体が末尾に「;」を書くので不要になります。

ちなみにcontentの値で「\」をエスケープの役割ではなく文字列のまま表示させたい場合は、「\\」という具合に二重に書けばOKです。

.css::after {
  display: inline-block;
  /* ここを修正 */
  content: "\A9\\";
}

バックスラッシュを文字列として使用するケースはあまりないですがプログラミングでは必須の知識とされているので初心者の方は覚えておきましょう。

JavaScriptでの特殊文字、特殊記号の書き方

続いてJavaScriptですがCSS同様にそのまま書いても記号として変換されません。

さらに先ほどのCSSの書き方とが違うものになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <!-- 文字実体参照 -->
    <h1>©</h1>
    <!-- 10進数 -->
    <h1>©</h1>
    <!-- 16進数 -->
    <h1>©</h1>
    <h1 class="css"></h1>

    <!-- ここを追加 -->
    <h1 class="js"></h1>
  </body>
</html>
const js = document.querySelector(".js");
js.textContent = "\u00A9";

CSSと同じく16進数の書き方を使って先頭に「\」を足してエスケープするまでは同じです。

元の16進数の書き方から先頭3文字を「u00」に置き換えるのがJSでの書き方です。

Unicodeと言って「どの世界でも共通の文字変換するルール」というのがプログラミングの世界ではあります。

JavaScriptではユニコードエスケープという「\u00」に置き換えることになっています。

また末尾の「;」については、JavaScript自体が「;」でコードを終了させるルールなので不要です。

以上のようにHTML、CSS、JSで書き方が違うので初心者の方は注意しましょう。

また今回参考にした本はこちらになります。

良ければどうぞ。

  • https://www.facebook.com/v2.8/plugins/like.php?action=like&app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df42ed1bd587730082%26domain%3Dlorem-co-ltd.com%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Florem-co-ltd.com%252Ffc895e6965808d1fd%26relation%3Dparent.parent&container_width=83&href=https%3A%2F%2Florem-co-ltd.com%2F20231127-2%2F&layout=button_count&locale=ja_JP&sdk=joey&show_faces=false
  • https://platform.twitter.com/widgets/tweet_button.2f70fb173b9000da126c79afe2098f02.ja.html#dnt=false&id=twitter-widget-1&lang=ja&original_referer=https%3A%2F%2Florem-co-ltd.com%2F20231127-2%2F&size=m&text=%E7%89%B9%E6%AE%8A%E8%A8%98%E5%8F%B7%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%EF%BC%81HTML%2CCSS%2CJS%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84%E3%81%A8%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%BE%E3%81%A7%E8%A7%A3%E8%AA%AC%E3%81%97%E3%81%BE%E3%81%99&time=1727683985245&type=share&url=https%3A%2F%2Florem-co-ltd.com%2F20231127-2%2F
  • https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=https%3A%2F%2Florem-co-ltd.com&url=https%3A%2F%2Florem-co-ltd.com%2F20231127-2%2F&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fabc-static%2F_%2Fjs%2Fk%3Dgapi.lb.ja.aui8dkB4kj8.O%2Fam%3DAACA%2Fd%3D1%2Frs%3DAHpOoo8eP4Nfp0RaTXoCrJJI2SB8O1pZMg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I1_1727683984688&_gfid=I1_1727683984688&parent=https%3A%2F%2Florem-co-ltd.com&pfname=&rpctoken=40609284
  • javascript:false

タイトルとURLをコピーしました