blockquoteの背景色はスタイルシートで何色にするか | 在宅ネットでコツコツお金を稼ぐ

blockquoteタグは引用や転載を表すタグになります。 サイトを訪問した読者の方からは、その部分が引用されたものだとはっきりと分かるので、 とても親切なものだと思います。

blockquoteタグを書いた場合に、迷うのがタグの背景色です。 色の指定を何もしない状態で、真っ白な背景など背景と同じ色だと、 引用しているというのが分かりにくいので、何か背景色を付けたいところです。

blockquoteの背景色は薄いグレーが多い

blockquoteタグを使用している方の実例を見ると、この部分には薄いグレーを使用していることが多いようです。

もちろん色は何でもいいのですが、あまり濃い色を使用している人は少ないようです。 この辺りはサイト全体のデザインと相談して決めると良いかもしれません。

blockquoteタグの背景色で迷ったので、 サンプルページにいくつか背景色の例をあげてみました。 以下からサンプルページが見られます。

blockquoteタグの背景色サンプル

基本の16色と言われるものや、拡張された124色の中から、blockquoteタグの背景色に合いそうなもの使ってみました。

他にも RGB色にすればもっと複雑な色にすることが可能なので、RGB色にした方が良いかもしれません。 RGBだと、薄い色もかっこよいものが選べます。 薄いグレーも良いですが、他にも、薄い青や、薄いグリーンも良いかもしれません。

Googleの色見本

RGB色を選ぶときにすごく便利なツールだと思ったのですが、 Googleから使えるものです。

Google で「色見本」と検索すると、以下のような画面になります。

Goolgeの色見本

カラーパレットのようになっていて、丸い印をドラッグして、色を選ぶと、 その色の名前が左に表示されます。その色の名前をスタイルシートに記入すれば良いということになります。 他のツールを起動しなくても良いので、とても便利だと思いました。

とりあえず「 #ededed 」にしてみました

今回、完成したのは以下の通りです。

色を、#ededed に指定して、 blockquoteタグの背景色を決めました。 色はこのようになっています。 当面はこれでいこうと思います。

色を選ぶ時はいつも迷いますが、今回、私は「 #ededed 」という色をblockquoteタグの背景色に設定してみました。 また変えるかもしれませんがとりあえずはこれで行こうと思います。

(2017/11/6)

トップページ

その他のコラム

コンテンツ

トップページ