qタグ、blockquoteタグとciteタグ
ブログを書いていて、自分のコンテンツを作るよりも苦手なのが、他所サマの作物を引用させていただくことだったりします。
これまでblockquoteタグしか知らなかったので、何かを引用する時は、この中に囲んでおります。でも、これまで使い方を間違えておりました。あはは。
現時点での私の理解は、下記のとおりです。
- q
- 引用句
- 短い言葉・句を引用する際に使用する。
- タグ内にcite属性cite="URL"で引用元を示すことができる。
- blockquote
- 引用文
- 長めの文章を引用する際に使用する。
- タグ内に、cite属性cite="URL"で引用元を示すことができる。
- cite
- 引用元
- タグとして使用する場合は、作品名、引用元情報を記述する
短い句を引用する時に使う、qタグなんて、全く存じ上げませなんだ！
引用句、引用文、引用元のサンプルとCSS
これがやりたくて記事を準備したのに、パソ危機に陥り、他の作業を優先せざるを得ず、なかなか着手できませんでした。
パソが突然フリーズするようになって3日目です。リソース云々の警告すらなしに、画面が固まります。とうとうダメです。そして、この記事はフリーズの為、3回目の書き直しです。号泣。
こまめなセーブが必要なサバイバルゲームです。
引用句pタグのサンプルとCSS
私が信頼を寄せるゲームサイトに、次に遊ぶゲームは、『キングダム ハーツ HD 2.8 ファイナル チャプター プロローグ』が絶対おすすめ！
と書いていたので、パソが壊れてブログが書けなくなったら、買おうと思っています。
q {
color: #ff7f7f;
font-weight:bold;
}
q:before {
content: "\00300c";
}
q:after {
content: "\00300d";
}
qタグのサンプルとか、マイナーなものは世の中にあまり存在しなかったので、適当に作りました。括弧全体→開始符→終了符の順に並んでいます。
デザイン的に開始符と終了符を二重括弧にしたくてたまらなかったのですが、句の引用は括弧、句の中で引用が行われた場合は、二重括弧というルールがあるらしいです。もしくは、作品名や雑誌名などは二重括弧でもよいようです。執筆ガイドラインの段階で、意識的に間違えた使い方を宣言するのも微妙なので、qタグはおとなしくただの括弧で作成しました。
「引用文と引用元」のサンプルとCSS
blockquote{
font-size: 16px;
background: #ffe0e0;
margin: 1em 0;
padding: 1em;
font-size: 1em;
min-height: 60px;
}
blockquote:before {
display: block;
float: left;
font-family: Georgia, Times, "Times New Roman", serif;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #ffe0e0;
background-color: #ff7f7f;
padding: 15px 8px 5px 12px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
blockquote cite {
display: block;
position: relative;
text-align: right;
font-style: italic;
font-size: 1em;
margin: 1em;
color: #999;
}
blockquote p {
margin:0.5em;
}
上から順に、引用ブロック全体(blockquote)→引用開始符(blockquote:before)→引用元情報(cite)→引用文(p)の各タグの記述です。
marginとpaddingの設定がどうも苦手です。
この為ところどころにピクセルでの指定が残ってしまっています。HTML5では、ブロック要素、インライン要素の概念がなくなったとどこかに書いていたように思ったのですが、実際のところ、display:block;を入れないと崩れたり、まだまだ学習が必要です。
記事に書くときの順番はどちらでもOKです。一般的に、引用元は下につけている人が多いような気もしますが、右上につけるとスペースが丁度よい感じです。
画像つき「引用文と引用元」のサンプルとCSS
blockquote span {
float:right;
margin:0.5em;
}
↑の「引用文と引用元」のCSSの最後にspanタグで右に浮動する画像を貼れるようにしました。属性(class)付きのpタグでもいいのですが、違うタグを使うことで、いちいち属性を入力しなくて済むので、記事を書くときに楽なのです。これが良いかどうかの判断はできません。
難点は、フロート由来なんだと思いますが、「引用文→引用画像」の順で書くと、画像がブロック外にはじき出されてしまうので、「画像→引用文」の順で記事を書かなければなりません。
当ブログでの執筆ガイドライン
たまにはwikipedia以外も引用しよう！
