HTMLでタブ文字を挿入する方法を解説!

HTMLでタブ文字を挿入する方法について解説していきます。特殊文字の1つであるタブ文字をweb上に表示させる際の注意点と表記の仕方、また実際にどのような挙動をするのかをキャプチャ付きで説明します。

コンテンツ [表示]

  1. 1HTMLでタブ文字を挿入したい
  2. 1.1タブ文字(特殊文字)を挿入する際のポイント
  3. 1.2タブ文字のブラウザ上での挙動
  4. 1.3タブ文字とは?
  5. 2HTMLでタブ文字を挿入する方法
  6. 2.1preタグを使ってタブ文字を挿入する
  7. 2.2CSSでタブ文字を挿入する
  8. 2.3コードと挙動をプレビューで確認してみよう。
  9. 3まとめ

HTMLでタブ文字を挿入したい

HTMLで何か記述している際に、インデントを揃えたいと思うことがあります。しかし、文字と文字の間にスペースを何個も入れたしても、エディタ上で自動修正され、1文字分しか間隔を空けることができません。

そんなときにタブ文字を用いることで、簡単にインデントを揃える(タブ揃えする)ことができます。そしてそのタブ文字を挿入するには、特殊文字を書く必要があります。

タブ文字(特殊文字)を挿入する際のポイント

特殊文字の1つであるタブ文字の文字コードは	となります。

タブ文字を含む特殊文字の書き方としては始めに&#その後に、10進数の数値を指定してあげます。そして末尾には;が必要なので注意しましょう。

タブ文字のブラウザ上での挙動

ではタブ文字はブラウザ上でどのように表示されるのでしょうか!?

この問いに対しては、「タブ文字の文字コードはブラウザ上では表示されず、スペースとして表示される」が答えとなります。

それでは実際にどのようにブラウザ上に反映されるのか見てみましょう。

このように、実際にブラウザ上に文字コードがそのまま表示されるわけではなく、文字と文字の間にタブ文字として挿入されていることが分かると思います。

タブ文字とは?

タブ文字とは特殊文字の1つであり、HTMLで文字と文字の間に全角4文字相当を空ける場合、また特にインデントを揃える(タブ揃えの)場合などに、一つの文字として表示させることにより、文字として認識することを言います。

スペースキーだと1文字分の「空白」しか挿入されず、インデントを揃えるのは困難ですが、タブ文字を使うと簡単にインデントを揃えることができるというメリットがあります。

Photo byjamesmarkosborne

HTMLでタブ文字を挿入する方法

それでは実際に	(タブ文字)を用いて、文字と文字の間のスペースを実現し、インデントを揃えてみます。

preタグを使ってタブ文字を挿入する

実際にブラウザ上での挙動を確認する前に1つ重要な注意点を挙げておきます。

それはタブ文字を使うときHTMLタグはpreタグにしないといけないということです。

preタグ以外を用いるとうまく機能してくれません。この点を踏まえて、下の画面ではpreタグを用いた場合と、それ以外のHTMLタグを用いた場合のブラウザ上での挙動を確認できます。

それでは実際にプレビューで見てみましょう。

このようにpreタグ以外だとインデントが揃っていないことが確認できます。

CSSでタブ文字を挿入する

HTMLではタブ文字を	としていましたが、CSSでは\9となります。

これは特殊文字すべてにおいて共通することですが、CSSに特殊文字を挿入する場合、始めに\、次に16進数の数値を記載する必要があります。
(でも反映されるが\の方が確実です。Windowsの場合、\キーに当たります。)

そしてCSSでタブ文字を挿入する方法については、いくつか注意点があります。
それでは順番に見ていきましょう。

HTML

タブ文字を反映させたい部分をHTMLのpreタグで囲み、classもしくはid属性を付与しておきましょう。

CSS

::beforeまたは::afterを使った擬似要素として表示しましょう。

ここでは、仮に.bodyというセレクタに対して疑似要素として設定してみます。

.body::before{
    content:"\9";
}

.body::after{
    content:"\9";
}

このように記述することでタブ文字を挿入できます。

コードと挙動をプレビューで確認してみよう。

ここでは「タイトル:」の前後にタブ文字を挿入してみます。

このように「タイトル:」の前後にタブ文字が挿入され、空白があいていることがプレビューから分かります。

まとめ

以上が	を用いたタブ文字の使い方と、機能になります。

特にインデントを揃えたい場合に、そのHTMLタグにclassid属性を付与して、CSSで余白の設定をする手間もなく、HTMLに	と記述するだけで簡単に実現することができます。

ぜひ使ってみてその便利さを実感してみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次