blockquote要素とcite属性にcite要素.

  • このエントリーをはてなブックマークに追加
  • LINEで送る

blockquoteとかciteとかどんな風に使うのがいいのかなぁという個人的なメモ。

基本

blockquote要素|<blockquote>
直接インライン要素を含めない
他人の文章と自分の文章を区別する
cite属性|cite=”引用元のURI”
引用元のURIを記述
title属性|title=”引用元のタイトルや補足情報等”
引用元のタイトルや補足情報などを記述
cite要素|<cite>
引用元のURIやタイトルなどの情報を表示させる時

そのまま使って記述してみるとこんな感じ?

「何で草食系なんですか?」の解(フヒヒヒ!鬱になる画像や文章を貼ろうよ その6

会社で「何で草食系なんですか?」と聞かれたので
奢りを当然と考え、財布も出さない。そのくせこちらが決めた店には文句をつける。
さらに記念日には必ず「気持ち」をプレゼントとして具体的な形として欲しがり
そして自分がプレゼントを渡すときには自分が要求したものよりはるかにチープな物を送り
「大切なのは気持ちだから」
こちらが忙しい、都合が付かないときでも
「会えないのはやましいことをしているからだ!」
無理に時間を作っても
「その日は他の用事があるから」
自分の都合を優先するがこちらの要求は聞かない。
「束縛しないで!」
と泣く。
どんなにクタクタでも女の愚痴だけは聞かされ続け、建設的な意見を言おうものなら
「解決策が聞きたいんじゃない。話を聞いて欲しいだけなのに!」
また泣く。
挙句「あなたは私を大事にしてくれない」とか言われたら、そりゃ草食系にもなるわ。
と、答えたら楽しいランチの時間が止まった。

上のソース
[html]
<p>「何で草食系なんですか?」の解(<cite><a href="http://hideyoshi.2ch.net/test/read.cgi/motenai/1246625324/587">フヒヒヒ!鬱になる画像や文章を貼ろうよ その6</a></cite>)</p>
<blockquote cite="http://hideyoshi.2ch.net/test/read.cgi/motenai/1246625324/587" title="フヒヒヒ!鬱になる画像や文章を貼ろうよ その6 より抜粋">
<p>会社で「何で草食系なんですか?」と聞かれたので <br />
奢りを当然と考え、財布も出さない。そのくせこちらが決めた店には文句をつける。<br />
さらに記念日には必ず「気持ち」をプレゼントとして具体的な形として欲しがり <br />
そして自分がプレゼントを渡すときには自分が要求したものよりはるかにチープな物を送り <br />
「大切なのは気持ちだから」 <br />
こちらが忙しい、都合が付かないときでも <br />
「会えないのはやましいことをしているからだ!」 <br />
無理に時間を作っても <br />
「その日は他の用事があるから」 <br />
自分の都合を優先するがこちらの要求は聞かない。 <br />
「束縛しないで!」 <br />
と泣く。<br />
どんなにクタクタでも女の愚痴だけは聞かされ続け、建設的な意見を言おうものなら <br />
「解決策が聞きたいんじゃない。話を聞いて欲しいだけなのに!」 <br />
また泣く。<br />
挙句「あなたは私を大事にしてくれない」とか言われたら、そりゃ草食系にもなるわ。<br />
と、答えたら楽しいランチの時間が止まった。</p>
</blockquote>
[/html]

使用感
引用文が長いと、blockquote要素の前にcite要素を持ってこないと何の引用なのか、すぐに分からないから困る。
引用の前に但し書きがあれあば、また変わるんだろうけど、それならやっぱりcite要素を但し書きの代わり使えばいいような気がするし。
cite要素とblockquote要素を関連付けるものがない?。<label for=””>のような。
だからといってblockquote要素の中にcite要素を入れるのはblockquote要素の性質上おかしいんじゃないかって気がする。
そうすると結局divかdlで包むかことになるんだろうか?

でもそんな事いったら、ulやolだっていちいち前後のpやhxなんかと関連付けて使ってないしなぁ。
ナビゲーションで使う場合は別にして。

cite属性は書いてもポップアップで表示されないしリンクになるわけでもない。
Firefoxは右クリックプロパティで引用元のアドレスが見れた、
safariとGoogle Chrome(webkit?)は右クリックの要素を検証から見れた、
content:attr(cite);はIE7以下未対応でopera以外はコピペできない。

あんまり考えすぎないほうがいい。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.