Webでテキストインデントを使用する必要がありますか?


11

ウェブサイトにテキストインデントを追加することを検討しました(段落の最初の行がインデントされています)が、最初に少し検索したところ、多くのサイトにテキストインデントがないことがわかりました。何故ですか?段落がどこから始まるのかが明確になると思いましたが、なぜもっと頻繁に使われないのですか?

深刻な欠点はありますか、それとも単なるファッション/トレンドの問題ですか?

回答:


8

段落はいくつかの方法で分離できます。

インデント

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Curabitur in orci pellentesque, volutpat metus eget, interdum 
mauris. 
    Nunc faucibus lectus id libero blandit, et varius augue 
vehicula. Cras eu dictum libero, a elementum velit. Fusce 
ultrices malesuada elit, et convallis massa tristique in. 
    Vivamus vel urna eget orci tincidunt luctus eget ac tortor. 
Integer faucibus ante eu mauris faucibus, sit amet tincidunt 
velit rhoncus. Proin a pellentesque nunc. Aliquam vitae neque 
sit amet neque aliquam ultrices eget vitae urna. 

空白行/空白

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Curabitur in orci pellentesque, volutpat metus eget, interdum 
mauris. 

Nunc faucibus lectus id libero blandit, et varius augue 
vehicula. Cras eu dictum libero, a elementum velit. Fusce 
ultrices malesuada elit, et convallis massa tristique in. 

Vivamus vel urna eget orci tincidunt luctus eget ac tortor. 
Integer faucibus ante eu mauris faucibus, sit amet tincidunt 
velit rhoncus. Proin a pellentesque nunc. Aliquam vitae neque 
sit amet neque aliquam ultrices eget vitae urna. 

Fleurons / フルーリッシュ /アイコン/バグ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Curabitur in orci pellentesque, volutpat metus eget, interdum 
mauris. ~•~ Nunc faucibus lectus id libero blandit, et varius 
augue vehicula. Cras eu dictum libero, a elementum velit. Fusce 
ultrices malesuada elit, et convallis massa tristique in. ~•~ 
Vivamus vel urna eget orci tincidunt luctus eget ac tortor. 
Integer faucibus ante eu mauris faucibus, sit amet tincidunt 
velit rhoncus. Proin a pellentesque nunc. Aliquam vitae neque 
sit amet neque aliquam ultrices eget vitae urna. 

数字

1  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Curabitur in orci pellentesque, volutpat metus eget, interdum 
   mauris. 
2  Nunc faucibus lectus id libero blandit, et varius augue 
   vehicula. Cras eu dictum libero, a elementum velit. Fusce 
   ultrices malesuada elit, et convallis massa tristique in. 
3  Vivamus vel urna eget orci tincidunt luctus eget ac tortor. 
   Integer faucibus ante eu mauris faucibus, sit amet tincidunt 
   velit rhoncus. Proin a pellentesque nunc. Aliquam vitae neque 
   sit amet neque aliquam ultrices eget vitae urna. 

すべて(および他のメソッド)はすべて有効です。少し冗長であるため、通常はそれらを組み合わせることが嫌われます。すでに段落の間にスペースがある場合、インデントは実際にはそれらを視覚的に分離するのに役立ちません。

Web上の段落を区切るための主要な方法として、通常は空白行/空白が表示される理由は、それがデフォルトにすぎないためです。デフォルトでは、ほとんどのブラウザは伝統的に<p>タグの間にスペースを追加しました。したがって、インデントを使用する必要はありませんでした。ただし、必要に応じてインデントを自由に使用できます。


2
バグのことを面白い。しかし、それは有用なものではないと思います。:o)-数字(imho)は、単に異なる段落ではなく、補足的なものを意味します。
ラファエル

@Rafaelの有用性はコンテキストベースです。:)それは、確かに、一般的に使用されていません。
DA01 2015年

ええと...このコメントボックスでこのバグを使用する必要があります!---スタック交換:コメントについての段落が欲しい!:o)
ラファエル

@Rafaelは、実際に役立つ場所の優れた例です。:)
DA01 2015年

1
「バグ」(または類似の何か)は、多くの古代の書面で使用されていました。それらは、書き込み面が制限されていて、情報密度が重要だった時代からの元の段落区切り文字です。同様の状況でそれらを使用することをお勧めします。インデントは、余分な改行の代替と比較して、スペースも節約します。ただし、最新のWebタイポグラフィでは、読みやすさのために可能な限り間隔を使用する必要があります。
Rich Remer

