ブロッククォートとは何ですか?

あなたがHTML要素のリストを見たことがあるならば、あなたは "ブロッククォートは何ですか?"と尋ねるかもしれません。 blockquote要素は、長い引用符を定義するために使用されるHTMLタグのペアです。 W3C HTML5仕様に従ったこの要素の定義を以下に示します。

blockquote要素は、別のソースから引用されたセクションを表します。

Webページ上でBlockquoteを使用する方法

Webページにテキストを書き込んでそのページのレイアウトを作成するときに、テキストブロックを引用符として呼び出すことがあります。

これは、ケーススタディやプロジェクトの成功事例に付随する顧客の証言のように、他の場所からの引用でもあります。 これは、記事やコンテンツ自体からいくつかの重要なテキストを繰り返すデザイン処理でもあります。 パブリッシュでは、これをプルクォートと呼ぶこともあります 。ウェブデザインでは、これを達成する方法の1つ(およびこの記事で扱う方法)をブロッククォートと呼びます。

そこで、ブロック引用タグを使用して長い見積もりを定義する方法を見てみましょう。たとえば、Lewis Carrollの「The Jabberwocky」の抜粋などです。

'Twas brilligとスリフティ・トゥブ
揺れて、揺らめくようにした:
すべてのmimsyはborogoves、
そして、お母さんのラスは怒っている。

(ルイス・キャロル著)

Blockquoteタグの使用例

blockquoteタグは、内容が長い引用であることをブラウザまたはユーザエージェントに伝えるセマンティックタグです。 したがって、引用符で囲まれていないテキストを囲むことは避けてください。「引用」は、実際には誰かが言った言葉や外部ソースのテキスト(この記事のLewis Carrollのように)ですが、私たちが以前にカバーしたプルクオートのコンセプトでもあります。

あなたがそれについて考えるとき、そのプルクオートはテキストの引用です。ちょうど引用自体が現れる同じ記事からのものです。

ほとんどのWebブラウザでは、ブロッククォートの両側にインデント(約5スペース)を追加して周囲のテキストから目立たせます。 非常に古いブラウザの中には、引用されたテキストをイタリック体で表示するものもあります。

これは単なるblockquote要素のデフォルトのスタイリングであることに注意してください。 CSSでは、ブロック引用の表示方法を完全に制御できます。 インデントを増やしたり削除したり、背景色を追加したり、テキストサイズを大きくしたりして、さらに見積もりを呼び出すことができます。 その引用符をページの片面に浮かべて、他のテキストを囲むようにすることができます。これは一般に、印刷雑誌のプルクォートに使用されるビジュアルスタイルです。 あなたは、CSSでブロッククォーテーションの外観を制御できます。もう少し簡単に説明します。 今のところ、HTMLマークアップに見積もり自体を追加する方法を見ていきましょう。

blockquoteタグをテキストに追加するには、引用符であるテキストを次のタグペアで囲みます。

例えば:


'Twas brilligとスリフティ・トゥブ

揺れて、揺らめくようにした:

すべてのmimsyはborogoves、

そして、お母さんのラスは怒っている。

ご覧のように、単引用符の内容の周りにblockquoteタグのペアを追加するだけです。 この例では、いくつかのブレークタグ(
)を使用して、必要に応じてテキストの内部に改行を1つ追加します。 これは、特定の休憩が重要な詩からテキストを再作成するためです。 お客様の声明を作成していて、特定の部分で改行する必要がない場合は、これらの改行タグを追加して、ブラウザ自体が画面サイズに基づいて必要に応じて折り返し折れないようにします。

テキストをインデントするためにブロッククォートを使用しない

何年もの間、たとえそのテキストがプルクオートではなかったとしても、人々は自分のウェブページ上にテキストをインデントしたいと思った場合、ブロッククォートタグを使用しました。 これは悪い習慣です! 視覚的な理由からだけblockquoteのセマンティクスを使いたくはありません。 あなたのテキストをインデントする必要がある場合は、ブロッククォートタグではなく、スタイルシートを使うべきです(もちろん、インデントしようとしているのは引用です)! インデントを追加するだけの場合は、このコードをWebページに配置してみてください。

インデントされたテキストです。

次に、そのクラスをCSSスタイルでターゲティングします

.ind {
パディング:0 10ピクセル;
}

これにより、段落のいずれかの側に10ピクセルのパディングが追加されます。

Jennifer Kryninのオリジナル記事。 ジェレミージラール編集:5/8/17