Webのいろは
MENU
  • HTML
  • CSS
検索結果
検索結果
  • HOME
  • >
  • HTML&CSS
  • >
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法

<blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法

2018/5/4 2019/11/17
いろは
<blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • B!

MENU

  • 1 引用とは何か?
  • 2 引用を表すHTMLタグとは?
    • 2.1 blockquoteタグは段落レベルでの引用に使用する
    • 2.2 qタグは短文テキストの引用に使用する
    • 2.3 引用元のURLを示すためのcite属性
    • 2.4 citeタグで引用元の情報をしっかりと表記する
  • 3 なぜ引用文だと明示する必要があるのか?

自分で管理するWebサイト内で他のサイトの文章を使用する場合、それが“他から引用した文章”であることをしっかりと明示しなければなりません。

今回は引用の正しい表記・使い方を解説します。

引用とは何か?

引用とは外部で公開されているコンテンツをそのまま、または抜粋して自分のコンテンツ内で使用することです。例えば、参考資料として他サイトに掲載されている情報を自分のブログ内で使用する場合は引用に該当します。

以下のような場合は引用の一例です。

  • 他のWebサイトやブログ内の文章を使用する
  • “偉人の言葉”を使用する
  • 話題のニュースサイトの記事から抜粋を使用する

引用を使用する場合は、それが引用したコンテンツであることを必ず分かるようにする必要があり、一般的には引用だと分かるデザインにしたり、引用元の情報を一緒に記述したりします。

引用を表すHTMLタグとは?

HTMLで引用文をマークアップするのにはblockquoteタグ、またはqタグを使用します。どちらも引用文を表しますが、タグの使いどころが異なります。それぞれのタグの違いと特徴、使い方を解説していきます。

blockquoteタグは段落レベルでの引用に使用する

blockquoteタグは段落レベルで他サイトのコンテンツを引用する場合に使用するHTMLタグです。タグ名の由来は、“block(コンテンツのブロック=段落)”を“quote(引用)”するという意味から来ていています。

blockquoteタグで表す引用文は1つの段落となるので、blockquoteタグの中でさらにpタグを使用してマークアップします。

HTML
<blockquote>
  <p>ここに引用するコンテンツを記述します。</p>
</blockquote>
表示結果

ここに引用するコンテンツを記述します。

上記の例は「Webのいろは」でのCSSスタイルが適用されています。blockquoteタグへデフォルトで指定されているスタイルは背景色やアイコンは無く余白がつくだけです。
blockquoteタグでは引用文であると明確にわかるように背景色をつけたり、“”(ダブルクォーテーション)のアイコンを使用したりすると良いでしょう。

qタグは短文テキストの引用に使用する

qタグは他サイトの短文テキストを引用する場合に使用するHTMLタグです。qタグの“q”は「quote」の頭文字で、長文テキストをブロックレベルで引用するblockquoteタグに対して、文章中の1部分のような、改行を行わないフレーズのような短文テキストを引用する場合にはqタグを使用します。

基本的に文中で使用することが多いため“block(1つの段落)”ではない“quote”という認識で問題ないでしょう。

HTML
<p>
  ここに<q>引用文</q>を書きます。
</p>
表示結果

ここに引用文を書きます。

このように文章の中で使用します。qタグには、デフォルトのスタイルとして“「”と“」”が表示されます。

引用元のURLを示すためのcite属性

blockquoteタグ、qタグに共通する属性としてcite属性があります。このcite属性は引用元を示すための属性で、引用元のWebページのURLを指定します。

HTML
<blockquote cite="https://www.〇〇〇.com/page1/">
  <p>ここに引用文を書きます。</p>
</blockquote>
表示結果

ここに引用文を書きます。

HTML
<p>
  ここに<q cite="https://www.〇〇〇.com/page1/">引用文</q>を書きます
</p>
表示結果

ここに引用文を書きます。

上記の例では「https://www.〇〇〇.com/page1/」というURLのWebページが引用元ということになります。cite属性で指定してもユーザには直接見えませんが、しっかりと指定をしましょう。

citeタグで引用元の情報をしっかりと表記する

citeタグはHTML5のタグの1つで、前章で紹介した“cite属性”とは異なります。
citeタグは、作品名や作品タイトル、著者などを表す場合に使用するHTMLタグで、blockquoteタグと一緒に使用することで、引用元のサイトタイトルなどを明記することができます。

blockquoteタグ内で、footerタグとciteタグ、aタグを用いて引用元の情報を示す例です。

HTML
<blockquote cite="https://www.〇〇〇.com/page1/">
  <p>ここに引用文を書きます</p>
  <footer>
    <cite>引用元タイトル - <a href="https://www.〇〇〇.com/page1/">https://www.〇〇〇.com/page1/</a></cite>
  </footer>
</blockquote>
表示結果

ここに引用文を書きます

引用元タイトル – https://www.〇〇〇.com/page1/

これで、引用の本文に加えて、引用元のタイトルと引用元へのリンクも記載することが出来ました。

なぜ引用文だと明示する必要があるのか?

  • 「無断転載」とならないため、情報元に不快な思いをさせないため
  • 閲覧者に引用コンテンツだと伝えるため
  • Googleの検索エンジンに引用文であることを示すため

引用する場合にユーザ(閲覧者)、検索エンジン双方に対して引用コンテンツであると明確にすることは大切です。

例えば、引用コンテンツをblockquote、qタグでマークアップしないと、検索エンジンに無断転載と受け取られSEO的にマイナスになるかもしれません。また、ユーザに対しても、オリジナルコンテンツ(作成者の考え)なのか引用(他社の意見)なのか、はっきりさせておく必要があります。

また、なんでもかんでも引用するというのは控えましょう。Googleの提唱するユーザを満足させるコンテンツという点で見たときに、訪れるユーザ(閲覧者)に対して引用するコンテンツが有用であれば、使い方のルールを守って引用を使いましょう。

  • B!
<blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
いろは
Webのいろは

Relate Post

  • <p>|正しい段落の使い方・記述方法
    <p>|正しい段落の使い方・記述方法
  • <h1>~<h6> | 見出しの使い方・記述方法
    <h1>~<h6> | 見出しの使い方・記述方法
  • Webサイト制作の基本となるHTMLとは?
    Webサイト制作の基本となるHTMLとは?
  • Webサイト制作の基本となるCSSとは?
    Webサイト制作の基本となるCSSとは?

アーカイブ

  • 2018年5月
  • 2018年4月

新着記事

  • <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
    2018-05-12
    <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
    2018-05-11
    <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
    2018-05-04
    <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
    2018-04-30
    <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
  • <h1>~<h6> | 見出しの使い方・記述方法
    2018-04-30
    <h1>~<h6> | 見出しの使い方・記述方法
Webのいろは
  • Webのいろは の利用規約
  • お問い合わせ

Copyright © 2023 Webのいろは All Rights Reserved.