【単語登録の実例】コード(HTML/CSS/HTML特殊文字)を登録しよう

【単語登録の実例】HTML/CSS/HTML特殊文字などの登録
ヨス

執筆者

ヨス(矢野洋介)
業務効率を改善し、タイムパフォーマンスを高める時間最適化の専門家。「単語登録」の便利さを伝える「単語登録エバンジェリスト」。著書は『効率化オタクが実践する 光速パソコン仕事術』(KADOKAWA)、『読まれる・稼げる ブログ術大全』(日本実業出版社)。Yahoo!ニュースTech Team Journalでも執筆中、Schoo(スクー)講師

本記事では、コードの単語登録例を紹介します。

HTMLコードCSSコード、そしてHTML特殊文字などを単語登録する例を紹介します(参考:単語登録のやり方)。

「コード」を入力するのは手間がかかる

ブログを書いたり、サイト制作をするとき、HTMLCSSHTML特殊文字などを入力することがあります。

でも、日本語を入力している途中で、全角半角にするのもめんどくさいし、コード自体を打つのも手間なんですよね。

たとえば「<strong>こんな感じ</strong>」で入力したいときなど。

そこで、コード自体も単語登録してしまいましょう。

ただし、もっと長いコードを書くときはスニペットツールなどをオススメします。

【ローマ字入力】「コード」を単語登録する例

では、ローマ字入力で「コード」を単語登録する例を紹介します。

HTMLの単語登録例

まずは、HTMLの単語登録例です。

HTMLの例

ふつうにHTMLを単語登録する例から紹介します。

単語読み理由
<h2>h2そのまま「h2」
</h2>・h2「・(スラッシュと同じ位置)」+「h2」
<strong>ststrong」の略
</strong>・st「・(スラッシュと同じ位置)」+「strong」の略
<!--vanish(見えなくなる)」の略
<!--っv
(vv)
vanish(見えなくなる)」の略 × 2連打
<a href="#">あ;「 a 」 +「セミコロン」
</a>・あ「・(スラッシュと同じ位置)」+「 a 」
<a href="https://tangotoroku.com/">単語登録.com</a>たんご;「たんご(単語)」の略 +「セミコロン」
(※「単語登録ドットコム」へのリンクコードだから)
HTMLの単語登録例

以下にわたしが決めているルールをまとめます。

開始タグ

「開始タグ」の場合は基本的には、HTMLタグと同じスペルで登録。長いスペルのものはstのように省略。

<a href="#">に登録する場合、「 a 」が母音であるためあ;に登録(参考:母音1文字に単語登録しない)。

閉じタグ

「閉じタグ」の場合「・」がスラッシュの位置と同じであるため、・stのように単語登録すると覚えやすい。

アルファベット1文字で開始タグを登録した場合はアルファベット2連打に登録。<b>であれば、閉じタグはっb(=「b」の2連打)</b>のように。

リンクタグ

リンクタグは、タグだけでなく、リンク先URLとキーワードも含めて登録しておくと便利。

読みは「キーワード+セミコロン」が覚えやすい(参考:セミコロンキーを活用する方法)。

マークダウン記法の例

マークダウン記法でHTMLを入力する場合も考え方は同じです。

単語読み理由
## h2「h2」なので。
(※「##」のあとには半角スペースも登録している)
 **st「strong タグ」なので
(※「**」の前には半角スペースも登録している)
** ・st「strong の閉じタグ」なので
(※「##」のあとには半角スペースも登録している)
[単語登録.com](https://tangotoroku.com/)たんご;「たんご(単語)」の略 +「セミコロン」
(※「単語登録ドットコム」へのリンクコードだから)
マークダウン記法の単語登録例

CSSの単語登録例

HTMLと同じく、CSSも単語登録しておくと便利です。

単語読み理由
font-size:%;fsfont-size」の略
(※ よく使う単位「:%;」「:em;」なども一緒に登録)
line-height:1.8;lhline-hight」の略
(※ よく使う数値も一緒に登録)
#ce000dれd
(red)
red」の略
(※ よく使う色のコードを登録する)
/*v;vanish(見えなくなる)」の略 + セミコロン
*/っh
(hh)
vanish(見えなくなる)」の略 × 2連打 + セミコロン
*/---------------------------*/line(線)」の略
CSSの単語登録例

この中でもとくに「色コード」を単語登録しておくのはオススメです。

HTML特殊文字の単語登録例

HTML特殊文字の単語登録はかなり重宝します(参考:HTML特殊文字とは?)。

単語読み理由
&yen;いぇん;¥(yen)」マークなので。うしろに「;」を追加。
&#92;ばっくすらっしゅ;\(バックスラッシュ)」マークなので。うしろに「;」を追加。
&amp;あんd;&(and)」マークなので。うしろに「;」を追加。
&nbsp;spspace(余白)」の略
&lt;<;<(山カッコ)」なので。うしろに「;」を追加。
&gt;>;>(山カッコ閉じ)」なので。うしろに「;」を追加。
&#91;「; [(角カッコ)」なので。うしろに「;」を追加。
&#93;」; ](角カッコ閉じ)」なので。うしろに「;」を追加。
CSSの単語登録例

【スマホ】「コード」を辞書登録する例

スマホでコードを入力する機会はほぼないと思われます。

もし登録する場合は、ふつうは言葉の頭にこない文字をくっつけて辞書登録する方法がオススメです。

頭にくっつける文字の種類

  • ー(長音=伸ばし棒)

わたしの場合は、を語の頭に付けると「コード」というふうにルールを決めています。

単語読み理由
<h2>「ー(長音)」+「イチ」の略
</h2>「ー(長音)」× 2 +「イチ」の略
<strong>「ー(長音)」+「トロング」の略
</strong>「ー(長音)」× 2 +「イチ」の略
コードの辞書登録例

閉じタグの場合は、「長音」を2回繰り返して登録していますよ。

まとめ

本記事で紹介したコードの単語登録ですが、登録しておくとかなり便利です。

特に、色コードやHTML特殊文字などは登録しておくと、パッと使えるので重宝しますよ。

著書の紹介

わたしは自他共に認める「効率化オタク」です。

そのわたしが、KADOKAWAさんから『効率化オタクが実践する 光速パソコン仕事術』という書籍を出版しました(おかげさまで重版もされました)。

この記事を気に入ってくれたなら、きっと満足していただけるはず。

単語登録の魅力を広めよう!
ABOUT US
ヨス
データ入力のアルバイトをしていた20代のころ、頭を使わなくてもよい「単純作業」をいかに頭を使って効率化するかに情熱を燃やす。この経験から、自分が効率化に異常な関心があることに気づく。著書は『効率化オタクが実践する 光速パソコン仕事術』(KADOKAWA)と『読まれる・稼げる ブログ術大全』(日本実業出版社)。