こんにちは朱夏です。
今回は、HTMLなどのコード内で使われているカギかっこ（<とか>）や、ダブルクォーテーション（”のこと）を表示させる方法を紹介したいと思います。
テキストとしてカギかっこやダブルクォーテーションを表示しようとしたら、表示が崩れてしまった。
どうしたらいいんだろう？
私もHTMLを勉強し始めた頃に悩まされた記憶があります。
表示したいときにどう書けばいいのかすぐわかる様に、一覧を用意しておきました。
それではいってみましょう。
記号の表示方法
書き方一覧
あとがき
記号の表示方法
初めに、どうやって表示させたらいいのかを簡単にお伝えします。
結論は、「文字コードで書く」です。
たとえば、以下のHTMLコード一行をテキストとして表示させたいとします。
普通に書いてしまった場合だと、実行結果は”ほにゃらら”とだけ表示されてしまい、前後のdivタグは消えてしまいます。
これをすべてテキストとして表示させたい場合は、HTMLコードを以下の様に書きます。
“<“を”<“、”>“を”>“という文字コードを使って書くことで、テキストとして表示させることが出来ます。
サンプルはこちらです。
See the Pen
wvKPPqB by 朱夏 (@syunatsu1)
on CodePen.
この様に、文字コードを使って書くとタグとして認識されず、テキストとしてそのままブラウザに表示されます。
書き方一覧
HTMLでよく使われる記号の書き方を一覧にしました。
See the Pen
zYvPpEb by 朱夏 (@syunatsu1)
on CodePen.
タグに使う記号であるかっこ（<と>）と、文字コードの最初の文字である&の3つを最低限覚えておくと良いと思います。
あとがき
というわけで、記号をテキストとして表示させる方法を紹介してみました。
今回のまとめはこちら。
- 文字コードで書く
- &は&と書く
- <と>と&の書き方は覚えておくと良い
1つの記号を表すのに複数の文字を書かなければいけないため、複雑で面倒に感じますが、HTMLで使われている記号をブラウザに表示させるためには必要な事なので、頭の片隅に入れておくと良いと思います。
今回は以上です。
次回もよろしくお願いします。
