WebページまたはHTMLでテキストをインデントまたはタブするにはどうすればよい

更新：02/01/2021コンピュータ希望によって

テキストをインデントするさまざまな方法があります。しかし、との互換性を維持するため、複数のブラウザおよびアクセシビリティについて議論しま最も人気の方法の記述テキストユーザーは、ウェブページです。

CSSで推奨される方法&HTML

テキストや段落をインデントするために、最も一般的に使用され、推奨される方法はCSSを使用する以下は、CSSがテキストをインデントする方法の異なる例です。, これらの例はそれぞれ、<head></head>HTMLタグの間に配置されます。

次の例では、テキストと段落を左から40ピクセルインデントする”tab”という名前のスタイルクラスを作成します。

<style type="text/css"><!-- .tab { margin-left: 40px; }--></style>

上記のコードが<head>セクションにあると、次のように段落（<p>）タグに追加することで使用できます。,

<p class="tab">Example of a tab</p>

HTMLドキュメントにCSSを含めることは、上記のように”インライン”CSSと呼ばれます。それはすぐに変更を加えるのに便利ですが、長期的には、後で変更することは困難です。

代わりに、すべてのCSSコードを取得し、拡張子を付けて別のファイルに配置できます。cssです。次に、任意のHTML文書からこのファイルにリンクすることができ、その文書はそれらのCSSプロパティを使用できます。外部CSSファイルを使用すると、すべてのCSSが一箇所に定義されているため、後でCSSを変更するのが簡単になります。

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

一度これ。,cssファイルが作成され、ファイルを編集し、<スタイル>とコメントタグを除いて、同じCSSコードを追加します。

.tab { margin-left: 40px; }

最後に、上記の手順が完了すると、同じ<p class=”tab”>上記の例を使用して任意のテキストをタブで移動できます。

インデントの他の形式もあります。たとえば、段落の最初の行だけをインデントしたい場合は、上記のCSS行を使用する代わりに、次の行を使用します。,

.tab { text-indent:40px }

Tip

パーセンテージを使用してインデントすることもできます。たとえば、40px(ピクセル)でインデントする代わりに、インデントを5%に置き換えて、現在のビューの5%でテキストをインデントできます。また、インデントの幅を定義するときにemスペースを使用することもできます。

ボーナスヒント

margin-leftをmargin-rightに変更することで、左インデントから右インデントに変更することもできます。

HTMLを使用する推奨メソッド

HTML内のインラインスタイルで上記と同じ結果を達成することができます。, 上記のCSSの例を使用すると、複数のwebページにわたって維持することが容易になりますが、スタイルを一度だけ使用する必要がある場合は、次の例を

<p style="margin-left: 40px">This text is indented.</p>

この最初の例では、段落タグ内のすべてのテキストが左から40ピクセルインデントされています。その他の段落タグはインデントされません。

<p style="text-indent: 40px">This text is indented.</p>

この第二の例では、段落内のテキストの最初の行のみが左から40ピクセルインデントされます。その段落内の追加のテキスト行はインデントされません。,

Tip

パーセンテージを使用してインデントすることもできます。たとえば、40px(ピクセル)でインデントする代わりに、インデントを5%に置き換えて、テキストを現在のビューの5%インデントすることができます。また、インデントの幅を定義するときにemスペースを使用することもできます。

Tip

margin-leftをmargin-rightに変更することで、左インデントから右インデントに変更することもできます。

別の方法

テキストをインデントする別の一般的な（ただし不適切な）方法は、次の例に示すように、<blockquote>タグです。, これは簡単な解決策ですが、アクセシビリティの問題が発生します。このタグは引用文字ではなく記述.

<blockquote>This text would be indented</blockquote>

追加情報

HTMLコードを書くときにインデントする必要がありますか？
HTMLまたはwebページに余分なスペースを作成する方法。
関連情報とリンクについては、インデント定義を参照してください。
HTMLおよびwebデザインのヘルプとサポート。

Good Mood