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

HTML では、単語と段落の間に余分なスペースを追加する方法は、Microsoft Word などのアプリケーションとは異なります。でも心配しないでください。単語とテキストの行間の間隔を制御する最も簡単な方法と、各段落の先頭に余分なスペースを追加してページ上で正しくインデントされるようにする方法を紹介します。この記事では、HTML コードにスペースを追加するさまざまな方法を説明します。

方法1方法1/4:

単語の間に余分なスペースを追加する

1テキストエディターで HTML コードを開きます。 Windows のメモ帳や MacOS の TextEdit など、コードを編集できる任意のテキストエディターを使用できます。スペースバーを複数回押して単語や文字の間に余分なスペースを追加しても、Web ページにはそれらの余分なスペースは表示されません。HTML は複数のスペースを自動的に 1 つのスペースに変換します。この問題は、スペースバーを押す代わりに、改行なしスペースを使用することで修正できます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/593311-2.jpg\/v4-460px-593311-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/593311-2.jpg\/v4-728px-593311-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2スペースを挿入する場所に「 」と入力します。スペースを追加するには、改行しないスペース文字を入力する必要があります。 HTML コードでスペースバーを繰り返し押す場合とは異なり、  と入力すると、同じ数のスペースが表示されます。 ^{[1] X研究ソース}
- たとえば、「何を学びますか」と「今日は?」の間に 3 つのスペースを表示したいとします。スペースバーを 3 回押す代わりに、その間に   と入力することもできます。次に例を示します。
```
 <!DOCTYPE html>
<html>
<ヘッド>
< title > wikiHow: 信頼できるハウツー解説。 </ title >
</ヘッド>
<本文>
< p >今日は何を学びますか? </ p >
</本文>
</html>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/593311-3.jpg\/v4-460px-593311-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/593311-3.jpg\/v4-728px-593311-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3より便利な方法は、他のスペース文字を使用することです。たとえば、スペースを 2 つ、スペースを 4 つ挿入したり、行の先頭をインデントしたりする場合は、必ずしも を繰り返し入力する必要はありません。
- スペース 2 つ: &ensp;と入力します。
- 4 つのスペース: &emsp;と入力します。
広告する

方法2方法2/4:

貼り付けたテキスト内のスペースを保持する

1 HTML コードを開きます。コードに空白を追加する別の方法は、HTML <pre>タグを使用することです。このマークアップは基本的に、スペースも含めて、入力または貼り付けたとおりにテキストを表示します。まず、Windows のメモ帳や MacOS の TextEdit などのテキストエディターでコードファイルを開きます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2d\/593311-5.jpg\/v4-460px-593311-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2d\/593311-5.jpg\/v4-728px-593311-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2ドキュメントの本文に<pre> </pre>タグを入力します。特定の数のスペースや改行で事前にフォーマットされたままにしておきたいテキストは、次のタグの間に配置されます。
```
 <!DOCTYPE html>
<html>
<ヘッド>
< title > wikiHow: 信頼できるハウツー解説。 </ title >
</ヘッド>
<本文>
<前> </前>
</本文>
</html>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/22\/593311-6.jpg\/v4-460px-593311-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/22\/593311-6.jpg\/v4-728px-593311-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 「<pre>」タグと「<pre>」タグの間にテキストを入力するか貼り付けます。この場合、単語と改行の間に 3 つのスペースを残します。テキストをフォーマットすると、単語間のスペースや、「Enter」キーまたは「Return」キーを押して入力した改行が Web ページに表示されます。 ^{[2] X研究ソース}
```
<!DOCTYPE html>
<html>
<ヘッド>
< title > wikiHow: 信頼できるハウツー解説。 </ title >
</ヘッド>
<本文>
< pre >あなたは何をしますか   
今日は何を学びますか？ </ pre >
</本文>
</html>
```
広告する

方法3方法3/4:

空白行（改行）を挿入する

1テキストエディターで HTML コードを開きます。ページ上の段落やその他の要素の間に余分なスペースを追加したいですか?コード内で Enter キーまたは Return キーを繰り返し押しても効果はありませんが、改行マーカー<br>を追加すると目的の動作が実現します。まず、編集したいページの HTML コードを開きます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/09\/593311-8.jpg\/v4-460px-593311-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/593311-8.jpg\/v4-728px-593311-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2空白のままにしておきたい行ごとに<br>と入力します。たとえば、2 つの段落の間に余分な空白行を挿入したい場合は、 <br> を1 回入力するだけです。ただし、改行を 3 つ追加する場合は、次のように 3 回入力します: <br><br><br> 。
- この例では、文の間に 2 つの空白行を追加します。
```
 <!DOCTYPE html>
<html>
<ヘッド>
< title > wikiHow: 信頼できるハウツー解説。 </ title >
</ヘッド>
<本文>
< pre >あなたは何をしますか  
今日は何を学びますか？ </ pre >
< br >< br >
< p >たくさんのことが学べますよ！ </ p >

</本文>
</html>
```
広告する

方法 4方法4/4:

段落のインデント

