本記事では、コードの単語登録例を紹介します。
HTMLコードやCSSコード、そしてHTML特殊文字などを単語登録する例を紹介します。
このページの目次
「コード」を入力するのは手間がかかる
ブログを書いたり、サイト制作をするとき、HTMLやCSS、HTML特殊文字などを入力することがあります。
でも、日本語を入力している途中で、全角半角にするのもめんどくさいし、コード自体を打つのも手間なんですよね。
たとえば「<strong>こんな感じ</strong>」で入力したいときなど。
そこで、コード自体も単語登録してしまいましょう。
ただし、もっと長いコードを書くときはスニペットツールなどをオススメします。
【ローマ字入力】「コード」を単語登録する例
では、ローマ字入力で「コード」を単語登録する例を紹介します。
HTMLの単語登録例
まずは、HTMLの単語登録例です。
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連打に登録。ｂ<b>であれば、閉じタグはっｂ（＝「b」の2連打）</b>のように。
- リンクタグ
リンクタグは、タグだけでなく、リンク先URLとキーワードも含めて登録しておくと便利。
読みは「キーワード＋セミコロン」が覚えやすい（参考：セミコロンキーを活用する方法）。
マークダウン記法の例
マークダウン記法でHTMLを入力する場合も考え方は同じです。
| 単語 | 読み | 理由 |
|---|---|---|
| ## | ｈ２ | 「h2」なので。 （※「##」のあとには半角スペースも登録している） |
| ** | ｓｔ | 「strong タグ」なので （※「**」の前には半角スペースも登録している） |
| ** | ・ｓｔ | 「strong の閉じタグ」なので （※「##」のあとには半角スペースも登録している） |
| [単語登録.com](https://tangotoroku.com/) | たんご； | 「たんご（単語）」の略 ＋「セミコロン」 （※「単語登録ドットコム」へのリンクコードだから） |
CSSの単語登録例
HTMLと同じく、CSSも単語登録しておくと便利です。
| 単語 | 読み | 理由 |
|---|---|---|
| font-size:%; | ｆｓ | 「font-size」の略 （※ よく使う単位「:%;」「:em;」なども一緒に登録） |
| line-height:1.8; | ｌｈ | 「line-hight」の略 （※ よく使う数値も一緒に登録） |
| #ce000d | れｄ （ｒｅｄ） |
「red」の略 （※ よく使う色のコードを登録する） |
| /* | ｈ | 「hide（隠す）」の略 |
| */ | っｈ （ｈｈ） |
「hide（隠す）」の略 × 2連打 |
| */---------------------------*/ | ｌ | 「line（線）」の略 |
この中でもとくに「色コード」を単語登録しておくのはオススメです。
HTML特殊文字の単語登録例
HTML特殊文字の単語登録はかなり重宝します（参考：HTML特殊文字とは？）。
| 単語 | 読み | 理由 |
|---|---|---|
| ¥ | いぇん； | 「¥（yen）」マークなので。うしろに「；」を追加。 |
| \ | ばっくすらっしゅ； | 「\（バックスラッシュ）」マークなので。うしろに「；」を追加。 |
| & | あんｄ； | 「&（and）」マークなので。うしろに「；」を追加。 |
| | ｓｐ | 「space（余白）」の略 |
| < | ＜； | 「<（山カッコ）」なので。うしろに「；」を追加。 |
| > | ＞； | 「>（山カッコ閉じ）」なので。うしろに「；」を追加。 |
| [ | 「； | 「 [（角カッコ）」なので。うしろに「；」を追加。 |
| ] | 」； | 「 ]（角カッコ閉じ）」なので。うしろに「；」を追加。 |
【スマホ】「コード」を辞書登録する例
スマホでコードを入力する機会はほぼないと思われます。
もし登録する場合は、ふつうは言葉の頭にこない文字をくっつけて辞書登録する方法 がオススメです。
頭にくっつける文字の種類
- ん
- を
- ー（長音＝伸ばし棒）
わたしの場合は、ーを語の頭に付けると「コード」というふうにルールを決めています。
| 単語 | 読み | 理由 |
|---|---|---|
| <h2> | ーえ | 「ー（長音）」＋「エイチ」の略 |
| </h2> | ーーえ | 「ー（長音）」× 2 ＋「エイチ」の略 |
| <strong> | ーすと | 「ー（長音）」＋「ストロング」の略 |
| </strong> | ーーすと | 「ー（長音）」× 2 ＋「エイチ」の略 |
閉じタグの場合は、「長音」を2回繰り返して登録していますよ。
まとめ
本記事で紹介したコードの単語登録ですが、登録しておくとかなり便利です。
特に、色コードやHTML特殊文字などは登録しておくと、パッと使えるので重宝しますよ。
