kazumalab tech log

流行りとリラックマと嵐が大好きです。技術的ログ。

30分チャレンジ〜9日目〜

kazuma.です。

今日の30分チャレンジはcss、htmlコーディングです。
デザインも込みで。

やはり実用的なことをしていかないとな。

今日作ったサイトはこれです!
http://kazumalab.web.fc2.com/sample2/index.html


今回のテーマは店のHPをイメージして作ってみました。
その中でもアクセスページの製作です。

Google mapを埋め込みたかったため。
結構簡単に埋め込むことができます。

書くcssはこれだけ。

.ggmap{
	position: relative;
padding-bottom: 50%;
padding-top: 100px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 150px;
left: 200px;
width: 50%;
height: 50%;
}

position: absolute;の後のtop,left,width,heightなどは好みや場合によって変更してください。

まずはgoogle mapのmenuバーを選択。
f:id:kazumalab:20150722225435p:plain

その後、地図を共有または埋め込むを選択。
f:id:kazumalab:20150722225519p:plain

地図を埋め込む内コードを全てコピーします。
f:id:kazumalab:20150722225604p:plain

後はhtml内に

<div class="ggmap"><iframe>コピーしたURL</iframe></div>

これだけで表示されます。
cssってこんなに簡単なんですね!

もっと腕を磨きたいね!!
後はjavascriptも記述できれば完璧!


こんなことはまだ言えるレベルじゃないけどHP製作の仕事ほしー笑
以上。