【デモ有り、コピペOK!】iframe(地図も動画も)縦横比が常に一定の完全フルレスポンシブのBOXを設置する方法

最終更新日:  |  web関連, 記事一覧

どーもこんばんは、黒ブタです。
昨今のweb制作ではタブレット、スマートフォン対応のレスポンシブWEBデザインが出来るのが当たり前となっています。
と言いますか、対応しないサイトはどんどんグーグルさんの評価が下がり、検索順位がガンガン落ちてしまうので、むしろレスポンシブ対応出来ないのはWEB製作者失格です。

そん中で私がいろんな局面で使用している便利なコードを紹介します。
サイトを作っている時に、地図や動画を設置したことは誰しもあるかと思います。

設置したはいいが、デバイスによってサイズがオーバーしてしまいハミ出してしまってレイアウトが台無しになった経験がある方、結構いらっしゃるのではないでしょうか?
そんな時にCSSのみで対応出来ちゃう手法があるんです!

今回はその手法をコード付きでご紹介しちゃいます。

重要になるのは、可変させたいコードをラップする親BOXです。
今回使う
imgboxとresponsive_boxのクラスをつけたBOXがそれに当たります。

CSSでは下記のコードが基準となります。


.imgbox{
position:relative;
width: 100%;
overflow:hidden;
}
.imgbox:before  {
content:"";
display: block;
padding-top: 62.5%;
}
.imgbox img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

地図についてはjsを使用しているのワードプレスの記事だけじゃ確認ができないので、デモページを作成しました。
動作確認のデモを見たい方はコチラをご確認ください。

http://blackpigtail.com/test/responsive-box.php

さて、それぞれの説明をさせて頂きます。


まずは1つ目、今回のコードの基本となるBOXのコード
とりあえず画像をレスポンシブにするという前提のBOXです。

htmlコード


<div id="content">
<div class="clearfix box1">
<h2>可変式BOX</h2>
<article>
<div class="imgbox">
<img alt="ここに画像またはiframeが入ります">
</div>
<div class="textbox">
<h3>タイトル1</h3>
<p>ここに記事抜粋が入ります</p>
</div>
</article>
</div>
</div>

これに対するCSSの内容


#content .box1 { width: 90%; margin: auto; }
#content .box1 article { width: 50%; height: auto; padding: 5px; box-sizing: border-box; border-radius: 10px; border: 1px solid #bebebe; }
#content .box1 article .imgbox { position: relative; width: 100%; background: #ffe1e1; border-radius: 10px; overflow: hidden; }
#content .box1 article .imgbox:before { content: ""; display: block; padding-top: 62.5%;}
#content .box1 article .imgbox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


2つ目は上記のフルレスポンシブだと画像が大き過ぎるという場合は最大サイズを指定します。

デモページ

http://blackpigtail.com/test/responsive-box.php

htmlコード


<div id="content">
<div class="clearfix box2">
<h2>BOXサイズが最大で400pxの可変式BOX</h2>
<article>
<div class="imgbox">
<img alt="ここに画像またはiframeが入ります">
</div>
<div class="textbox">
<h3>タイトル2</h3>
<p>ここに記事抜粋が入ります</p>
</div>
</article>
<article>
<div class="imgbox">
<img alt="ここに画像またはiframeが入ります">
</div>
<div class="textbox">
<h3>タイトル2</h3>
<p>ここに記事抜粋が入ります</p>
</div>
</article>
</div>
</div>

これに対応するCSS


#content .box2 { width: 90%; margin: auto; }
#content .box2 article { width: 48%; height: auto; margin: 1%; padding: 5px; box-sizing: border-box; border-radius: 10px; border: 1px solid #bebebe; float: left; }
#content .box2 article .imgbox { position: relative; width: 100%; max-width: 400px; background: #f2feff; border-radius: 10px; overflow: hidden; }
#content .box2 article .imgbox:before { content: ""; display: block; padding-top: 62.5%;}
#content .box2 article .imgbox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


3つ目はグーグルマップをフルレスポンシブで設置
jsがあるので長くなります。
今回の地図取得にはキーワードから自動検出させます。
同じ名前の建物が全世界でたくさんあるものは指定しづらいです。
世界で1つしかない建物などの場合、このキーワード検出を利用しましょう。
今回は「東京タワー」をキーワードに指定しました。
1つしかない建物なのでグーグルさんは正しく表示してくれています。
ポイントとなるキーワードは「location_point」という変数に格納して利用しています。
利用している(呼び出している)ところは赤くマーカーをつけときました。
実際に任意で入れていただくのは最初の変数に格納するところのみでOKです。

デモページ

http://blackpigtail.com/test/responsive-box.php

まずはjsから


