blockquoteの覚書と試行錯誤

相変わらずWebデザインの勉強は遅々として進みません。

買った本も中々読み進められないし、イラチなので、じっくり基本からコツコツ学ぶのも苦手です。実際に作って見ないと身につかないし！と言い訳しながら、自分のやりたいものから手をつける。というわけで、今回はblockquoteの覚書と、装飾の試行錯誤。

[覚書] 書籍からの引用

書籍からの引用の場合はcite属性にISBNを指定。

<blockquote cite="urn:isbn:x-xxxx-xxxx-x"><p>引用文</p></blockquote>

装飾

未だ試行錯誤中なので、かなりざっくり作ってますが。前々からやってみたかった、二重引用符の画像を埋め込む装飾。

• blockquote試行錯誤とざっくりしたサンプル |lush life*

試行錯誤の過程を残しておかないと、あとでまた似たような間違いをしそうなんで、実用的ではないサンプルも入ってます。IEでもあまり見た目が変わらないものを取り入れるのなら、example3 か example5でしょうか。でも、blockquoteをわざわざdivで括るのはかなり嫌。

example3

左が Firefox、右がIE。blockauoteに背景として最初の二重引用符（“）を、blockquote:afterで二重引用符の終わりの二重引用符（”）を指定。
IEはblockquote:afterが無視されるので、二重引用符（終）の画像が見えません。でも、枠線や背景色を指定しているのでIEでも引用であることは分かりやすいかな？

HTML

<blockquote cite="http://examoke.com" title="example.page"><p>引用文引用文引用文引用文引用文引用文</p><p>引用文引用文引用文引用文引用文引用文</p></blockquote>

CSS

blockquote {
 background:#E0E9CF url("./blockquote-bg1.png") no-repeat top left; /* 二重引用符（始）の画像を指定 */
 padding:30px 0 0 30px;
 border:1px solid #BCCFA7;
}
blockquote p {
 margin:10px 50px;
}
/* 二重引用符（終）の画像を指定 */
blockquote:after{
 display:block; 
 content:url("./blockquote-bg2.png");
 text-align:right;
}

example4

左が Firefox、右がIE。example3とは使用している画像が違うだけです。
example3と同じく、blockquote:afterで指定した画像がIEでは見えませんが、どうせ引用符の画像を使うんなら、枠線をCSSで指定じゃなくて、こんな感じで画像を使いたいのです（今回の画像は1分で適当に作ったものですが）。なんとかIEでも表示できないもんか。いや、blockquoteをdivで括れば出来るんだろうけど、好みじゃないのでそれはなるべくやりたくないのです。ちなみにソース。ソース書く必要もなさそうなくらいに、example3と殆ど一緒。

HTML

<blockquote cite="http://examoke.com" title="example.page"><p>引用文引用文引用文引用文引用文引用文</p></blockquote>

CSS

blockquote{
 background:url("./blockquote-bg3.png") no-repeat top left; /* 二重引用符（始）の画像を指定 */
 padding:30px 10px 0 30px;
}
/* 二重引用符（終）の画像を指定 */
 blockquote:after{
 display:block; 
 content:url("./blockquote-bg4.png"); 
 text-align:right;
}
blockquote p{
 margin:10px 50px;
}

example5

左がFirefox、右がIEですが、ほぼ同じ見た目。blockquoteをdivで括り、divで二重引用符（始）、blockquoteで引用符（終）の各画像を指定。見た目はこんな感じで良いんだけど、何度も繰り返しますが、divで括ってるのが嫌。でも一応ソース。

HTML

<div class="epigraph">
 <blockquote cite="http://examoke.com" title="example.page"><p>引用文引用文引用文引用文引用文引用文</p></blockquote>
 <cite><a href="http://example.com">引用元</a></cite>
</div>

CSS

div.epigraph{
 background:#E0E9CF url("./blockquote-bg1.png") no-repeat top left; 
 padding:30px 0 0 30px;
 border:1px solid #BCCFA7;
}
div.epigraph blockquote{
 background:url("./blockquote-bg2.png") no-repeat bottom right;
 padding-bottom:30px;
}
div.epigraph blockquote p{
 margin:10px 50px;
}

とりあえず、今ある知識で頑張ってみました。もうちょっと頑張る。