【授業メモ】fontawesomeでのアイコン表示、Googleマップ表示

アイコンをwebフォントで表示する方法

■fontawesomeが便利

webサイト制作の際、アイコンもGoogleフォントのようにウェブ上にあるほしいフォントを指定してCSSに読み込ませることができる。

http://fortawesome.github.io

特にFacebookやインスタなどのSNSアイコンは良く使うので、便利！

■やりかた

① fortawesome.github.io でほしいアイコンを探す

②表示された<i>タグをコピーし、htmlにペーストする

<ul>

</ul>

③fontawesomeフッター部分の「 BootstrapCDN for Font Awesome　」から、cssのURLをコピーする

④<head>内のcssリンクのに、<link rel="stylesheet" href="">でリンクさせる

<title>Cafe de FELICA</title>

</head>

■fontawesomeは画像ではなく文字

持ってきたアイコンをCSSで大きさや色など変更する場合は、文字の指定と同じと考える。

アイコンだから画像みたいだけど、「 fontawesome」→「文字」！！！

ベクターデータなので拡大しても汚くならず、拡大縮小自由で、レスポンシブ対応にも向いている。

htmlにコピペした部分にclass名がすでについているので、これを指定してあげればいいだけ。

<p><small>©Cafe de FELICA</small></p>

<ul>

</ul>

i.fa{

font-size: 32px;

color: blue;

}

文字と同じように動かせる

footer ul {

float:right;

}

footer li {

float: left;

margin: 10px;

}

footer i.fa{

font-size: 40px;

color: navy;

}

f:id:shima0web:20170821203519p:plain

f:id:shima0web:20170821203521p:plain

f:id:shima0web:20170821203526p:plain

Googleマップを表示させる方法

■Googleマイビジネス

https://www.google.co.jp/intl/ja/business/

登録の際、送られてくるはがきがないと進められないので、掲載したい日の二週間くらい前に準備する必要がある。

■GoogleAPI

https://developers.google.com/maps/?hl=ja

JavaScriptの知識が必要

■地図を共有または埋め込む

　①Googleマップで表示させたい場所を検索

f:id:shima0web:20170821203736p:plain

　②場所が表示されたら、左上のメニューバーの「地図を共有または埋め込む」

f:id:shima0web:20170821203749p:plain

　③「地図を埋め込む」のURLをコピーし、表示させたい場所のhtmlにペーストする

　④htmlにある記述は、cssよりも強く優先されるので、コピペした部分内にある幅高さは削除する

　コピペしたままには、すでに幅高さが入ってしまっており、このままだとcssでいくら記述を加えてもhtmlにある幅高さが優先されてしまってうわがきできないから。

<h2>access</h2>

</div>

　⑤iframeタグにid名を付ける

iframeはdivみたいな意味なので、iframe id=""

<h2>access</h2>

</div>

　⑥幅や高さをcssで記述する

どっちもかんたん！！！(*'▽')　Googleマップなんて、もっと難しいと思ってました。

web制作勉強中です。

職業訓練校でweb制作を勉強しています。勉強のメモなど記録します。

【授業メモ】fontawesomeでのアイコン表示、Googleマップ表示