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

ページ名：HTMLにスペースを挿入する方法

HTMLで単語や段落の間に余分なスペースを追加するのは、Microsoft Wordのようなアプリケーションとは大きく異なります。単語や段落の間隔を調整する最も簡単な方法と、段落の先頭にスペースを追加してページ上で適切にインデントする方法をご紹介します。このWikiHowでは、HTMLコードにスペースを追加するさまざまな方法をご紹介します。

方法1

単語と単語の間にスペースを追加する

  1. テキストエディタでHTMLを開きます。Windowsならテキストエディタ、macOSならTextEditなど、どのテキストエディタでもコードを編集できます。スペースバーを何度も押して単語や文字の間に余分なスペースを入れても、ウェブページにはその余分なスペースは表示されません-HTMLは自動的に複数のスペースを1つのスペースに変換します。スペースバーを押す代わりに、改行しないスペース文字を使用することで、この問題を解決できます。
  2. 余分なスペースを挿入したい場所に と入力します。追加したいスペースごとに、改行しないスペース文字を1つ追加します。HTMLコードの中でスペースバーを何度も押すのとは違い、 を複数回入力すると、 の数だけスペースができます。 たとえば、
    • "What will you learn "と "today? "の間に3つのスペースを入れたい
    場合を考えてみましょう。
    • スペースキーを3回押す代わりに、2つのセグメントの間に   と入力します。以下はその例です：
      <!DOCTYPE html> <html> <head> <title>ウィキハウ：信頼できるハウツー説明書
      。
      </title> </head> <body> <p>あなたは今日何を学びますか？
  3. 他のスペース文字をショートカットとして使う。2つのスペース、4つのスペース、行頭のインデントを挿入したい場合、&nbsp;を何度も入力する必要はありません：
    • スペース2つ：と入力する；
    • 4つのスペース： と入力する；
方法2

貼り付けたテキストにスペースを維持する

  1. HTMLコードを開いてください。コードにスペースを追加するもう一つの方法は、HTMLの<pre>タグを使うことです。このタグは基本的に、あなたが入力したり貼り付けたりしたテキストを、スペースも含めてそのまま表示します。まず、Windowsならメモ帳、macOSならTextEditのようなテキストエディタでコードを開きます。
  2. 文書の本文に<pre> </pre>タグを入力する。特定の量のスペースや改行で整形しておきたいテキストは、これらのタグの間に入れる：
    <!DOCTYPE html> <html> <head> <title>wikiHow：信頼できるハウツー説明書</title> </head> <body> <pre> </pre> </body> </html>
  3. <pre>」タグと「<pre>」タグの間に、意図したとおりにテキストを入力または貼り付けます。この例では、単語と単語の間に3つのスペースと改行を入れています。テキストをあらかじめフォーマットしておくと、"Enter "や "Return "を押して作成した改行と同様に、単語間のスペースもウェブページに表示されます。
    <!DOCTYPE html> <html> <head> <title>ウィキハウ: 信頼できるハウツー解説</title> </head> <body> <pre>今日は何を学びますか?
方法3

空行（改行）を入れる

  1. テキストエディタでHTMLコードを開いてください。段落やページ上の他の要素の間に余分なスペースを追加したいですか？コードの中でEnterやReturnを何回も押してもうまくいきませんが、改行タグ<br>を追加すればうまくいきます！ まず、編集したいページのHTMLコードを開いてください。
  2. 空白にしたい各行に<br>と入力します。例えば、2つの段落の間に横1行の空行を挿入したい場合は、<br>を1回入力するだけです。しかし、改行を3回入れたい場合は、<br><br><br>と3回入力します。
    • この例では、文章と文章の間に2行の余分なスペースを追加しています：
      <!DOCTYPE html> <html> <head> <title>wikiHow：信頼できるハウツー解説。</title> </head> <body> <pre>今日は何を学びますか？</pre> <br><br> <p>たくさん学ぶことができます！</p> </body> </html> <html> <pre><br> <pre>今日は何を学びますか？
方法4

