【HTML】blockquoteタグを使って引用元を定義する方法

blockquoteタグHTML
書いてる人
あいりゅー

プログラミングを学びながら更新しています。
iPhone/iPad/Mac/Apple WatchなどのApple製品はこちらで主に更新しています。
麻雀の反省をひたすら掲載してるブログもやってます。

あいりゅーをフォローする

このページについて

このページではHTMLで使えるblockquoteタグの機能と使い方を解説しています。

blockquote

blockquoteは別のソース(情報源)からの引用を定義する事ができます。引用とは別サイトや本などで書かれている文を自分の書いているものに書くというアレです。例を示すと

引用(いんよう、英語:citation, quotation[注 1])とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。報道や批評、研究などの目的で、自らの著作物に他の著作物の一部を採録したり、ポストモダン建築で過去の様式を取り込んだりすることを指す
ウィキペディア-引用より

ということで、引用に関する説明を一部引用しました。このように他の著作物・制作物などを自分の作品の中に取り入れたり、副次的に紹介する事が引用の堅苦しい言い方になります。

blockquoteの書き方

blockquoteはシンプルに引用部分を囲むだけでOKです。

<blockquote>引用するテキスト</blockquote>

上で書いたWikipediaからの引用に関する引用もblockquoteを使って書きましたが、CSSでガッツリ見た目が変わっているので自分で装飾しないとものすごくさっぱりしたものになります。

インラインとブロック

この引用、実は2種類ありまして今回解説したのがブロック要素を持つタグになります。インライン要素は文の途中で入れても改行が発生しないため、前後の文章を分断することがありません。

逆に今回のblockquoteのようにブロック要素を持つタグの場合は前後に改行が挿入されます。そのため短い引用や文の途中で使う場合はqタグを使ってください。それぞれの比較を示すと

<p>テキスト<q>引用テキスト</q>テキスト</p>

テキスト引用テキストテキスト

qタグは日本語での引用の場合は自動で「」が挿入されます。英語圏のサイトだと””になっています。ブロック要素を持つblockquoteの場合は文章を丸ごと新たな行として扱うため、それぞれの用途は全く異なります。

blockquoteタグで使える属性

blockquoteで使える属性はcite属性の1つだけです。これは引用元のURLを指定する場所になるんですが、blockquoteの中に表示されるとかではありません。グローバル属性とイベント属性には対応しています。

cite引用元のURLを指定する

実際にはこんな感じで書きます。

<blockquote cite="ページURL">引用内容</blockquote>

まとめ

blockquoteは別の情報源や著作物などから文章を自分のページ中で使うときに使います。実はこの引用いろいろとルールがあるようなので適したタグをちゃんと使っていきましょう。

HTMLの基礎
HTMLってどんな言語?書き方やHTMLファイルの作成方法などを解説。
HTMLタグで押さえておきたいポイント3選
HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
HTMLタグと属性一覧
HTMLタグと属性の一覧です。
tableタグ生成ページ
tableタグの基本形を生成できるページです。
ulタグ・olタグ生成ページ
ulタグolタグの基本形を生成できるページです。
タイトルとURLをコピーしました