webdev

ウェブの技術とか開発環境構築の覚書。

YoutubeやGoogleMapsをリキッド表示にするCSS

2015年9月30日

absoluteで絶対位置配置した要素のサイズを相対指定の応用で
YoutubeやGoogleMapsAPIなどiframeで埋め込む要素を縦横比固定でリキッド表示するCSSです。
スマートフォンやレスポンシブ対応のときに役立ちます。

リキッドの枠をつくり その中へYoutubeやGoogleMapsを呼び出す

今回は、サンプルとして地図を設置してみました。

まず、地図を表示する枠として入れ子状にbox要素のタグを設置します。

<br />
&lt;div class=&quot;map-area&quot;&gt;<br />
	&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />

CSSでは、外枠をリキッド表示にして内枠を絶対配置で外枠のサイズに合わせています。
外枠の縦横比を固定するため、高さはheightではなくpaddingの%で指定しています。
4:3 なら75%、16:9 なら 56.25%です。

<br />
.map-area{<br />
	position: relative;<br />
	width: 100%;<br />
	height: 0;<br />
	padding: 56.25% 0 0;<br />
	background: #eee;<br />
}<br />
.map {<br />
	position: absolute;<br />
	top: 0;<br />
	left: 0;<br />
	right: 0;<br />
	bottom: 0;<br />
}<br />

GoogleMapsAPIで地図を表示するJavascript

おまけとして。サンプルの、富士山の地図を表示したスクリプトです。
GoogleMapsAPIでの地図表示については、GoogleMapsAPIで地図を表示でも詳しくとりあげています。

<br />
function mapInit() {<br />
	var map = new google.maps.Map(document.getElementById('map'), {<br />
		center: { lat: 35.3605555, lng: 138.7277777 },<br />
		zoom: 8,<br />
		mapTypeId: google.maps.MapTypeId.ROADMAP<br />
	});<br />
}<br />
if( window.addEventListener ) {<br />
	window.addEventListener( 'load', mapInit, false );<br />
}<br />
else if( window.attachEvent ) {<br />
	window.attachEvent( 'onload', mapInit);<br />
}<br />
else {<br />
	window.onload = mapInit;<br />
}<br />

関連記事