HTMLでスペースを挿入する方法

2 方法:単一のスペースとタブを挿入する長い段落をフォーマットする

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

1
単一のスペースとタブを挿入する

  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
長い段落をフォーマットする

  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などのワープロ文書のファイル形式ではなく、常にコードエディター、またはプーレンテキストのファイルに書きましょう。ブラウザ上で、スペースが変な記号になってしまった場合、ブラウザ上で表示されることを意図していない、ワープロ文書ファイルで保存された余分なデータが原因となっている可能性が高いでしょう。

記事の情報

カテゴリ: パソコン・エレクトロニクス

他言語版:

English: Insert Spaces in HTML, Español: insertar espacios en HTML, Português: Inserir Espaços no HTML, Français: insérer des espaces dans un code HTML, Русский: вставить пробелы в HTML, Italiano: Inserire gli Spazi in HTML, Deutsch: Leerzeichen in HTML einfügen, 中文: 在HTML中插入空格, Bahasa Indonesia: Menyisipkan Spasi Dalam HTML, Nederlands: Spaties in HTML toevoegen, العربية: إدراج مسافات في لغة اتش تي ام ال, ไทย: เว้นวรรคห่างๆ ใน HTML, 한국어: HTML에 공백 넣는 방법

このページは 570 回アクセスされました。

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