みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
Web制作独学者へよく使うHTML特殊文字を伝授
HTMLでは通常の日本語入力システムからは入力出来ない文字があって困ったことはありませんか？
そんな入力出来ない文字や、コードで入力した方がよい記号などを使いたいと思った時に役立つよう、使う頻度が高いと思われるものを中心にまとめました。
HTML4.01で定義されている文字となり、ほとんどのブラウザで表示可能となります。
空白文字（スペース）の色々
HTMLに、複数のスペース(空白文字)を連続して掲載したい場合があります。
スペースキーで必要なだけ空白文字を入れても、HTMLではその方法では望み通りにいかない場合があります。
なぜなら、HTMLソース中に書かれた「半角スペース」・「タブ」・「改行」は、いくつ連続していても「1つ分の空白」として解釈される仕様だからです。
HTMLソース中にスペースキーを使って半角スペースを3つ打っても、実際にブラウザ上で表示される空白量は半角スペース1つ分だけです。
強制的に複数のスペース(空白文字)を連続して表示させたい場合には、文字実体参照と呼ばれる、特殊文字を表示させるための特別な記述方法を使います。
特別な記述方法といっても、書き方はとても簡単です。
通常の半角スペースと同じサイズの空白です。
下記のようにHTMLに書きます。
テスト テスト テスト テスト テストWebページでは下記のように、テストとテストの間が「半角スペース」で表示されます。
通常の半角スペースより少し広めの空白です。
「n」の字の幅の空白です。
下記のようにHTMLに書きます。
テスト テスト テスト テスト テストWebページでは下記のように、テストとテストの間が「半角スペースより少し広め」で表示されます。
キーボードからの全角スペースとほぼ同じ幅で表示されます。
「m」の字の幅の空白です。
下記のようにHTMLに書きます。
テスト テスト テスト テスト テストWebページでは下記のように、テストとテストの間が「全角スペース」とほぼ同じ幅で表示されます。
その他のよく使われる記号
その他入力出来ない文字や、コードで入力した方がよい記号などを使いたいと思った時に役立つよう、使う頻度が高いと思われるものを中心に下記の表にまとめました。
| 記号等 | HTMLでの入力 | 読み方 |
| “ | “ | 左ダブルクォーテーション |
| ” | ” | 右ダブルクォーテーション |
| & | & | アンパサンド |
| < | < | 小なり記号 |
| > | > | 大なり記号 |
| ©︎ | © | 著作権記号 |
| ®︎ | ® | 登録商標記号 |
| ← | ← | 左方向矢印 |
| ↑ | ↑ | 上向き矢印 |
| → | → | 右方向矢印 |
| ↓ | ↓ | 下向き矢印 |
| ↔︎ | ↔ | 左右矢印 |
今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。
下記を押していただけると励みになります！
↓
 |
人気記事
最近のコメント