4

これは主に個人的な好みであり、インデントの代わりにドロップキャップを使用しない理由についても議論する人がいます。個人的には段落間のスペースがインデントに値します。

インデントを使用するときの私の目的の理解は、サイトのブログ投稿のようなものを書くときにコンテンツの新しいブロックにのみ使用されることです。つまり、CMSサイトやブログを使用する人がいる場合、複数のトピックが議論されているときに必要な段落にインデントをコーディングするのは難しいため、ヘッダータグを区切りとして使用します。

これを解決するにはgrep、jQueryを使用text-indentして特定の<p>タグにCSS プロパティを追加します。だからあなたの質問に答えるには、これは個人的な好みです。また、ブログの投稿などでこれを実行していて、すべての<p>タグをインデントしたくない場合は、疑似要素first-childを使用できます。

p:first-child {
  text-ident: 1.5em;
}

これまで、HTMLで段落をインデントしたり、ドロップキャップを使用したりする簡単な方法はありませんでした。CSSが長くなると、状況が変わりました。
DA01 2015年

1
そのような暗い時代について話してはいけません;)
DᴀʀᴛʜVᴀᴅᴇʀ

長い問題(つまり本)の古典的な組版では、セクションの最初の段落にはその上にスペースがあり、インデントはありませんが、残りの段落にはインデントがあります。これは通常、見出しやセクションのタイトルの有無にかかわらず行われました。章などの重要な休憩の最初の段落には、ドロップキャップまたは照明付きドロップキャップが表示される場合があります。
RBerteig 2015年

4

テキストをインデントする必要がありますか?まあそれは個人的な好みの問題ですが、私が見たサイトの大部分は段落をインデントしていません。

あなたはHTMLの起源を見なければなりません

HTMLが始まったとき、標準のガイドはありませんでした。HTMLは、ブラウザとサーバーソフトウェアを誰が作成したかを考慮したBerners-Leeによって作成されたオリジナルです。主要な組織の人々は、使用できるフォーマットコマンドを尋ねました。書かれたテキストの段落の後にはスペースがあるため、HTMLにこれを採用しました。これが<p>タグの機能です。人々は標準セットを採用し、オプションを使用しません。

HTML 2.0ドキュメントからの抜粋もあります

水平タブ文字(HTMLドキュメントの文字セットのコード位置9)は、ゼロまでの最小の非ゼロのスペースとして解釈する必要があります。これにより、これまでの行の文字数は8の倍数になります。ドキュメントにはタブ文字を含めないでください一貫してサポートされていないため

http://www.ietf.org/rfc/rfc1866.txt

ワードプロセッサのタブとWebでの使用の違い

インデントがないことのもう1つの理由は、タブの使用です。ワープロプログラムでは、タブを使用して段落をインデントすることに慣れています。まあそれはウェブ上で物事が機能する方法ではありません。90年代初頭にフォームが作成されたとき、人々はタブキーを使用して次のフィールドにスキップしました。今、人々はウェブ上にタブのインデント行を持っているのではなく、この機能に慣れています。

ウェブ上の段落をインデントできない理由はありません。段落にインデントがなく、縦方向のスペースがあることに慣れているだけです。

p {
    text-indent: 20px;
}

1
タブキーはちょっとしたニシンです。タブキーは常にフィールド間をタブで移動するために使用されてきました。これはウェブよりも古いものです。これはtextareaフィールドに関連しますが、Webページの一般的な段落の書式設定には関係ありません(ユーザーがタブキーを使用して段落を読むことはないため)。また、(技術的な確かに、NIT-選ぶ)HTMLはデフォルトでスペースを作成するものではなく、むしろ、段落タグのブラウザのデフォルトのレンダリングがデフォルトのスペースを作成するものであることに注意してください
DA01

@ DA01 Berners-LeeはHTMLをレンダリングするソフトウェアとブラウザを作成しなかったのですか?ブラウザがHTMLをレンダリングすることを理解していますが、そのための標準を作成していませんか?タブが常にフィールド間のタブに使用されていたという事実が、HTMLで実装されなかった理由ではないでしょうか?また、HTMLは空白を認識しません。
AndrewH 2015年

2
そうです、しかしそれをどのようにレンダリングするかについての「HTML標準」はありませんでした。たまたま、彼は特定のブラウザで段落間に余分なスペースを使用することを選択しました。他のブラウザはそのデフォルトを採用しましたが、HTML内でいかなる種類の標準も宣言されていませんでした。
DA01 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.