HTML / CSS 入門

HTML / CSS入門編(10)(Google Map を利用して枠線を付ける、角を丸くする)


ストレッチをしながらほほ笑む女性

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ!

【第10回】では、Google Map を利用してCSS を使って枠線を付ける、角を丸くしてみます。

CSS を使って画像に枠線を付けたり、角を丸くするサンプル

■ Google Map で枠線を付ける

Google Map を中央寄せして、CSS で枠線を付けています。

■ Google Map で枠線を付けて角を丸くする

Google Map を中央寄せして、CSS で太い枠線を付けて角を少し丸くしています。

CSS を使って画像に枠線を付けたり、角を丸くする方法

Google Map を利用して、枠線を付けたり角丸にする方法です。

■ Google Map を利用する方法

Step.1 Google Map から HTML を取得する

Google Map の画面

Google Map で左上の小窓に「住所」、または、「ランドマーク」、または「店名」などを入力して虫眼鏡で検索して目的の場所を見つけます。

画面左上のメニュー(横三本線のアイコン)をクリックします。メニューが現れますので「地図を共有または埋め込む」をクリックします。

Google Map の HTML を取得する画面

「地図を埋め込む」 をクリックし、左上のプルダウンでサイズを選び、「HTMLをコピー」 表記をクリックします。

(クリップボードに、埋め込み用のコードをコピーされます)

Step.2 Google Map を記事に貼る

カスタム HTML ブロックに Google MAPのコードを埋め込む画面

ブロックを 「カスタム HTML」 で指定し、先ほどの 貼り付け用コード を貼り付けます。

■ Google Map に枠線をつける

枠線を表示したい場合は、HTML の style="border:0;" を style="border:1px solid;" に書き換えます。

■ 枠線を付ける場合の書き換え例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.1826142657083!2d2.2928388157398545!3d48.87379520757581!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fec70fb1d8f%3A0xd9b5676e112e643d!2z44Ko44OI44Ov44O844Or5Yex5peL6ZaA!5e0!3m2!1sja!2sjp!4v1652617185232!5m2!1sja!2sjp" width="600" height="450" style="border:1px solid;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Google Map の埋め込みコードにはすでに style="border:0;" で CSS が埋め込まれていますので、直接書き換えます。

枠線を付けるプロパティは「border」です。線の太さ、色、線の種類を指定できます。

実践を引く

CSS:「border : 1px solid

「1px」が線の太さ、「solid」が線の種類(実践)を指定しています。

太い赤い破線を引く

CSS:「border : 10px dashed #ff0000」

「10px」が線の太さ、「dashed」が線の種類(破線)、「#ff0000」で赤色を指定しています。

border で引ける線の種類

border プロパティでは、4種類の線を引くことができます。

実線:solid
 
2本線:double
 
破線:dashed
 
点線:dotted
 

■ Google Map を角丸表示する

枠線を表示したい場合は、HTML の style="border:0;" に "border-radius: 30px" を追加します。

■ 枠線を付ける場合の書き換え例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.1826142657083!2d2.2928388157398545!3d48.87379520757581!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fec70fb1d8f%3A0xd9b5676e112e643d!2z44Ko44OI44Ov44O844Or5Yex5peL6ZaA!5e0!3m2!1sja!2sjp!4v1652617185232!5m2!1sja!2sjp" width="600" height="450" style="border:1px solid; border-radius: 30px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Google Map の埋め込みコードにはすでに style="border:0;" で CSS が埋め込まれていますので、直接書き換えます。

角丸にするプロパティは「border-radius」です。丸みを px または % で指定します。

角丸(30px)にする

CSS:「border-radius: 30px

角丸の大きさを 30px で丸めています。

角丸(30%)にする

CSS:「border-radius: 30%

角丸の大きさを 30%(パーセント指定)で丸めています。

円にする

CSS:「border-radius: 50%

角丸の丸みを 50% にすると円になります。(もとが正方形の場合は真円になります)

CSS を使うことで、いろいろな表現・デザインができて楽しいですね。

まとめ

CSS では、枠線をつけたり、角丸表示にすることができる。

(Google Map 以外にも応用できます)

  • 枠線を付ける場合は「border」プロパティを使う
  • 角丸にする場合は「border-radius」プロパティを使う

多様なデザインで表現することができますので、記事のデザインが楽しくなりますね、

■ 最初から読む

HTML入門編(1)(WordPress で HTML を使ってみよう!)

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か?」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

続きを見る

「WordPress で HTML / CSS を使う」一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com