本記事ではWEB関係の仕事をしている人にオススメのコードの単語登録例を紹介します。
HTML／CSSコード、HTML特殊文字やWordPress用コードなどを単語登録する例を紹介します（参考：単語登録のやり方）。
「コード」を入力するのは手間がかかる
ブログを書いたり、サイト制作をするとき、HTMLやCSS、HTML特殊文字などを入力することがあります。
でも、日本語を入力している途中で、全角半角にするのもめんどくさいし、コード自体を打つのも手間なんですよね。
たとえば「<strong>こんな感じ</strong>」で入力したいときなど。
そこで、コード自体も単語登録してしまいましょう。
ただし、もっと長いコードを書くときはスニペットツールなどをオススメします。
【ローマ字入力】「コード」を単語登録する例
では、ローマ字入力で「コード」を単語登録する例を紹介します。
HTMLの単語登録例
まずは、HTMLの単語登録例を紹介します。
| 単語 | 読み | 理由 |
|---|---|---|
| <h2> | ｈ２ | そのまま「h2」 |
| </h2> | ・ｈ２ | 「・（スラッシュと同じ位置）」＋「h2」 |
| <strong> | ｓｔ | 「strong」の略 |
| </strong> | ・ｓｔ | 「・（スラッシュと同じ位置）」＋「strong」の略 |
| <!-- | ｖ | 「vanish（見えなくなる）」の略 |
| <!-- | っｖ （ｖｖ） | 「vanish（見えなくなる）」の略 × 2連打 |
| <a href="#"> | あ； | 「 a 」 ＋「セミコロン」 |
| </a> | ・あ | 「・（スラッシュと同じ位置）」＋「 a 」 |
| <a href="https://tangotoroku.com/">単語登録.com</a> | たんご； | 「たんご（単語）」の略 ＋「セミコロン」 （※「単語登録ドットコム」へのリンクコードだから） |
以下にわたしが決めているルールをまとめます。
- 開始タグ
「開始タグ」の場合は基本的には、HTMLタグと同じスペルで登録。長いスペルのものはｓｔのように省略。
<a href="#">をａに登録する場合、「 a 」が母音であるためあ；に登録（参考：母音1文字に単語登録しない）。
- 閉じタグ
「閉じタグ」の場合「・」がスラッシュの位置と同じであるため、・ｓｔのように単語登録すると覚えやすい。
アルファベット1文字で開始タグを登録した場合はアルファベット2連打に登録。ｖ<!--であれば、閉じタグはっｖ（＝「ｖ」の2連打）-->のように。
- リンクタグ
リンクタグは、タグだけでなく、リンク先URLとキーワードも含めて登録しておくと便利。
読みは「キーワード＋セミコロン」が覚えやすい（参考：セミコロンキーを活用する方法）。
CSSの単語登録例
HTMLと同じく、CSSも単語登録しておくと便利です。
| 単語 | 読み | 理由 |
|---|---|---|
| font-size:%; | ｆｓ | 「font-size」の略 （※ よく使う単位「:%;」「:em;」なども一緒に登録） |
| line-height:1.8; | ｌｈ | 「line-hight」の略 （※ よく使う数値も一緒に登録） |
| #ce000d | れｄ （ｒｅｄ） | 「red」の略 （※ よく使う色のコードを登録する） |
| /* | ｖ； | 「vanish（見えなくなる）」の略 ＋ セミコロン |
| */ | っｖ； （ｖｖ；） | 「vanish（見えなくなる）」の略 × 2連打 ＋ セミコロン |
| */---------------------------*/ | ｌ | 「line（線）」の略 |
この中でもとくに「色コード」を単語登録しておくのはオススメです。
HTML特殊文字の単語登録例
HTML特殊文字の単語登録はかなり重宝します（参考：HTML特殊文字とは？）。
| 単語 | 読み | 理由 |
|---|---|---|
| ¥ | いぇん； | 「¥（yen）」マークなので。うしろに「；」を追加。 |
| \ | ばっくすらっしゅ； | 「\（バックスラッシュ）」マークなので。うしろに「；」を追加。 |
| & | あんｄ； | 「&（and）」マークなので。うしろに「；」を追加。 |
| | ｓｐ | 「space（余白）」の略 |
| < | ＜； | 「<（山カッコ）」なので。うしろに「；」を追加。 |
| > | ＞； | 「>（山カッコ閉じ）」なので。うしろに「；」を追加。 |
| [ | 「； | 「 [（角カッコ）」なので。うしろに「；」を追加。 |
| ] | 」； | 「 ］（角カッコ閉じ）」なので。うしろに「；」を追加。 |
WordPress用コード
ブログやサイト制作でWordPressを使っている場合、WordPress専用のコードを単語登録すると便利です。
| 単語 | 読み | 理由 |
|---|---|---|
| /image | いｍｇ （ｉｍｇ） | 「image（画像）」の略 |
| /list | ・ | 箇条書きには「・（中黒）」を使うから。 |
| /quote | ｑｔ | 「quote（引用）」の略。 |
| /shortcode | しょｒｔ （ｓｈｏｒｔ） | 「short code（ショートコード）」の略。 |
| /html | ｈｔｍｌ； | 「HTML」なので。うしろに「；」を追加。 |
WordPressではマークダウンも使えるので、見出しを出すときには## などを登録するのをオススメです！（参考：マークダウンの単語登録）
まとめ
本記事で紹介したコードの単語登録ですが、登録しておくとかなり便利です。
特に、色コードやHTML特殊文字などは登録しておくと、パッと使えるので重宝しますよ。
関連記事としてマークダウンの単語登録も参考になります。