Skip to main content

ブロッククォートとは何ですか? - HTMLタグの定義

【フォートナイト】無料スキンとエモートが登場!! (入手方法) (六月 2026)

【フォートナイト】無料スキンとエモートが登場!! (入手方法) (六月 2026)
Anonim

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

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

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

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

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

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

(ルイス・キャロル著)

Blockquoteタグの使用例

blockquoteタグは、内容が長い引用であることをブラウザまたはユーザエージェントに伝えるセマンティックタグです。そのため、引用符ではないテキストをblockquoteタグの中に囲まないでください。 「引用」は、しばしば、誰かが言った実際の言葉または外部の出典のテキスト(この記事のLewis Carrollテキストのように)ですが、 できる これまでに触れたプルクオートのコンセプトでもあります。あなたがそれについて考えるとき、そのプルクオートはテキストの引用です。ちょうど引用自体が現れる同じ記事からのものです。

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

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

例えば:

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

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

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

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

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

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

.ind {

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

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