じぶん advent code 2019, 11日目の記事です．
昨日の記事書いててちょっと思った
blockquote, もうちょっとシュッとできるな
例えば ::beforeを使ったりして
blockquote { margin:40px; padding: 10px 10px 10px 20px; width:70%; font-family: serif; font-style: italic; line-height: 1.5; background-color:rgba(145, 98, 3,0.1); border-left: 10px solid rgba(70,185,70,0.2); } blockquote::before { position: absolute; font-family: serif; top: -30px; left: 25px; content:"\201C"; font-size: 10em; color: rgba(0,0,0,0.1); }
こんなん
See the Pen xxbVyWz by lesguillemets (@lesguillemets) on CodePen.
どうせみんなこういうの駆使してめちゃくちゃかっこいいの使ってるに決まってるんだ！…だけど，いまひとつ画期的なイメージがわかず，では僕が普段見慣れてるようなサイトたちではどういう感じなんかなーと思っていくらか収集したものです．
reddit.com/r/science
これかっこいいよね．クオートのところは諸々の部品で使いまわしてる png 画像 (direct linkから切り出してある．ほかの subreddit はいくつか見たけどあんまり notable なスタイルは発見できなかった．
他は案外凝ったのは普段僕が使うサイトでは見当たらなくて，背景色をつけるか， border-left で左側に棒を引いておくか，あとはフォントに変化をつけるか，くらい．いくつか見ていきましょう
stackoverflow
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
けっこう見やすくて好き．
dev.to
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
dev.to 全体のデザインとよく合致してる印象を受ける．
qiita.com
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
jekyll のサイト
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
github blog
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
kyoto-u.ac.jp
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
news.harvard.edu
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
cam.ac.uk
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
note.mu
we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way— in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
あとは the Guardian がかっこいいんだけど，css だけというより SVG とか使ってしゃれたクオートをつけてたりしてここでの再現を断念．
- 論文載せてる系ではあんまりそういうの使わない
- ジャーナリズム系では， inline でクオートするのも当然手法としてあるし，blockquote に別個の特別のスタイルを作ることをあんまりしないのかも
と思いました．
当ブログの設定は…ちょっと考えます．
