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バーを選択。
その後、地図を共有または埋め込むを選択。
地図を埋め込む内コードを全てコピーします。
後はhtml内に
<div class="ggmap"><iframe>コピーしたURL</iframe></div>
これだけで表示されます。
cssってこんなに簡単なんですね!
もっと腕を磨きたいね!!
後はjavascriptも記述できれば完璧!
こんなことはまだ言えるレベルじゃないけどHP製作の仕事ほしー笑
以上。