Google Map 埋め込み CSSでデザインをグレー・ダークモードにする方法

thumbnail_googlemap_gray_200513_01

CSSでGooglemapのデザインを変更します。

Javascriptの方が自由度高くデザインできますが、CSSの方が簡単で掛かる時間も少ないです。

対応ブラウザ

  • Chrome
  • Firefox

灰色

グレーベースのサイト、色数の少ないサイトに使えます。

デモ

See the Pen
Googlemap Grayscale
by kura (@kuranopen)
on CodePen.

CSS

CSSのfilterプロパティgrayscaleを使います。


filter: grayscale(100%);

ダークモード

背景が黒のサイト、フッターの色が重たいサイトなどに使えます。

デモ

See the Pen
Googlemap Dark Mode
by kura (@kuranopen)
on CodePen.

CSS

filterプロパティgrayscale invert contrastを複数組み合わせて使います。

invertcontrastの数値を下げると、色のトーンを下げられます。


filter: grayscale(100%) invert(92%) contrast(83%);

トーンダウンすることも可能

色合いのトーンが低めのサイトに使えます。

デモ

See the Pen
Googlemap Grayscale 2
by kura (@kuranopen)
on CodePen.

CSS

CSSのfilterプロパティinvertを使います。


filter: invert(100%)

セピア

使い所は少ないですが、こんなことも。

デモ

See the Pen
Googlemap Sepia
by kura (@kuranopen)
on CodePen.

CSS

CSSのfilterプロパティsepiaを使います。


filter: sepia(25%);

  • このエントリーをはてなブックマークに追加