HTML要素 ・ 見出し・文章
<blockquote>
引用文
ほかの文書や発言から、まとまった文章を引用するときに使います。ブラウザは既定で左右に余白をとって表示します。
01
サンプルコード
HTML
1<blockquote cite="https://example.com/interview">
2 <p>良いデザインは、できるだけ少なくデザインすることだ。</p>
3</blockquote>
4<p>— ディーター・ラムス</p>
CSS
1blockquote {
2 margin: 0;
3 padding: 12px 20px;
4 border-left: 4px solid #b68235;
5 background: #faf5ec;
6}
02
実行結果
ブラウザでの表示
03
解説
blockquote は、他から引用した段落単位の文章を囲む要素です。中には p などのブロック要素を入れます。
cite 属性には引用元のURLを書けます。画面には表示されないため、出典を見せたいときは引用の外に本文として書きます。
文中の短い引用には、インライン要素の q を使います。
04
応用例・注意点
主な属性・関連要素
| 名前 | 説明 |
|---|---|
cite 属性 | 引用元のURL（表示はされない） |
q 要素 | 文中の短い引用。自動でかぎ括弧が付く |
cite 要素 | 作品のタイトルを示す |
figure / figcaption | 引用と出典をひとまとめにする |
引用と出典をまとめる
figure と figcaption を使うと、引用と出典の関係が明確になります。
HTML
1<figure>
2 <blockquote>
3 <p>良いデザインは、できるだけ少なくデザインすることだ。</p>
4 </blockquote>
5 <figcaption>— ディーター・ラムス</figcaption>
6</figure>
注意点
- 01字下げの見た目のためだけに blockquote を使わないでください。
- 02引用するときは、出典を明記し、著作権のルールを守ります。