全画面のページが縦に移動して切り替えられるサイト作りである。
各画面は、スクロールできない設定であるので、1ページは画面内に表示されるコンテンツに限定されるので、長いコンテンツを含むサイトには不向きである。ページ内のdiv要素に overflow:auto を記述すれば、スクロールバー付きである程度の長さのコンテンツは表示できる。
ここに記載の例を応用して、私自身のサイトをリニューアルしたので、参考に供したい。
=> http://tyoshioka.com/
スマホなどの小デバイスでは、それなりに表示されるが、最適化はできていないので、応用してみたい方は、その辺の考慮をしていただければと思う。
なお、Gallery に表示したコンテンツは、本サイト前々稿の「ギャラリー型ポートフォリオ」を iframe 内に読み込んでいる。
サンプル（DEMO）
本サンプル表示用HTML
<body><input type="radio" name="btn" id="r1"><input type="radio" name="btn" id="r2"><input type="radio" name="btn" id="r3"><input type="radio" name="btn" id="r4"><input type="radio" name="btn" id="r5"><input type="radio" name="btn" id="r6"><div id="container"> <div id="navi"> <label for="r1"> <li class="menu"> HOME </li> </label> <label for="r2"> <li class="menu"> PROFILE </li> </label> <label for="r3"> <li class="menu"> TOPICKS </li> </label> <label for="r4"> <li class="menu"> MEMOS </li> </label> <label for="r5"> <li class="menu"> GALLERY </li> </label> <label for="r6"> <li class="menu"> CONTACT </li> </label> </div> <div id="d1" class="page"><img src="img/segodon.png"><span>Takamori<br> Saigo</span></div> <div id="d2" class="page"> <div class="contents"> <div class="textbox"> <p><span style="font-weight:bold; font-size:30px !important; margin:3px 0 3px 0;"> PROFILE</span></p><br /> <p> 薩摩国薩摩藩の下級藩士・西郷吉兵衛隆盛の長男。諱は元服時に<strong>隆永</strong>（たかなが）のちに武雄・<strong>隆盛</strong>（たかもり）と変更。幼名は小吉、通称は吉之介、善兵衛、吉兵衛、吉之助と順次変更。号は南洲（なんしゅう）。隆盛は父と同名であるが、これは王政復古の章典で位階を授けられる際に親友の吉井友実が誤って父・吉兵衛の名を届けたため、それ以後は父の名を名乗ったためである。一時、西郷三助・菊池源吾・大島三右衛門、大島吉之助などの変名も名乗った。</p> <p>西郷家の初代は熊本から鹿児島に移り、鹿児島へ来てからの7代目が父・吉兵衛隆盛、8代目が吉之助隆盛である。次弟は戊辰戦争（北越戦争・新潟県長岡市）で戦死した西郷吉二郎（隆廣）、三弟は明治政府の重鎮西郷従道（通称は信吾、号は竜庵）、四弟は西南戦争で戦死した西郷小兵衛（隆雄、隆武）。大山巌（弥助）は従弟、川村純義（与十郎）も親戚である。</p> <p>（ウィキペディアより）</p> </div></div> </div> <div id="d3" class="page"> <div class="contents"> <div class="textbox"> <p><span style="font-weight:bold; font-size:24px !important; margin:3px 0 3px 0;"> TOPICKS</span></p> <H3><SPAN id=".E5.AF.BA.E7.94.B0.E5.B1.8B.E9.A8.92.E5.8B.95.E5.89.8D.E5.BE.8C"></SPAN><SPAN id="寺田屋騒動前後">寺田屋騒動前後</SPAN></H3> <p>文久元年（1861年）10月、久光は公武周旋に乗り出す決意をして要路重臣の更迭を行ったが、京都での手づるがなく、小納戸役の大久保・堀次郎らの進言で西郷に召還状を出した。西郷は11月21日に召還状を受け取ると、世話になった人々への挨拶を済ませ、愛加那の生活が立つようにしたのち、文久2年（1862年）1月14日に阿丹崎を出帆し、口永良部島・枕崎を経て2月12日に鹿児島へ着いた。2月15日、生きていることが幕府に発覚しないように西郷三助から大島三右衛門[注釈 3]と改名した。同日、久光に召されたが、久光が無官で、斉彬ほどの人望が無いことを理由に上京すべきでないと主張し、また、「御前ニハ恐レナガラ地ゴロ（地ゴロは田舎者という意味）」なので周旋は無理だと言ったので、久光の不興を買った。一旦は同行を断ったが、大久保の説得で上京を承諾し、旧役に復した。3月13日、下関で待機する命を受けて、村田新八を伴って先発した。</p> <p> </p> <p>（ウィキペディアより）<br /></p> </div> </div> </div> <div id="d4" class="page"> <div class="contents"> <div class="textbox"> <p><span class="OTES">NOTES</span><br /> </p> <p>なお、明治4年（1871年）11月の岩倉使節団出発から明治6年（1873年）9月の岩倉帰国までの間に西郷主導留守内閣が施行した主な政策は以下の通りである。</p> <UL> <LI>府県の統廃合（3府72県）</LI> <LI>陸軍省・海軍省の設置</LI> <LI>学制の制定</LI> <LI>国立銀行条例公布</LI> <LI>太陽暦の採用</LI> <LI>徴兵令の布告</LI> <LI>キリスト教禁制の高札の撤廃</LI> <LI>地租改正条例の布告</LI> </UL> （ウィキペディアより）</div> </div> </div> <div id="d5" class="page"> <iframe src="../portfolio/gallery.html" width="60%" height="75%" allowtransparency="true"></iframe> </div> <div id="d6" class="page"> <div class="textbox_s">Email Address: saigo@hoge.ne.jp</div> </div></div></body> |
本サンプル表示用CSS
/* 画面高さを100%、クロール不可 */html,body { height:100%; overflow:hidden;}/* メニュー項目 */#navi { top:6%;left:8%; width:100%; list-style:none; font-size:18px; color:#fff; position:fixed; z-index:100;}#navi li { margin-left:1%; float:left; background-color:rgba(0,0,0,0.3);}#navi li:hover { color:#DD8586; cursor:pointer;}/* 全ページ包含コンテナー */#container { position:absolute; width:100%; height:100%; top:0; transition:top 1s ease; } /* 各ページ共通 */.page { position:relative; width:100%;height:100%; background-repeat:no-repeat; background-size:100% 100%;}/* 各ページの背景、表面ページ */#d1 { background-image:url(img/background.jpg); }#d1 span { font-size:78px;color:#fff;position:absolute;bottom:20%;left:15%; }#d1 img { width:350px;height:80%;position:absolute;bottom:0;right:15%; }#d2 { background-image:url(img/background.jpg); }#d3 { background-image:url(img/background.jpg); }#d4 { background-image:url(img/background.jpg); }#d5 { background-image:url(img/background.jpg); }#d6 { background-image:url(img/background.jpg); }/* ページ内コンテンツ・テキストボックス */.contents { position:absolute; margin:auto;top:20%; bottom:0;left:0;right:0; width: 60%; min-width:400px; height: 550px;}.textbox { height: 540px; overflow: auto; font-size: 14px; color: #000000; background-color: rgba( 0, 0, 0, 0.6 ); color:#fff; border:#fff 10px solid; padding: 0 10px 0 10px;;}.textbox a { color:#fff;}.textbox a:hover { color:orange;}/* ギャラリー読み込み用iframe */#d5 iframe { position:absolute; margin:auto; top:0;bottom:0;left:0;right:0; background-color:rgba(255,255,255,0.67); border:0px;}/* Email用テキストボックス */.textbox_s { width:20%; height:10%; position:absolute; margin:auto; top:75%;right:0;bottom:0;left:0; color:#fff; font-size:20px;}/*ラジオボタン非表示*/#r1,#r2,#r3,#r4,#r5 { display:none; }/* メニューボタンクリック時のtransition */#r1:checked ~ #container { top:0%; }#r2:checked ~ #container { top:-100%; }#r3:checked ~ #container { top:-200%; }#r4:checked ~ #container { top:-300%; }#r5:checked ~ #container { top:-400%; }#r6:checked ~ #container { top:-500%; } |