段落のインデント

  1. HTML文書を開きます。例えば、段落の先頭を10ピクセルほどインデントしたいとします。これを実現するには、CSS（カスケーディング・スタイル・シート）を使うのが一番です。段落ごとに手動でインデントする方法と、すべての段落を一度にインデントする方法です。まず、テキストエディタでHTML文書を開きます。
  2. 一つの段落をインデントします。この例の段落をインデントするには、<p>タグにtext-indentプロパティを追加します。この例では、段落を10pxインデントします：
    <!DOCTYPE html> <html> <head> <title>wikiHow: How-to instructions you can trust.</title> </head> <body> <p style="text-indent:10px">Welcome to wikiHow, the most trusted how-to site on the internet.</p> <p>2005年以来、ウィキハウは何十億もの人々が大小さまざまな問題を解決する方法を学ぶ手助けをしてきました。</p> <p>2005年以来、ウィキハウは何十億もの人々が大小さまざまな問題の解決方法を学べるよう、信頼できる専門家、訓練を受けた研究者チーム、献身的なコミュニティと協力して、インターネット上で最も信頼性が高く、包括的で楽しいハウツーコンテンツを作成しています。
    • 最初の段落だけにtext-indentプロパティを追加したので、インデントされるのはその段落だけです。1つの段落だけでなく、ページ上のすべての段落を同じようにインデントする方法については、この先をお読みください！
  3. CSSのスタイルセクションを作成します。ページ上のすべての段落をインデントするには、CSSで段落スタイルを定義します。スタイル・セクションは、HTMLコードのhead、または.NETに記述します。私たちのものを、<head>タグと</head>タグの間にあるheadに追加してみましょう：
    <!DOCTYPE html> <html> <head> <title>wikiHow: How-to instructions you can trust.</title> <style> </style> </head> <body> <p style="text-indent:10px">Welcome to wikiHow, the most trusted how-to site on the internet.</p> <p>2005年以来、ウィキハウは何十億もの人々が大小さまざまな問題を解決する方法を学ぶ手助けをしてきました。私たちは、信頼できる専門家、訓練を受けた研究者チーム、献身的なコミュニティと協力し、インターネット上で最も信頼性が高く、包括的で楽しいハウツーコンテンツを作成しています</p> </body> </html> </p> <p>ウィキハウは、インターネット上で最も信頼性が高く、包括的で楽しいハウツーコンテンツを作成しています。
  4. インデント・コードをスタイル・エリアに入力します。つまり、すべての段落を10pxのスペースから始めたいのです。つまり、段落タグ（<p>）に、各段落の最初の単語の先頭に10pxのスペースを自動的に追加するスタイルを作成する必要があります。また、元の例からtext-indentプロパティを削除します。プロパティは次のようになります：
    <!DOCTYPE html> <html> <head> <title>wikiHow：信頼できるハウツー説明</title> <style> p { text:indent：</style> </head> <body> <p>インターネット上で最も信頼されているハウツーサイト、wikiHowへようこそ。私たちは、信頼できる専門家、訓練を受けた研究者チーム、献身的なコミュニティと協力し、インターネット上で最も信頼性が高く、包括的で楽しいハウツーコンテンツを作成しています</p> </body> </html> </p> <p>ウィキハウは、インターネット上で最も信頼性が高く、包括的で楽しいハウツーコンテンツを作成しています。
    • text-indent:」の後に別の数字を入力することで、スペースの数を調整することができます。
    • ピクセル以外の単位を使って、パーセンテージ（例："text-indent: 15%;"）や寸法（例："text-indent: 3mm;"）でインデントの大きさを定義することができます。
  5. 各段落の最初に<p>と入力します。<p>タグをインデントするよう特別な指示を追加したので、ページ上のすべての段落が2.5emインデントされます。これは、既存の段落も、ページに追加する新しい段落も同じです。

    サンプルHTMLコード

    この記事は、CC BY-NC-SAの下で公開されている " How to Insert Spaces in HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

    シェアボタン： このページをSNSに投稿するのに便利です。

    コメント

    返信元（返信をやめる）

    ※ 悪質なユーザーの書き込みは制限します。
    最新を表示する
    NGIDの確認

    NG表示方式

    NGID一覧