HTML入門:引用タグの使い方

HTML入門(引用タグの使い方)

引用タグの基本的な使い方について書きます。引用文と引用元のセットで書きます。引用するときに法律の面で注意点がありますが、専門外なのでその点に関しては触れません。詳しくは他のサイトを参考にしてください。

blockquoteタグ
qタグ
citeタグ
引用のデザイン
まとめ

blockquoteタグ

<blockquote>～</blockquote>で囲まれた部分が引用文です。blockquoteタグは、ブロック要素として扱われます。

<h3>スティーブ・ジョブズの名言</h3>
<blockquote>Design is not just what it looks like and feels like. Design is how it works.<br>
デザインとは単にどのように見えるか、どのように感じるかということではない。どう機能するかだ。</blockquote>

qタグ

短い引用を記述します。qタグは、インラインブロック要素として扱われます。引用符は、lang属性の値によって違うようです。

<h3>レオナルド･ダ･ビンチの名言</h3>
<p>レオナルド･ダ･ビンチは、<q>ひらめきは、考え続ける者だけにやってくる</q>と言った。</p>

citeタグ

引用元、情報源を明示します。

<p><cite>参照元:<a href="https://shiroyuki2020.hatenablog.com/">元Webデザイナー兼コーダーの備忘録</a></cite></p>

引用のデザイン

引用であることが明示的に分かるように、引用符を記述します。下記は、引用の記述例です。各自、オリジナルのデザインを作ってみてはいかがでしょうか。

<blockquote>引用タグの基本的な使い方について書きます。引用文と引用元のセットで書きます。引用するときに法律の面で注意点がありますが、専門外なのでその点に関しては触れません。詳しくは他のサイトを参考にしてください。
<p><cite>参照元:<a href="https://shiroyuki2020.hatenablog.com/">元Webデザイナー兼コーダーの備忘録</a></cite></p>
</blockquote>

blockquote{
position: relative;
margin:0;
padding: 10px;
width:600px;
background-color: #cccccc;
}
blockquote::before{
content: '"';
position: absolute;
top:0;
left:0;
}
blockquote::after{
content: '"';
position: absolute;
bottom:0;
right:0;
}
cite{
display:block;
text-align:right;
}

まとめ

引用は、ブロック要素とインライン要素の両方で表現することができます。引用する際は、引用元を書きます。引用部分が、引用であると明示的に分かるようにデザインすることが重要です。また、法律の面で問題になることも少なからず考えられるので、ルールを守って用います。

HTML入門のまとめ記事なら... » HTML入門まとめ