Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

81. 【CSS】『引用』のデコレーション✨✨✧⁺⸜(●˙▾˙●)⸝⁺✧

99%Invisible---『Norman Doors: Don’t Know Whether to Push or Pull? Blame Design.』 99%Invesible.com
 
下記のサイトからコピペしてみたら、スゲーかっちょよくなりました✧⁺⸜(●˙▾˙●)⸝⁺✧✨✨♪
 
[via]WebMaster-Source.com
 
 
/*引用フォント等の変更*/
 
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}



/* 引用マーク*/

blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

 

/*エムダッシュ(ー) ,小スペース*/
 
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
 

ただ、contentの「\201C」「\2014 \2009」 が何を指しているのか、理解するのに時間かかりました::(っ`ω´c)::? 

検索した結果、これはコード表でそれぞれ…、

『"』 :ダブルクォーテーションマーク(\201c)

『ー』:エムダッシュ (\2014)

『 』   : 小スペース  (\2009)

 

を表しているのだそうな。。う~ん::(っ`ω´c)::?w

 

 

__________________________________

参照サイト

 

●CSS Trick---『"\201c" "\2009 \2014"』

   https://css-tricks.com/snippets/html/glyphs/

●The Punctuation Guide---『em dash』

   http://www.thepunctuationguide.com/em-dash.html

 

 

 

 

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️