HTMLでタブ文字を挿入する方法を解説！
HTMLでタブ文字を挿入する方法について解説していきます。特殊文字の1つであるタブ文字をweb上に表示させる際の注意点と表記の仕方、また実際にどのような挙動をするのかをキャプチャ付きで説明します。
HTMLでタブ文字を挿入したい
HTMLで何か記述している際に、インデントを揃えたいと思うことがあります。しかし、文字と文字の間にスペースを何個も入れたしても、エディタ上で自動修正され、1文字分しか間隔を空けることができません。
そんなときにタブ文字を用いることで、簡単にインデントを揃える(タブ揃えする)ことができます。そしてそのタブ文字を挿入するには、特殊文字を書く必要があります。
タブ文字(特殊文字)を挿入する際のポイント
特殊文字の１つであるタブ文字の文字コードは	となります。
タブ文字を含む特殊文字の書き方としては始めに&#その後に、10進数の数値を指定してあげます。そして末尾には;が必要なので注意しましょう。
タブ文字のブラウザ上での挙動
ではタブ文字はブラウザ上でどのように表示されるのでしょうか！？
この問いに対しては、「タブ文字の文字コードはブラウザ上では表示されず、スペースとして表示される」が答えとなります。
それでは実際にどのようにブラウザ上に反映されるのか見てみましょう。
このように、実際にブラウザ上に文字コードがそのまま表示されるわけではなく、文字と文字の間にタブ文字として挿入されていることが分かると思います。
タブ文字とは？
タブ文字とは特殊文字の１つであり、HTMLで文字と文字の間に全角４文字相当を空ける場合、また特にインデントを揃える(タブ揃えの)場合などに、一つの文字として表示させることにより、文字として認識することを言います。
スペースキーだと１文字分の「空白」しか挿入されず、インデントを揃えるのは困難ですが、タブ文字を使うと簡単にインデントを揃えることができるというメリットがあります。
HTMLでタブ文字を挿入する方法
それでは実際に	(タブ文字)を用いて、文字と文字の間のスペースを実現し、インデントを揃えてみます。
preタグを使ってタブ文字を挿入する
実際にブラウザ上での挙動を確認する前に１つ重要な注意点を挙げておきます。
それはタブ文字を使うときHTMLタグはpreタグにしないといけないということです。
preタグ以外を用いるとうまく機能してくれません。この点を踏まえて、下の画面ではpreタグを用いた場合と、それ以外のHTMLタグを用いた場合のブラウザ上での挙動を確認できます。
それでは実際にプレビューで見てみましょう。
このようにpreタグ以外だとインデントが揃っていないことが確認できます。
CSSでタブ文字を挿入する
HTMLではタブ文字を	としていましたが、CSSでは\9となります。
これは特殊文字すべてにおいて共通することですが、CSSに特殊文字を挿入する場合、始めに\、次に16進数の数値を記載する必要があります。
(￥でも反映されるが\の方が確実です。Windowsの場合、\はろキーに当たります。)
そしてCSSでタブ文字を挿入する方法については、いくつか注意点があります。
それでは順番に見ていきましょう。
HTML
タブ文字を反映させたい部分をHTMLのpreタグで囲み、classもしくはid属性を付与しておきましょう。
CSS
.body::before{
content:"\9";
}
.body::after{
content:"\9";
}このように記述することでタブ文字を挿入できます。
コードと挙動をプレビューで確認してみよう。
ここでは「タイトル：」の前後にタブ文字を挿入してみます。
このように「タイトル：」の前後にタブ文字が挿入され、空白があいていることがプレビューから分かります。
まとめ
以上が	を用いたタブ文字の使い方と、機能になります。
特にインデントを揃えたい場合に、そのHTMLタグにclassやid属性を付与して、CSSで余白の設定をする手間もなく、HTMLに	と記述するだけで簡単に実現することができます。
ぜひ使ってみてその便利さを実感してみてください。