1 HTML ファイルを開きます。段落の先頭を特定の位置、たとえば 10 ピクセルだけインデントしたい場合、これを行う最適な方法の 1 つは CSS (Cascading Style Sheets) を使用することです。各段落を手動でインデントする方法と、すべての段落を一度にインデントする方法の 2 つの方法について説明します。まず、テキストエディターで HTML ファイルを開きます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cb\/593311-10.jpg\/v4-460px-593311-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cb\/593311-10.jpg\/v4-728px-593311-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 段落を 1 つインデントします。例の段落をインデントしたい場合は、<p> タグにtext-indent属性を追加します。この例では、段落を 10 ピクセルインデントします。
```
 <!DOCTYPE html>
<html>
<ヘッド>
< title > wikiHow: 信頼できるハウツー解説。 </ title >
</ヘッド>
<本文>
< p style = "text-indent:10px" >インターネット上で最も信頼されているハウツーサイト、wikiHow へようこそ。wikiHow は、信頼できる調査と専門知識が集まる場所です。 </ p >
< p > 2005 年以来、wikiHow は数十億人もの人々が大小さまざまな問題を解決する方法を学ぶ手助けをしてきました。私たちは、資格を持った専門家、訓練を受けた研究者のチーム、熱心なコミュニティと協力して、インターネット上で最も信頼性が高く、包括的で、楽しいハウツー コンテンツを作成しています。 </ p >
</本文>
</html>
```
- text-indentプロパティは最初の段落にのみ追加されるため、この段落のみがインデントされます。この記事を読み続けると、ページ上の 1 つの段落だけでなくすべての段落を同じようにインデントする方法を学習できます。

3 CSS のスタイルセクションを作成します。ページ上のすべての段落をインデントしたい場合は、CSS で段落スタイルを定義します。スタイルセクションは、HTML コードのヘッダーまたは別のスタイルシートに配置する必要があります。ヘッダーの <head> タグと </head> タグの間にスタイルセクションを追加します。

 <!DOCTYPE html>
<html>
<ヘッド>
< title > wikiHow: 信頼できるハウツー解説。 </ title >
<スタイル>
</スタイル>
</ヘッド>
<本文>
< p style = "text-indent:10px" >インターネット上で最も信頼されているハウツーサイト、wikiHow へようこそ。wikiHow は、信頼できる調査と専門知識が集まる場所です。 </ p >
< p > 2005 年以来、wikiHow は数十億人もの人々が大小さまざまな問題を解決する方法を学ぶ手助けをしてきました。私たちは、資格を持った専門家、訓練を受けた研究者のチーム、熱心なコミュニティと協力して、インターネット上で最も信頼性が高く、包括的で、楽しいハウツー コンテンツを作成しています。 </ p >
</本文>
</html>

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fb\/593311-12.jpg\/v4-460px-593311-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fb\/593311-12.jpg\/v4-728px-593311-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4スタイル領域にインデントコードを入力します。 1 つの段落だけではなく、すべての段落の先頭を 10 ピクセルインデントします。これは、各段落の最初の単語の先頭に 10 ピクセルのスペースを自動的に追加する段落タグ (<p>) のスタイルを作成することを意味します。元の例のtext-indentプロパティは今は必要ないので削除する必要があります。プロパティは次のようになります。
```
 <!DOCTYPE html>
<html>
<ヘッド>
< title > wikiHow: 信頼できるハウツー解説。 </ title >
<スタイル>
ｐ { 
	テキスト：インデント： 10px ;
</スタイル>
</ヘッド>
<本文>
< p >インターネット上で最も信頼されているハウツーサイト、wikiHow へようこそ。wikiHow は、信頼できる調査と専門知識が集まる場所です。 </ p >
< p > 2005 年以来、wikiHow は数十億人もの人々が大小さまざまな問題を解決する方法を学ぶ手助けをしてきました。私たちは、資格を持った専門家、訓練を受けた研究者のチーム、熱心なコミュニティと協力して、インターネット上で最も信頼性が高く、包括的で、楽しいハウツー コンテンツを作成しています。 </ p >
</本文>
</html>
```
- 「text-indent:」の後に異なる数値を入力することで、スペースの量を調整できます。
- インデントのサイズは、ピクセル以外の単位、たとえばパーセンテージ (例: "text-indent: 15%;") や寸法 (例: "text-indent: 3mm;") で定義することもできます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/593311-13.jpg\/v4-460px-593311-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/593311-13.jpg\/v4-728px-593311-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5各段落の先頭に<p>と入力します。 <p> タグをインデントするための具体的な指示を追加したので、ページ上のすべての段落は 2.5em インデントされます。これは既存の段落だけでなく、その後ページに追加された新しい段落にも適用されます。
広告する

ヒント

Web ブラウザでスペースが文字化けして表示される場合は、オンライン表示には使用されないワードプロセッサ形式で余分なデータが保存されていることが原因と考えられます。メモ帳や TextEdit などのプレーンテキストエディタを使用すると、これを回避できます。
CSS は、テキスト間隔の設定など、ページレイアウトを設定するためのより強力で予測可能な方法です。

広告する

<<: 自宅で浣腸をする方法

>>: iPhoneからMacに写真を転送する方法