なるWeb
コーディングHTMLエンティティ化

【初心者でもわかる】機種依存・環境依存文字の表示方法

どうも7noteです。

今回は、機種依存・環境依存文字の表示方法について書いていきたいと思います。

HTMLで使う&や<>。そのまま文章に書いたつもりが、うまく表示されないことがあります。

たとえば、<p>を見せたいのに、文字ではなくHTMLタグとして読み取られてしまう場合です。そんなときに使えるのが「文字参照」です。

漢字の旧字体などにも文字参照は使えます。ただし、文字そのものにフォントが対応していない場合は、書き方を変えるだけでは表示できません。まずは身近な「&」を例に見ていきましょう。

「&」を表示する

例)アンドマークの書き方

<!-- &amp; と書くと、画面には & が表示される -->
<p>アンドマーク「&amp;」</p>

結果

アンドマーク「&」

解説

どうでしょうか?ソースに&amp;と書くと、画面には「&」が表示されます。このように、文字を決まった名前や番号で指定する書き方が文字参照です。

ほかにも、HTMLで使う記号は次のように書けます。最後のセミコロン;までセットで覚えておくといいですね。

<!-- < と > を、タグではなく文字として表示する -->
<p>タグの書き方:&lt;p&gt;</p>
<!-- 表示結果:タグの書き方:<p> -->

漢字や記号を探すには?

入力しにくい漢字や記号を探したいときには、文字と対応する番号が載っている一覧が便利です。

たとえば「①」は、番号を使って次のようにも書けます。

<!-- 9312 は「①」の文字番号。UTF-8なら「①」と直接書いてもOK -->
<p>&#9312;</p>

なお、文字参照は文字の指定方法です。文字が「□」になるときは、その文字に対応したフォントが使えるかも確認してください。

まとめ

普段の文字入力では、文字参照を意識する機会は少ないかもしれません。それでも、HTMLの記号をそのまま見せたいときや、入力しにくい文字を使いたいときには役立ちます。

まずは「&amp;で&を表示できる」と覚えておくといいですね。

おそまつ!