MENU

コーディング

簡単！GoogleマップをCSSだけで白黒にする方法

簡単！GoogleマップをCSSだけで白黒にする方法
ENOWL_Nao

どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。

タイトルの通り、iframeで埋め込んだGoogleマップをCSSだけで白黒にする方法です。
まずは、デモです。

直近で対応することがあったので、忘れないように備忘録として残しておきます。

この記事の見出し
  1. ステップ1　HTMLの準備
  2. ステップ2　CSSの追加
  3. まとめ
  4. 参考サイト

ステップ1　HTMLの準備

まず、Googleマップのiframeを作成します。

iframeを作成する方法が分からない方はまずはこちらの記事をご覧ください。

あわせて読みたい
初心者でもできる！GoogleマップをWebサイトに埋め込む方法
初心者でもできる！GoogleマップをWebサイトに埋め込む方法

iframeタグを任意のタグで囲んでください。
今回は、「map-gray」というクラスをつけたタグで囲んでいます。

<div class="map-gray">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.656784920611!2d139.80812547578913!3d35.710062672577926!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1729091831981!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

ステップ2　CSSの追加

次に、iframeを白黒にするために、CSSでfilterプロパティを設定します。
以下のCSSコードを追加してください。

.map-gray iframe {
    filter: grayscale(100%);
}

これで、iframe内のGoogleマップが白黒表示になります。

まとめ

以上で、Googleマップをiframeで白黒表示にする手順は完了です。

この方法を使えば、簡単にGoogleマップを白黒にカスタマイズできます。
ぜひ試してみてください！

最後までお読みいただき、ありがとうございました！

参考サイト

以下のサイトを参考にさせていただきました。

https://hirashimatakumi.com/blog/7610.html

Xからの読者コメントをお待ちしています。
ブログ更新の励みになります！
個人事業主さまの「Web担当」

そのWebの悩み
一人で抱え込んでいませんか？

「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？

ココナラで相談する
私について
なお
なお
Webデザイナー
InstagramContact
ホームページをご覧いただきありがとうございます！ なおと申します。 現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました