サイトのリデザインで、長文引用は<BLOCKQUOTE>タグ、短文引用は<Q>タグ、出典は<CITE>タグというルールを知った

サイトのリデザインで、長文引用は<BLOCKQUOTE>タグ、短文引用は<Q>タグ、出典は<CITE>タグというルールを知った・blockquote

 「blockquote(引用・転載)」を少しだけリデザインしました。

 blockquoteとは、

<BLOCKQUOTE>~</BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。

<BLOCKQUOTE>-HTMLタグリファレンス

と定義されている。Webの記事などを参考とした際に、引用した部分を分かりやすくマーキングする重要なタグだ。

<BLOCKQUOTE>のCSSデザインをしていなかった

 現在までも引用部分は<BLOCKQUOTE>~</BLOCKQUOTE>のタグでマーキングしていたが、Secretlive.netは既存のテンプレートを使用せず本を参考に作成したサイトのため、そもそも<BLOCKQUOTE>自体のCSSデザインをしていなかった。デザインはしていないがタグは使用していたため、文字のインデント(字下げ)と上下左右のスペースのみ反映されていた状態だったのだ。・・自分でも分かり辛いと思っていましたよ、えぇ。

 何かと引用が騒がれる昨今、この辺りの整理をしておくことは後々自分のためにもなるだろうと思い、今回少しだけリデザインする事とした。

 と、言っても変更点は背景色と”(ダブルクオーテーション)の導入のみだ。参考としたサイトは下記になる。

blockquote(引用部分)をCSSでデザインするサンプル集 | CSS Lecture

長文引用は<BLOCKQUOTE>タグ、短文引用は<Q>タグ、出典は<CITE>タグ

 CSSのデザイン自体はコード2行程度だったので何の問題もなかったが、<BLOCKQUOTE>を調べている時に出典・参照先を示す際には<CITE>というタグを使用するルールがあるという事を初めて知った。

<CITE>とはCitationの略で、出典・参照先を表します。 文章自体を引用するのではなく、書名・規格名・作者名などを引用する際に使用します。

<CITE>-HTMLタグリファレンス

 <CITE>タグを使用する事により、一般的なブラウザではイタリック体で表示される様だ。ブラウザ(Firefox)で確認した所、確かにイタリック体(斜体)になっている。その他にも、改行を必要としない程度の短い文章を引用・抜粋する際には、<Q>タグを使用するというルールもある事が分かった。<Q>タグはダブルクオーテーションなどの引用符を自動で付けてくれるもよう。

 整理すると、

1 比較的長めの文章を引用・転載する際は<BLOCKQUOTE>タグ
2 改行を必要としない程度の比較的短い文を引用・抜粋する際は<Q>タグ
3 出典・参照先を表す場合は<CITE>タグ

と言う事となる。

 CSSのコード2行程の変更だったが、知らなかったルールを学ぶ事が出来、リデザインして良かった。

ワンランク上を目指す CSSクリエイティブ・デザイン
河内 正紀
技術評論社
売り上げランキング: 208935

web拍手

コメントを残す

メールアドレスが公開されることはありません。

トラックバックURL: http://secret-live.net/wp/wp-trackback.php?p=6027