[オープンソース]IFRAMEで複数のアルバムを切り替えるレスポンシブ対応ページのテンプレートtemp2_3002_os

<style type="text/css">

/*** 全体 ***/
body{text-align:center;font-family:'メイリオ';margin:0px;background-color:#eed;}
.main{position:relative;top:0px;left:0px;z-index:10;width:100%;max-width:900px;margin:auto;text-align:center;}

/*** ヘッダー ***/
.header_back{position:relative;top:0px;left:0px;width:100%;background-color:#222;color:#fff;}
.header_r,.header_l{position:relative;top:0px;left:0px;display:inline-block;vertical-align:middle;}

/*** ヘッダー左側 ***/
.header_l{width:450px;text-align:left;padding:20px 0px;font-size:30px;font-weight:bold;text-align:left;font-family:'Times';}

/*** ヘッダー右側 ***/
.header_r{width:450px;text-align:center;}

/*** グローバルナビ ***/
.header_r td{width:150px;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;}
.header_r td a{width:100%;padding:20px 0px;text-align:center;font-size:14px;text-decoration:none;display:block;background-color:#333;color:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;}
.header_r td a:hover{color:#fc3;background-color:#555;}

/*** レスポンシブ化 ***/
@media screen and (max-width:900px){
.header_l{text-align:center;}
.header_l{width:100%;display:block;}
.header_r{width:100%;max-width:500px;display:table;margin:auto;}
.header_r td{width:33%;}
.header_r td a{padding:10px 0px;}
}

</style>

<div class="header_back">

<div class="header_l">

Collection of photographs

</div>

<table class="header_r" cellpadding="0" cellspacing="5">
<tr>

<td>
<a href="../../img79/img79_1_ScY0_os_miyake_kobo.html" target="myIf">album 1</a>
</td>

<td>
<a href="../../img79/img79_2_ScY0_os_miyake_kobo.html" target="myIf">album 2</a>
</td>

<td>
<a href="../../img79/img79_3_ScY0_os_miyake_kobo.html" target="myIf">album 3</a>
</td>

</tr>
</table>

</div>

<div	style="
	position:relative;
	top:0px;
	left:0px;
	margin:auto;
	width:100%;
	max-width:900px;
	margin-top:7%;
">
	<div	style="
		position:relative;
		top:0px;
		left:0px;
		width:100%;
		padding-bottom:75%;
	">
		<iframe
			name="myIf"
			src="../../img79/img79_1_ScY0_os_miyake_kobo.html"
			allowfullscreen
			frameborder="0"
			scrolling="no"
			style="
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			margin:0;
			padding:0;
		">
		</iframe>
	</div>
</div>

[オープンソース]IFRAMEで複数のアルバムを切り替えるレスポンシブ対応ページのテンプレートtemp2_3002_os

このページの説明: 　レスポンシブデザインのホームページのテンプレートです。IFRAMEタグを使えば、複数の種類が違うスライドショーを切り替える事ができます。別のスライドショーをIFRAME部分に読み込む事で、複数のアルバムを切り替えています。; 　このページでは、３つの異なる写真のオープンソース版スライドショーを使っていますが、ご自身で用意したスライドショーに差し替えて使用してください。上部右側のボタンのクリックで切り替わります。これらのオープンソース版スライドショーを使いたい方は、それぞれIFRAMEのソースを開いてコピーしてください。使い方はソース内に記述してあります。; 　IFRAMEのアスペクト比を維持したままレスポンシブに対応させるには、サンプルの様に二重のDIV要素で囲んでください。外側のDIV要素のスタイルでwidth:～%;とし、内側のDIV要素のスタイルではwidth:100%;padding-bottom:（写真の高さ / 写真の幅 * 100）%;として、強制的にアスペクト比を維持して下さい。これは、CSSのpaddingプロパティを％で指定した場合、相対値の基準が包含ブロックの幅になる事を利用しています。その中にposition:absolute;top:0px;left:0px;で位置指定したIFRAME要素を入れてください。; 　このサンプルは著作権表示がなく商用でも自由に使用できます。

⇔

このページのソース: 　ページ全体のソースです。他のページに貼り付けるためのソースではありません。

注意事項: 　このページは文字コード「UTF-8」で書いています。掲載しているソースの一部を、他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.