ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs（Mozilla）「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ（空白）」を表示する方法【XML】サイトマップ作り方「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト（箇条書き）で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素SEO（Search Engine Optimization）
「SEO対策」の具体的な方法「検索エンジン」に登録する方法「SEO対策」に有効な「ページタイトル」の記述方法「SEO対策」に有効な「キーワード」の記述方法「SEO対策」に有効な「ディスクリプション」の記述方法
【HTML】「HTML」で「空白」を表示する方法
【HTML】
「HTML」で「空白」を表示する方法
「HTML」で「空白」を表示する方法
INDEX
はじめに
「HTML」を使って、
「空白」を表示させるには「特殊文字」を使用して、
「空白」を表示する。
「スペース」「タブ」キーを入力しても、
「WEB」に表示される時には、無視され、表示されない。
「スペース」「タブ」は、
プログラムのコーディング上で良く利用されるセパレーター的な存在なので、
普通の「スペース」「タブ」入力は、
「プログラム」「HTML」では、「コード」としては見られない。
「HTML」では、
「スペース」「タブ」のような「空白」を表示するには、
「特殊文字」という「文字コード」を使用する。
Back
「HTML」で使える「空白」を表示する「特殊文字」
「HTML」で使える
「空白」を表示することができる「特殊文字」には、
| 特殊文字 | 説明 |
|---|---|
|   | 通常の「半角スペース」よりも「細め」の空白。 |
| | 通常の「半角スペース」と「同じサイズ」の空白。 |
|   | 通常の「半角スペース」よりも「少し広め」の空白。（半角スペース2個分） |
|   | 通常の「半角スペース」よりも「さらに広め」の空白。（半角スペース3個分）（タブ） |
などがある。
「空白」を表示する「特殊文字」の実際の表示幅を見れる「サンプルコード」
| 特殊文字 | 実際のスペース |
|---|---|
|   | 空白の前 空白の後 |
| | 空白の前 空白の後 |
|   | 空白の前 空白の後 |
|   | 空白の前 空白の後 |
Back
「空白」の特殊文字コード「 」を使用して「タブ（空白）」のようにする
「空白」の特殊文字コード「 」を使用して「タブ（空白）」のようにする。
「 3つ」入力すると、
「タブ（空白） 1つ」と同じぐらいの「幅」となる。
「空白」の特殊文字コード「 」を使用する「書式」
入力と出力結果
 先頭に「タブ（空白）」を「1つ」表示する先頭に「タブ（空白）」を「1つ」表示する
入力と出力結果
先頭に「空白」を「1つ」表示する先頭に「空白」を「1つ」表示する
入力
先頭に「タブ（空白）」と同じぐらいの「空白」を表示する 先頭に「タブ（空白）」を「1つ」表示する
出力結果
先頭に「タブ（空白）」と同じぐらいの「空白」を表示する先頭に「タブ（空白）」を「1つ」表示する
Back
特殊文字「 」を使って「タブ（空白）」を表示する
「タブ（空白）」は、
入力しても、何も文字が表示されない「キー」で、
「空白」を挿入したい時に使用される。
目には見えないが、
「スペース」ではなく、
しっかりと「タブ」という「空白」で認識されている。
主な利用目的は、
「文章」の開始位置を揃える目的や、
文字列の「インデント（行頭空白）」を確保する際に良く利用される。
一般的には、
「タブ（空白）」は、
「8バイト分のスペース（全角4文字相当）」の空白が確保されることが多いらしい。
「HTML」では、
「スペース」の特殊文字「 3個」で、
「タブ」の特殊文字「  1個」に相当する幅になるようです。
「HTML」では、
「タブ（空白）」を表示するには、
「特殊文字」の「 」という「文字コード」を使用する。
方法は簡単で、
「 」を「タブ（空白）」を表示させたい場所に記述するだけ。
「文字列」の「先頭」「途中」「末尾」の
どこでも「タブ（空白）」を表示することができる。
「タブ（空白）」を表示するサンプルコード
入力と出力結果
 先頭に「タブ（空白）」を「1つ」表示する先頭に「タブ（空白）」を「1つ」表示する
入力と出力結果
  先頭に「タブ（空白）」を「2つ」表示する先頭に「タブ（空白）」を「2つ」表示する
入力と出力結果
   先頭に「タブ（空白）」を「3つ」表示する先頭に「タブ（空白）」を「3つ」表示する
入力と出力結果
    先頭に「タブ（空白）」を「4つ」表示する先頭に「タブ（空白）」を「4つ」表示する
入力と出力結果
文字列の 途中に 「タブ（空白）」 を表示する文字列の 途中に 「タブ（空白）」 を表示する
Back
「リスト」を使用して「インデント（先頭空白）」を表示する
「タブ（空白）」ではないが、
「行頭」に「空白」を適用する方法がある。
「HTML」では、
「リスト」を使用することで、
「インデント（行頭空白）」が適用され、
「タブ（空白）」を入力したようにできる。
「HTML」で「リスト」を使用する「書式」
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>
- リスト項目1
- リスト項目2
- リスト項目3
Back
