このブログでは引用符(block quote)って特に「”」を表示させてないのですが、他のサイト作ってたとき、あった方が雰囲気出るよなと思うこともあり、基本的なことなので、あらためて理解を整理しておきたいと思います。
特に、画像を読み込むということは出来るだけ避けたいと思っているので、画像無しでどんな表現が可能なのか調べてみます。
まず、引用符を表現するとき、以下のように:beforeと:afterとかと指定して、文の前後に指定したいマークを盛り込みます。
q:before{ }
q:after{ }
事例としてはこんな感じ
q:before {
content: '\201C';
font: Times New Roman;
font-size: 200%;
}
基本的な引用符
上のコードでcontentに指定するものとして一般的なのはこのあたり
ダブルクォーテーション開始 「“」 ： \201C
ダブルクォーテーション終了 「”」 ： \201D
シングルクォーテーション開始 「‘」 ： \2018
シングルクォーテーション終了 「’」 ： \2019
フォントの種類で比較
引用符でよく利用されているのはTimes New Romanを見かけますが、丸みがあってバランスが取れていると思います。他のフォントではどんなのが表示されるか見てみました。（ブラウザやOSによっては正しく表示できないかもです）
Times New Roman
“ ” ‘ ’
Arial
“ ” ‘ ’
Cerif
“ ” ‘ ’
Century
“ ” ‘ ’
Helvetica
“ ” ‘ ’
Rockwell
“ ” ‘ ’
ＭＳ Ｐ明朝
“ ” ‘ ’
HGP行書体
“ ” ‘ ’
HGS創英角ﾎﾟｯﾌﾟ体
“ ” ‘ ’
HGP創英ﾌﾟﾚｾﾞﾝｽEB
“ ” ‘ ’
メイリオ
“ ” ‘ ’
Academy Engraved LET
“ ” ‘ ’
SimSun
“ ” ‘ ’
Algerian
“ ” ‘ ’
Arabic Typesetting
“ ” ‘ ’
Bauhaus 93
“ ” ‘ ’
Blackletter686 BT
“ ” ‘ ’
Broadway
“ ” ‘ ’
Cambria
“ ” ‘ ’
Gungsuh
“ ” ‘ ’
Castellar
“ ” ‘ ’
Cataneo BT
“ ” ‘ ’
Colonna MT
“ ” ‘ ’
Comic Sans MS
“ ” ‘ ’
Consolas
“ ” ‘ ’
Cooper Black
“ ” ‘ ’
Footlight MT Light
“ ” ‘ ’
Forte
“ ” ‘ ’
FrankRuehl
“ ” ‘ ’
Freestyle Script
“ ” ‘ ’
Garamond
“ ” ‘ ’
Georgia
“ ” ‘ ’
Gill Sans Ultra Bold
“ ” ‘ ’
Goudy Old Style
“ ” ‘ ’
Goudy Stout
“ ” ‘ ’
Haettenschweiler
“ ” ‘ ’
Harlow Solid Italic
“ ” ‘ ’
Highlight LET
“ ” ‘ ’
Imprint MT Shadow
“ ” ‘ ’
Lucida Calligraphy
“ ” ‘ ’
Lucida Handwriting
“ ” ‘ ’
Magneto
“ ” ‘ ’
Maiandra GD
“ ” ‘ ’
Milano LET
“ ” ‘ ’
Mistral
“ ” ‘ ’
MV Boli
“ ” ‘ ’
Niagara Engraved
“ ” ‘ ’
Nyala
“ ” ‘ ’
OCR A Extended
“ ” ‘ ’
Old English Text MT
“ ” ‘ ’
OldDreadfulNo7 BT
“ ” ‘ ’
Papyrus
“ ” ‘ ’
Script MT Bold
“ ” ‘ ’
Segoe Script
“ ” ‘ ’
Showcard Gothic
“ ” ‘ ’
Westwood LET
“ ” ‘ ’
Wide Latin
“ ” ‘ ’
個人的に使いそうなやつや、面白いなと思ったものをピックアップしてみましたが、こうして見てみると、フォントでかなりのバリエーションがありますね。
他に使えそうな特殊文字
contentに指定するコードを変更することで、様々な特殊文字が出せます。
引用符代わりに使えそうなものってあまりないですが、このあたりかなと思います。
☞ ： \261E
☝ ： \261D
♆ ： \2646
◆ ： \25C6
✡ ： \2721
★ ： \2605
† ： \271D
こちらのサイトでわかりやすく一覧がまとめられていましたのでご参考に
プログラマーの雑記
サンプル
せっかくなので、Aboutページにある以下の一言を、引用符で囲ってみたいと思います。
たとえ明日、世界が滅びることを知っていても
今日、私は林檎の木を植える
Even if I knew that tomorrow the world would go to pieces, I would still plant my apple tree.
マルチン・ルター/Martin Luther
現状はblockquote使っておらず、h指定と斜体だけなんですよね。せっかくなんで、こちらを変更してみたいと思います。
HTML
Even if I knew that tomorrow the world would go to pieces, I would still plant my apple tree. たとえ明日、世界が滅びることを知っていても 今日、私は林檎の木を植える マルチン・ルター/Martin Luther
CSS
#bq{
font-size:90%;
padding:3em 1em;
position:relative;
}
#bq:before{
content:'\201C';
font-size:350%;
line-height:1em;
font-family: Century;
position:absolute;
left:0;
top:0;
}
#bq:after{
content:'\201D';
font-size:350%;
line-height:0em;
font-family: Century;
position:absolute;
right:0;
bottom:0;
}
#bq cite {
color: #999999;
font-size: 12px;
display: block;
margin-top: 5px;
text-align: right;
}
これで実現できるのが以下になります。
たとえ明日、世界が滅びることを知っていても 今日、私は林檎の木を植える
マルチン・ルター/Martin Luther
なんか、どっちがいいか決めきれないところでもありますが、取りあえず今のところは現状維持で、また気が向いたらいろいろいじるかもしれません。
[ad]