PDF形式でダウンロード PDF形式でダウンロード

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

関連記事

画像検索で簡単に人物を特定する画像検索で簡単に人物を特定する
XMLファイルを開くXMLファイルを開く
EMLファイルを開くEMLファイルを開く
ウェブサイトの公開日を調べるウェブサイトの公開日を調べる
特定のウェブサイトにアクセスできない問題を解決する特定のウェブサイトにアクセスできない問題を解決する
JPGをPDFに変換する
DVDプレーヤーを接続するDVDプレーヤーを接続する
電話が盗聴されているか調べる電話が盗聴されているか調べる
2台のパソコンを接続する2台のパソコンを接続する
ワイヤレスマウスを接続するワイヤレスマウスを接続する
DLLファイルを開くDLLファイルを開く
キズの付いたCDを修復する
2台のルーターを接続する2台のルーターを接続する
VCFファイルを開くVCFファイルを開く
広告

このwikiHow記事について

Travis Boylls
共著者 ::
IT専門家
この記事の共著者 : Travis Boylls. テクノロジーに関する記事の執筆、ソフトウェアー関連のカスタマーサポート、そしてグラフィックデザインの実務経験を持つトラヴィス・ボイルスは、wikiHowにてテクノロジー記事の制作と編集者の業務を担当しています。パイクスピーク・コミュニティー・カレッジにてグラフィックデザインを学び、Windows、macOS、Android、iOS、Linuxのシステムに精通しています。 この記事は6,722回アクセスされました。
このページは 6,722 回アクセスされました。

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

広告