読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

CSSでは、::selectionのスタイルにまでこだわるのがおすすめ

WebDev HTML&CSS gestaltung

 この記事の前半は、10月下旬に書かれたものです。以下で紹介するはてなブックマークのスタイルは現在では改善されています。
 Qiitaに続く勝手に提案シリーズ*1
f:id:sthmdnss:20141019113549p:plain
 はてなブックマークのテキストをハイライトした際の::sectionのスタイルが単純に見えにくいと感じた(上画像)。CSSをみたところ、次の様になっていた(表記は元のまま)。

::selection {
  background: #cee8ff;
  color: #FFFFFF;
}

 ブックマーク詳細ページでは人気と新着の切り替えをタブでおこなっているので、このハイライトに使われている、#008FDEをとりあえず使えばいいのではないか。

::selection {
  background: #008fde;
  color: #fff;
}

f:id:sthmdnss:20141019113521p:plain
 ただ、これだと少し文字が見えにくいのでtext-shadowを加えるとどうだろう。ただ、どこかくどい印象も出てくるので、無くても構わない。

::selection {
  background: #008fde;
  color: #fff;
  text-shadow: 1px 1px #000; /*追加*/
}

f:id:sthmdnss:20141019113503p:plain
 最近は、::selectionのスタイルに凝ったところをよく見るので、これをちゃんとやっておくと、「お、細部にもちゃんと気を使っているな」という印象を与えられるのでちゃんとやっておきたい。
 例えば、イングランドプレミアリーグアーセナルの公式サイトの使い方は上手い。チームカラーの赤と、::selectionに使われている紺系の色が上手く調和している。
f:id:sthmdnss:20141019114519p:plain
1ヶ月後
 この記事は以上までを10月19日に書いて眠らせていた。公開するにあたって、
改めてはてなブックマークの::sectionに対するスタイルを見てみると、改善されていた。

::selection {
  background: #5DACF2;
  color: #FFFFFF;
}

f:id:sthmdnss:20141121224343p:plain

*1:個々のサービスの内情も知らずに出しゃばんなとは自分でも思うものの、広義の営業として捉えることで自分に許してしまっている