<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var location_point = '東京タワー';
function drawMap(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{
'address': location_point,
'region': 'jp'
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
google.maps.event.addDomListener(window, 'load', function () {
var map_tag = document.getElementById('map');
var map_location = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
var map_options =
{
zoom: 16,
center: map_location,
draggable: false,
scrollwheel: false,
mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(map_tag, map_options);
var marker = new google.maps.Marker({
position: map_location,
map: map,
title:location_point
});
var styleOptions = [
{
"stylers": [
{ "saturation": 0 },
{ "visibility": "simplified" },
{ "lightness": 22 }
]
}
];
var styledMapOptions = { name: location_point }
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('sample', sampleType);
map.setMapTypeId('sample');
});
}
}
);
}
drawMap(location_point);
</script>

htmlコード


<div id="content">
<div class="clearfix box3">
<h2>グーグルマップ(地図)をフルレスポンシブにする可変式BOX</h2>
<article>
<div id="map" class="responsive_box"></div>
<div class="textbox">
<h3>東京タワーの所在地</h3>
<p>キーワード「東京タワー」で自動的に位置指定</p>
</div>
</article>
</div>
</div>

続いてCSS


#content .box3 { width: 90%; margin: auto; }
#content .box3 article { width: 100%; height: auto; margin: auto; box-sizing: border-box; background: #fff0e0; padding: 15px; }
#content .box3 article .responsive_box { position: relative; width: 100%; overflow: hidden; }
#content .box3 article .responsive_box:before { content: ""; display: block; padding-top: 62.5%;}


3つ目のだとサイズを固定していないので大きすぎになってしまう。
なので、4つ目は最大サイズを指定してレスポンシブ対応の地図を設置
今回は建物名ではなく住所で指定しました。
建物名がわからなかったり、全国に複数同じ名前の建物があるときなど利用します。
今回はタイトルを住所そのままにしましたが、タイトルはわかりやすい名前にしても地図の表示位置は変わりませんので、臨機応変に対応しましょう。
変更できるタイトルは茶色でマークしました。
任意で変更しましょう。
変数ではないので変更する場合はシングルクォーテーションで囲います。
title:’東京タワー’

デモページ

http://blackpigtail.com/test/responsive-box.php

まずは一番重要なjsから


<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var location_point2 = '東京都港区芝公園4丁目2−8';
function drawMap(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{
'address': location_point2,
'region': 'jp'
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
google.maps.event.addDomListener(window, 'load', function () {
var map_tag = document.getElementById('map2');
var map_location = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
var map_options =
{
zoom: 16,
center: map_location,
draggable: false,
scrollwheel: false,
mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(map_tag, map_options);
var marker = new google.maps.Marker({
position: map_location,
map: map,
title:location_point2
//title:'東京タワー'

});
var styleOptions = [
{
"stylers": [
{ "saturation": 0 },
{ "visibility": "simplified" },
{ "lightness": 22 }
]
}
];
var styledMapOptions = { name: location_point2 }
//var styledMapOptions = { name:'東京タワー' }
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('sample', sampleType);
map.setMapTypeId('sample');
});
}
}
);
}
drawMap(location_point2);
</script>

続いてこれを表示させるためのhtmlコード


<div id="content">
<div class="clearfix box4">
<h2>フルレスポンシブだとデカすぎるので、最大サイズを指定(700px)したグーグルマップ(地図)をレスポンシブにする可変式BOX</h2>
<article>
<div id="map2" class="responsive_box">
</div>
<div class="textbox">
<h3>東京タワーの所在地2</h3>
<p>キーワードを住所で指定して表示</p>
</div>
</article>
</div>
</div>

レスポンシブにするためにCSSで整えます。


#content .box4 { width: 90%; margin: auto; }
#content .box4 article { width: 100%; max-width: 700px; height: auto; margin: auto; box-sizing: border-box; background: #fff0e0; padding: 15px; }
#content .box4 article .responsive_box { position: relative; width: 100%; overflow: hidden; margin: auto; }
#content .box4 article .responsive_box:before { content: ""; display: block; padding-top: 62.5%;}


最後に動画をレスポンシブにします。
基本的に地図の対応と変わりませんが、可変にするためにiframeのポジションはボックスに対してabsoluteにしないといけません。

デモページ

http://blackpigtail.com/test/responsive-box.php

htmlコード


<div id="content">
<div class="clearfix box5">
<h2>【iframe】動画(YouTube)をレスポンシブにする可変式BOX</h2>
<article>
<div class="responsive_box">
<iframe width="800" height="500" src="https://www.youtube.com/embed/YuGAQKHzQ24" frameborder="0" allowfullscreen></iframe>
</div>
<div class="textbox">
<h3>動画タイトル</h3>
<p>iframeもフルレスポンシブ対応</p>
</div>
</article>
</div>
</div>

CSSコード


#content .box5 { width: 90%; margin: auto; }
#content .box5 article { width: 100%; max-width: 800px; height: auto; margin: auto; box-sizing: border-box; background: #fff0e0; padding: 15px; }
#content .box5 article .responsive_box { position: relative; width: 100%; overflow: hidden; margin: auto; }
#content .box5 article .responsive_box:before { content: ""; display: block; padding-top: 62.5%;  }
#content .box5 article .responsive_box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

こんな感じで全てレスポンシブにすることが簡単にできます。
皆さんも是非利用してみてください。