Mac のテキスト選択時に表示される水色背景をブログで表現するために施した CSS の工夫

LOVE
photo credit: Kegley♥ via photopin cc

過去記事 shift キーも併用できる!効率的なカーソル移動で文書作成が捗る Mac のキーボードショートカット10選 を書いた時に、Mac でテキストを範囲選択すると表示される水色の背景を、CSS で表現してみました。難しい作業ではなかったので、やったことをメモしてみます。

目次

  1. CSS で表現した理由
  2. HTML コード
  3. CSS コード
  4. カラーコードを調べるには Mac の標準アプリで

1. CSS で表現した理由

上記の記事の中で、水色の背景でテキストが範囲選択された状態をブログ上でどう表現しようかと悩みました。結果として選んだ方法がこちらです。

吾輩は猫である。名前はまだ無い。

Mac のテキストエディットでその状態を再現してスクリーンショットを撮ることも考えたのですが、それは実行しませんでした。理由は、画像を多用することでブログの表示速度が遅くなるのを避けたかったからです。Retina ディスプレイ対応のために解像度や表示サイズを1つ1つ気にかける必要があることも、画像を使う上でのネックになります。

数枚の画像ならあまりこだわる必要はないのかもしれませんが、画像を使わずに表現できるのであればそれにこしたことはない、と思ってやってみたら簡単にできましたw

2. HTML コード

記事中に書いた HTML コードは次の通りです。水色の背景にしたい箇所を <span> ~ </span> で囲み、text-select というクラスを設定しました。

吾輩は<span class="text-select">猫である。名前はまだ無い。</span>

3. CSS コード

スタイルシートの CSS コードは以下。WordPress ならテーマフォルダの style.css に追記します。書いた内容は単純に、クラスにtext-select が設定されていたら背景色を #b8d6fd にする、というだけのものです。

/* テキスト選択 */
.text-select {
	background: #b8d6fd;
}

4. カラーコードを調べるには Mac の標準アプリで

DigitalColor Meter

順番が前後しましたが、スタイルシートに書いた #b8d6fd というカラーコードをどうやって特定したかと言うと、Mac にあらかじめ搭載されている標準アプリで簡単にできました。Mac って本当に便利です!そのアプリは DigitalColor Meter という名前で、「アプリケーション」フォルダ→「ユーティリティ」フォルダの中にあります。

起動したら、メニューバーの「表示」→「値を表示」を「16進」に変更しておきます。

screen shoot

あとは画面上のカラーコードを調べたいポイントにマウスカーソルを置くだけです。テキスト選択時の水色背景は「R: 0xB8, G: 0xD6, B: 0xFD」となっています。右の2桁の数値を上から順につなげ、先頭に「#」をつければカラーコードになります。

screen shoot

このアプリの存在は、こういんぐさん (@_kouing) のこちらの記事で知りました。

ブログのデザインをカスタマイズしていく上で、いろいろなサイトやアプリの色遣いを簡単に調べることができる DigitalColor Meter。末長い付き合いになりそうな便利アプリです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です