通常、スペースキーやタブキー、リターンキーなどで入力できる文字や文章間の間隔は、コードを書く場合、すべて無視されてしまいます。HTMLは、すべて単語間の空白として解釈し、単一のスペースを表示します。CSSでは、空白やインデントについて細かいスタイルの設定ができるのに対し、HTMLでは、文字の間隔をカスタマイズする数種類の方法があります。

方法 1 の 2:
単一のスペースとタブを挿入する

  1. 1
    ノーブレークスペースを挿入する 一般的に、スペースキーを何回押しても、HTMLはスペースを1つしか表示しません。複数のスペースを表示させたい場合は、  もしくは、   と入力しましょう。[1] このコードを入力すると、「ノーブレークスペース」と呼ばれる文字が表示されます。
    • このスペースは、入力された箇所で自動的な改行(ブレーク)を防ぐため、ノーブレークスペースと呼ばれます。このスペースを使用しすぎると、ブラウザが改行を挿入しにくくなってしまい、きちんとした読みやすい文章が表示されません。[2]
  2. 2
    異なる長さの空白を入力する ノーブレークスペースのほかにも、ブラウザに空白を表示させるための文字がいくつかあります。ブラウザによって、表示方法が若干異なる場合がありますが、  と違って、改行には影響を与えません。[3][4]
    •   — 活版印刷機の「N」と同じ幅であることから名付けられたenスペースは、通常のスペース2つ分の幅です。
    •   — emスペースは、通常のスペースのおおよそ4つ分の幅です。
  3. 3
    ノーブレークスペースを使ってタブを表現する 段落をインデントするひとつの手段が、「    」のように、 複数のノーブレークスペースを連続で挿入することです。HTMLのみで実現できる方法ですが、CSSを扱うことができる場合は、推奨されない方法です(CSSを使用した方法は、別のステップで説明します)。
  4. 4
    CSSを使用して段落をインデントする CSSのpadding(パディング、内側の余白)やmargin(マージン、外側の余白)を使用すると、ブラウザに細かい指示を与えることができ、ブラウザ間でも矛盾の少ない表示になります。CSSについて詳しくない場合、またはスタイルシートを使用していない場合でも、簡単にインデントを追加できます。以下は、段落全体を右側にシフトする例です。[5]
    • HTMLコードの<head></head>セクションに、次のコードを挿入します。
      <style>p.indent{ padding-left: 1.8em }</style>
      「p.indent」は、「indent」という名前の段落(pタグ)を定義しています(段落の名前は自由に変更できます)。残りのコードで、段落の左に余白「padding」を追加しています。
    • HTMLコードのbody部分に戻ります。段落をインデントしたい場所があれば、次のタグの中にテキストを入れましょう。
      <p class="indent"></p>
    • インデントの幅を調整したい場合は、CSSコードの「1.8」という数字を変更します。数字の後ろにある「em」は残しましょう。「em」は、フォントサイズと連動した長さの単位です。[6]
    広告

方法 2 の 2:
長い段落をフォーマットする

  1. 1
    整形済みテキストを使用する <pre></pre> タグの中で入力された space Enter は、そのまま表示されます。ソースコードの例や、詩など、正確なスペースの位置や改行が重要な文章を表示する際に使用できるでしょう。[7]
    • 整形済みテキストの欠点は、幅が固定されることです。通常のHTMLと異なり、ウィンドウのサイズに合わせて幅が変更されません。[8]
  2. 2
    改行を入れる <br> タグは、現在の行を終了します。 複数のbrタグで改行を入れることができます。HTML初心者には十分なアプローチですが、CSSを学んだ後に、このような強制的なHTMLのスタイリングの使用することは推奨されません。
  3. 3
    pタグで段落を定義する <p></p> タグで囲まれたテキストは、段落として定義されます。ほとんどのブラウザは段落を空行で区切りますが、正確なスタイルは保証できません。[9]
    広告

ポイント

  • コードの中に余分な記号があった場合は、最終的な見た目をダブルチェックして、「<br>」ではなく「<br」のように、閉じられていないタグがないか確認しましょう。
  • CSSは、文字の間隔を調整することも含め、ページをレイアウトするための、強力かつ動作が予測可能な方法です。
  • 開始タグの直後や終了タグの直前に空白を入れることは避けましょう。例えば、「空白あり<a> Tutorial </a>」ではなく、「空白なし<a>Tutorial</a>」としましょう。[10]
  • ノーブレークスペース( )は、キーボードでは入力できない文字を参照した文字実体参照の例です。

広告

注意事項

  • Tab (&#09;) に対応するHTMLコードは、想像通りに動作しません。標準的なHTML文書にはタブストップが存在しないため、タブのコードは何もしません。
  • HTMLコードは、Wordなどのワープロ文書のファイル形式ではなく、常にコードエディター、またはプーレンテキストのファイルに書きましょう。ブラウザ上で、スペースが奇妙な記号になってしまった場合、ブラウザ上で表示されることを意図していない、ワープロ文書ファイルで保存された余分なデータが原因となっている可能性が高いでしょう。
広告

関連記事

How to

XMLファイルを開く

How to

EMLファイルを開く

How to

画像検索で簡単に人物を特定する

How to

ワイヤレスマウスを接続する

How to

キズの付いたCDを修復する

How to

VCFファイルを開く

How to

コマンドプロンプトでファイルをコピーする

How to

特定のウェブサイトにアクセスできない問題を解決する

How to

DLLファイルを開く

How to

Chromeでタブを切り替える

How to

winmail.datを開く

How to

大容量の動画ファイルをメールで送る

How to

DVDプレーヤーを接続する

How to

2台のパソコンを接続する
広告

このwikiHow記事について

wikiHow編集チーム
共著者
wikiHowスタッフ編集者
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。 この記事は5,455回アクセスされました。
このページは 5,455 回アクセスされました。

この記事は役に立ちましたか?

広告