HTMLモードに挑戦【変な文字とテーブル編】

• HTMLモードの変な文字
• テーブルで見やすく

作成モードとHTMLモードは、中身が全然違います。

そんなの見れば分かるよ。と言われるブロガーの方は多いかと思いますが、普段ブログの内容しか見ない人からみると、なにやらプログラムされているかのように見えます。

よく見るのが、<xxx> ～ </xxx> とタグと呼ばれるもので囲ったHTML言語と呼ばれるものですが、

これについては、HTMLモードで編集するようになってから、かなり見慣れてきました。

調べると、タグで囲むことによって、文字を大きくしたり、色を付けたり、下線を引いたりなどなどできることが分かりました。

まだまだ、勉強中なので、すべてのタグを使えるわけではないですが、簡単なものは何となく使えるようになってきました。

タグについては、別のブログで書きたいと思います。

HTMLモードの変な文字

今回は、それではなく、謎の文字列 &xxxx; と記載されているものです。

最初、HTMLモードにすると、書いた記憶のない内容で、突然現れたりしました。

そこで調べてみると、どうやら文字によっては、そのままHTMLでは書けないことが分かりました。

ということで、キーボードを打って、一通り調べてみます。

0123456789-^\qwertyuiop@[asdfghjkl;:]zxcvbnm,./\

!"#$%&'()=~|QWERTYUIOP`{ASDFGHJKL+*}ZXCVBNM<>?_

 ←スペース

上にある３つの行をHTMLモードにすると、

0123456789-^\qwertyuiop@[asdfghjkl;:]zxcvbnm,./\<br />
<br />
!"#$%&amp;'()=~|QWERTYUIOP`{ASDFGHJKL+*}ZXCVBNM&lt;&gt;?_<br />
<br />
&nbsp;←スペース<br />

となっています。<br /> は改行するという意味のタグです。

見比べてみると、

HTMLモードの方には、&amp; &lt; &gt; &nbsp; と4文字だけ &xxx; という形に変わっています。

表にすると、

& → &amp;
< → &lt;
> → &gt;
   → &nbsp;

となっています。一番下は、スペースです。

こんな風に、HTMLモードでは、特定の文字が置き換えられます。

これ以外にも調べると、特殊文字と呼ばれるものは、ほとんど &xxx; といった形で置き換えられるようです。

特に、自分で書いていて、多かったのは、スペースです。文字の位置を調整するのに、
スペースを使っていると、HTMLモードでみると、

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

といった、状態になってしまうので、スペースは不用意に使うと、後で、HTMLモードで書き換えるときに分からりにくくなってしまいます。

ですので、

スペースを使うは、ほどほどに、使っても１つか２つまででしょうか。

テーブルで見やすく

ただこれだと、表のように、きちっと並べて作りたいとき、スペースが使えません。

Windowsショートカットの例にすると、

ひらがな       → 「F6」
全角カタカナ → 「F7」
半角             → 「F8」
全角英数       → 「F9」
半角英数       → 「F10」

といったように、→の前に入るスペースの数が多くなってしまいます。

HTMLモードでは、

ひらがな&nbsp; &nbsp; &nbsp; &nbsp;→ 「F6」 または 「Ctrl」キー＋「U」キー<br />
全角カタカナ → 「F7」 または 「Ctrl」キー＋「I」キー<br />
半角&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;→ 「F8」 または 「Ctrl」キー＋「O」キー<br />
全角英数&nbsp; &nbsp; &nbsp; &nbsp;→ 「F9」 または 「Ctrl」キー＋「P」キー<br />
半角英数&nbsp; &nbsp; &nbsp; &nbsp;→ 「F10」 または 「Ctrl」キー＋「T」キー
<br />

となってしまいます。

こんな時は、HTMLモードで<table> タグで表を作ります。

<table><tbody>
<tr> <td>ひらがな</td>       <td>→</td>  <td>「F6」</td>   </tr>
<tr> <td>全角カタカナ</td> <td>→</td>  <td>「F7」</td>   </tr>
<tr> <td>半角</td>             <td>→</td>  <td>「F8」</td>   </tr>
<tr> <td>全角英数</td>       <td>→</td>  <td>「F9」</td>   </tr>
<tr> <td>半角英数</td>       <td>→</td>  <td>「F10」</td> </tr>
</tbody></table>

作成モードでは、

ひらがな	→	「F6」
全角カタカナ	→	「F7」
半角	→	「F8」
全角英数	→	「F9」
半角英数	→	「F10」

ときちっと並んだ状態になります。
タグとタグの間にスペースを入れても特に問題ないので、HTMLモードでも
感覚的に表になっていることがわかるので便利です。

ちなみに、表の場合、一行目をタイトルにして書くこともできます。

<table border="1"><tbody>
<tr> <th>変換の種類</th>    <th>ショートカットキー</th> </tr>
<tr> <td>ひらがな</td>       <td>「F6」</td>                  </tr>
<tr> <td>全角カタカナ</td> <td>「F7」</td>                  </tr>
<tr> <td>半角</td>             <td>「F8」</td>                  </tr>
<tr> <td>全角英数</td>       <td>「F9」</td>                  </tr>
<tr> <td>半角英数</td>       <td>「F10」</td>                </tr>
</tbody></table>

変換の種類	ショートカットキー
ひらがな	「F6」
全角カタカナ	「F7」
半角	「F8」
全角英数	「F9」
半角英数	「F10」

なんとなく、HTMLでプログラミングした気になれて、少し楽しくなってきました。
意味が分かってくると面白いかも。