【HTML】blockquote要素の使い方、引用文であることを示す要素!

シュウ

今回は【HTML】blockquoteの使い方、引用文であることを示す要素!
の解説になります！

こんな方に読んでほしい

HTMLを学び始めた方へ
HTMLについて学びたい方へ
今回はblockquote要素(引用文)について解説しております。

ほかのWebページ(企業サイト、ECサイト、ブログの記事)などの文章から引用するときは、
引用した部分のテキストをblockquote〜/blockquote(ブロッククォート)で囲みます。

Chrome	Safari	Firefox	IE	Edge

[記事の内容]

blockquote要素について

blockquote要素とは、まとまった量の文章を引用したい場合に使用します。
また、blockquoteを使用する場合は、通常インデントされて表示されます。

引用したい文章をblockquoteで囲み、引用元がWebサイトの場合は、
blockquoteにcite属性を追加して、URLを指定します。
書き方は以下のようになります。

blockquote要素について

引用する文章：赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告….
目立つ、熱を感じる、興奮させると行った心理効果を持っています。

<blockquote cite="引用元URL">
引用する文章：赤色とは、....
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
</blockquote>

cite属性について

cite属性
引用元のURL、タイトルや作者を記述します。

ポイント！
引用する場所の例として、企業サイト、ECサイト、ブログの記事、サイトのレビュー、SNS(ツイート)を引用する場合によく使われます。

blockquote要素を使う理由とは

引用をする場合には、正しい引用の仕方をしなければなりません、理由は2つあります。
1つ目は「盗用」、2つ目は「SEO」の理由があげられます。

盗用について

blockquoteをタグを使わず、ほかのWebページの文章をそのまま、コピー&ペーストしても、「問題がない」と思ってる人もいますが、それは「盗用」とみなされてしまいます。
盗用は、法律的、道義的に問題があるため、引用する場合には、blockquote要素を使用しましょう。

SEOについて

上記で解説した、「盗用」にあたった場合は、Googleなどの検索エンジンからペナルティーを課せられる可能性があります。
ペナルティーとは、検索順位が落ちたり、表示されない危険性もでてきます。
こちらも必ず、blockquote要素を使用しましょう。

cite属性の使い方について

cite要素とは、引用元のURL、タイトルや作者を記述します。
cite属性は必須ではありませんが、引用元のWebサイトがある場合は、必ず指定します。

より引用元を明確にするために、「引用元のURL」、「タイトルや作者」を必ず指定するようにしましょう。
また、引用元のリンク先がある場合は、読者が引用元へアクセスできるようにリンクを貼っておきましょう。

cite属性について

引用する文章：赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告….
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
SHU BLOG ：【Webデザイン】配色..省略

<blockquote cite="引用元URL">
引用する文章：赤色とは、....
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
<cite><a href="リンク先URL">SHU BLOG ： 【Webデザイン】配色..省略</a></cite>
</blockquote>

※上記では、分かりやすいように、「引用元のタイトル」を一部省略しております。
実際は省略しないようにしましょう。

CSSで整える

blockquoteを使用する場合には、通常インデントで表示されます。
また、cite属性の文字には、斜体文字(イタリック)が適用されております。

CSSで引用符などの指定も可能になります。
書き方は以下のようになります。

CSSで整える

引用する文章：赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告….
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
SHU BLOG ：【Webデザイン】配色..省略

<blockquote cite="引用元URL">
引用する文章：赤色とは、....
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
<cite><a href="リンク先URL">SHU BLOG ： 【Webデザイン】配色..省略</a></cite>
</blockquote>

/*--CSS--*/
blockquote{
	margin: 0; /*--インデント(隙間)をなくす--*/
    position:relative;
    background-color: #ffffff; 
    border-left:5px solid #5c87a6;
    padding:20px;
    box-sizing: border-box;
}

blockquote:before{
    position:absolute;
	content:'“'; /*--引用符を追加します。--*/
    font-size: 50px;
    color:#5c87a6;
}

blockquote p{
    position:relative;
    padding-left:30px;
}

 blockquote cite{
    display: block;
    font-size:0.8rem;
    text-align:right;
}

※上記では、分かりやすいように、「引用元のタイトル」を一部省略しております。
実際は省略しないようにしましょう。