著者:
Monica Porter
作成日:
22 行進 2021
更新日:
25 六月 2024
![HTML&CSS基礎編 #5 HTMLでホームページに画像を表示させてみよう!画像の高さや幅の調整方法も説明します。 HTML初心者向け講座](https://i.ytimg.com/vi/33f2pXyLv3U/hqdefault.jpg)
コンテンツ
通常、スペース、タブキー、入力キーを使用して作成される多くのスペースは、Webプログラミング言語ではすべて無視されます。 HTMLは、それらすべてを単語間の通常のスペースとして定義し、単一のスペースのみを表示します。 CSSを使用すると、ユーザーは空白と配置に関する詳細を設定できますが、HTMLには、間隔をカスタマイズするための組み込みツールがいくつかありません。
手順
方法1/2:スペースと単一のタブを挿入する
挿入スペースは壊れていません。 通常、HTMLは、スペースバーを何度押しても、単語間に1つのスペースしか表示しません。複数の連続したスペースを表示するには、またはを入力します。このコードは「非破壊スペース」と呼ばれる特別な文字を作成し、それは常に表示されます。- 上記の文字は、改行が配置されないようにするため、「破壊不可能なスペース」と呼ばれます。この文字をやりすぎると、ブラウザは改行を順番に垂直に挿入するのが困難になります。
幅の異なるスペースを挿入します。 ブラウザにスペースを表示する必要がある他のエンティティ文字がいくつかあります。これらのスペースが異なるブラウザで表示される方法は少し異なりますが、次のコードとは異なり、改行には影響しません。- -プリンタの「N」スペース(測定単位)にちなんで名付けられました。スペース「en」は通常のスペースの2倍の幅です。
- -「em」スペース。ほぼ4つのスペースに相当します。
非破壊的なスペースが十分にあるタブをシミュレートします。 段落をインデントするには、破壊できないスペースを連続して挿入できます。これは、HTMLのみを使用する場合の唯一の解決策ですが、CSS(以下の手順で個別に説明)を使用する場合は短くなります。- テキストの複雑な表現がある場合は、preタグを使用してください。
段落をCSSに合わせます。 CSSの「margin」プロパティと「padding」プロパティはブラウザに直接指示を与えるため、表示される結果の一貫性が高まります。 CSSについて何も知らず、ページにスタイルシートがない場合を除いて、この方法を実装するのは難しくありません。段落全体を右マージンに移動する方法の例を次に示します。- セクションで HTMLドキュメントの次のコードを挿入します。
ここで、「p.indent」はテキスト(pタグ)名「indent」の属性を定義します(別の名前を使用できます)。コードの残りの部分は、段落の左側に「パディング」スペースの機能を追加します。 - ここで、HTMLドキュメントの本文に戻ります。段落をインデントする場合はいつでも(この例では「インデント」のまま)、次のコードに段落を配置します。
- インデント間隔を揃えるには、CSSコードの数値「1.8」を変更します。これはフォントサイズに関連付けられた長さの単位であるため、「em」を後ろに置いてください。
- セクションで HTMLドキュメントの次のコードを挿入します。
方法2/2:より長いギャップを設定する
事前にフォーマットされたタグを使用します。 任意のキー スペース 良い ↵入力 カードに入力されています入力したとおりに表示されます。このタグを使用して、例、詩、または間隔と改行の高精度を必要とするその他のテキストを表示することもできます。
- 事前にフォーマットされたカードの主な欠点は幅です。通常のHTMLとは異なり、事前にフォーマットされたテキストは、ユーザーのウィンドウサイズに合わせてサイズ変更されません。
改行を作成します。 カード
現在のテキスト行を終了します。複数の改行タグを使用して空白行を作成できます。 HTMLを初めて使用する学生にとって、これは良いアプローチですが、CSSを学んだ場合は、この必須のHTML形式はお勧めしません。
「p」タグで段落を識別します。 テキストの周りのタグは、その段落を識別します。ほとんどのブラウザは段落を空白行で区切りますが、テキストの一貫した形式を保証することはできません。広告
助言
- Webページの表示を最後に確認したときに、スニペットの周囲の異常な位置に冗長な文字が表示されている場合は、次のような不完全なタグがないかどうかを再確認してください。 <> の代わりに
. - CSSは、テキストの間隔など、Webページを表示するためのより強力でプロアクティブなツールです。
- 開いたタグの後ろまたは閉じたタグの前の突然のスペースを制限します。たとえば、スペースを書く必要があります チュートリアル スペースではありません チュートリアル .
- 破壊不可能なスペースは、エンティティ文字の例です。キーボードから入力できない文字を表すコードです。
警告
- HTML属性はキーを表します タブ↹ 実際、あなたが思うほど効果的ではありません。標準のHTMLドキュメントにはタブストップがないため、タブ文字は効果がありません。
- HTML言語は、常にコードエディターまたはプレーンテキストファイルで記述してください。テキストファイル処理形式は使用しないでください。 Webブラウザでスペースが奇妙な文字になった場合は、オンライン表示を目的としていないワードプロセッサによって追加された過剰なデータが原因である可能性があります。