SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

blockquote要素について

blockquote要素について

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

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

blockquote要素について

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

<blockquote cite="引用元URL">
引用する文章:赤色とは、....
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
</blockquote>
cite属性について
  • cite属性
    引用元のURL、タイトルや作者を記述します。

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

blockquote要素を使う理由とは

blockquote要素を使う理由とは

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

盗用について

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

SEOについて

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

cite属性の使い方について

cite属性の使い方について

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

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

cite属性について

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

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

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

CSSで整える

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;
}

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

関連記事

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

まとめ

今回はこれで以上です。
次回も「短い文の引用」について解説していきます。

POINT
  • blockquote要素は、まとまった量の文章を引用したい場合に使用します。
  • 引用する場所の例として、企業サイト、ECサイト、ブログの記事、サイトのレビュー、SNS(ツイート)を引用する場合によく使われます。
  • 盗用、SEOには、気をつけましょう。
  • cite要素は、引用元のURL、タイトルや作者を記述します。
  • CSSで引用符などの指定も可能になります。
  • blockquoteの正しい使い方は覚えておきましょう。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top