【HTML】「HTML」で「タブ(空白)」を表示する方法
【HTML】
「HTML」で「タブ(空白)」を表示する方法
はじめに
「HTML」を使って、
「WEB」「ホームページ」を作成していると、
必ず「タブ(空白)」を表示したいときに直面する。
「タブ」キーを入力しても、
「WEB」に表示される時には、無視され、表示されない。
「タブ」は、
プログラムのコーディング上で良く利用されるセパレーター的な存在なので、
普通の「タブ」入力は、
「プログラム」「HTML」では、「コード」としては見られない。
「HTML」では、
「タブ(空白)」を表示するには、
「特殊文字」の「 」という「文字コード」を使用する。
Back
「タブ(空白)」とは
「タブ(空白)」は、
入力しても、何も文字が表示されない「キー」で、
「空白」を挿入したい時に使用される。
目には見えないが、
「スペース」ではなく、
しっかりと「タブ」という「空白」で認識されている。
主な利用目的は、
「文章」の開始位置を揃える目的や、
文字列の「インデント(行頭空白)」を確保する際に良く利用される。
一般的には、
「タブ(空白)」は、
「8バイト分のスペース(全角4文字相当)」の空白が確保されることが多いらしい。
「HTML」では、
「スペース」の特殊文字「 3個」で、
「タブ」の特殊文字「  1個」に相当する幅になるようです。
Back
「HTML」で使える「空白」を表示する「特殊文字」
「HTML」で使える
「空白」を表示することができる「特殊文字」には、
特殊文字 | 説明 |
  | 通常の「半角スペース」よりも「細め」の空白。 |
| 通常の「半角スペース」と「同じサイズ」の空白。 |
  | 通常の「半角スペース」よりも「少し広め」の空白。(半角スペース2個分) |
  | 通常の「半角スペース」よりも「さらに広め」の空白。(半角スペース3個分)(タブ) |
などがある。
「空白」を表示する「特殊文字」の実際の表示幅を見れる「サンプルコード」
特殊文字 | 実際のスペース |
  | 空白の前 空白の後 |
| 空白の前 空白の後 |
  | 空白の前 空白の後 |
  | 空白の前 空白の後 |
Back
特殊文字「 」を使って「タブ(空白)」を表示する
「HTML」では、
「タブ(空白)」を表示するには、
「特殊文字」の「 」という「文字コード」を使用する。
方法は簡単で、
「 」を「タブ(空白)」を表示させたい場所に記述するだけ。
「文字列」の「先頭」「途中」「末尾」の
どこでも「タブ(空白)」を表示することができる。
「タブ(空白)」を表示するサンプルコード
入力と出力結果
 先頭に「タブ(空白)」を「1つ」表示する
先頭に「タブ(空白)」を「1つ」表示する
入力と出力結果
  先頭に「タブ(空白)」を「2つ」表示する
先頭に「タブ(空白)」を「2つ」表示する
入力と出力結果
   先頭に「タブ(空白)」を「3つ」表示する
先頭に「タブ(空白)」を「3つ」表示する
入力と出力結果
    先頭に「タブ(空白)」を「4つ」表示する
先頭に「タブ(空白)」を「4つ」表示する
入力と出力結果
文字列の 途中に 「タブ(空白)」 を表示する
文字列の 途中に 「タブ(空白)」 を表示する
Back
「空白」の特殊文字コード「 」を使用して「タブ(空白)」のようにする
「空白」の特殊文字コード「 」を使用して「タブ(空白)」のようにする。
「 3つ」入力すると、
「タブ(空白) 1つ」と同じぐらいの「幅」となる。
「空白」の特殊文字コード「 」を使用する「書式」
入力と出力結果
 先頭に「タブ(空白)」を「1つ」表示する
先頭に「タブ(空白)」を「1つ」表示する
入力と出力結果
先頭に「空白」を「1つ」表示する
先頭に「空白」を「1つ」表示する
入力
先頭に「タブ(空白)」と同じぐらいの「空白」を表示する
 先頭に「タブ(空白)」を「1つ」表示する
出力結果
先頭に「タブ(空白)」と同じぐらいの「空白」を表示する
先頭に「タブ(空白)」を「1つ」表示する
Back
「リスト」を使用して「インデント(先頭空白)」を表示する
「タブ(空白)」ではないが、
「行頭」に「空白」を適用する方法がある。
「HTML」では、
「リスト」を使用することで、
「インデント(行頭空白)」が適用され、
「タブ(空白)」を入力したようにできる。
「HTML」で「リスト」を使用する「書式」
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>
Back