前項で、全画面のページが縦に移動して切り替えられるサイト作りを紹介したが、この項では、全画面のページが横に移動して切り替えられるサイト作りである。
縦移動型と、ほぼ同じ作りで、水平に並べたページを、transition を使ったアニメーションで移動させている。横移動型では、ページの高さが必ずしも画面内に収まらなくてもいいので、高さ指定は外している。ただし、背景写真の高さは画面に収まる高さになるので、はみ出たコンテンツは写真の下に表示されることになる。デザイン的には、考慮が必要になるかもしれない。
本稿では、画面の幅が800pxよりも小さい場合には、コンテンツ表示枠のレイアウトを幅広に調節して、小さいデバイスで見やすいように調節した。
サンプル(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>
<p>明治六年政変</p>
<p> 対朝鮮（当時は李氏朝鮮）問題は、明治元年（1868年）に李朝が維新政府の国書の受け取りを拒絶したことが発端だが、この国書受け取りと朝鮮との修好条約締結問題は留守内閣時にも一向に進展していなかった。そこで、進展しない原因とその対策を知る必要があって、西郷と板垣退助・副島種臣らは、調査のために、明治5年（1872年）8月15日に池上四郎・武市正幹・彭城中平を清国・ロシア・朝鮮探偵として満洲に派遣し[9]、27日に北村重頼・河村洋与・別府晋介（景長）を花房外務大丞随員（実際は変装しての探偵）として釜山に派遣した[10]。</p>
<p> 明治6年（1873年）の対朝鮮問題をめぐる政府首脳の軋轢は、6月に外務少記・森山茂が釜山から帰国後、李朝政府が日本の国書を拒絶したうえ、使節を侮辱し、居留民の安全が脅かされているので、朝鮮から撤退するか、武力で修好条約を締結させるかの裁決が必要であると報告し、それを外務少輔・上野景範が内閣に議案として提出したことに始まる。この議案は6月12日から7参議により審議された。
議案は当初、板垣が武力による修好条約締結（征韓論）を主張したのに対し、西郷は武力を不可として、自分が旧例の服装で全権大使になる（遣韓大使論）と主張して対立した。しかし、数度に及ぶ説得で、方法・人選で反対していた板垣と外務卿の副島が8月初めに西郷案に同意した。西郷派遣については、16日に三条実美の同意を得て、17日の閣議で決定された。しかし、三条が天皇に報告したとき、「岩倉具視の帰朝を待って、岩倉と熟議して奏上せよ」との勅旨があったので、発表は岩倉帰国まで待つことになった。</p>
<p> 以上の時点までは、西郷・板垣・副島らは大使派遣の方向で事態は進行するものと考えていた。ところが、9月、岩倉が帰国すると、先に外遊から帰国していた木戸孝允・大久保利通らの内治優先論が表面化してきた。大久保らが参議に加わった9月14日の閣議では大使派遣問題は議決できず、15日の再議で西郷派遣に決定した。しかし、これに反対する木戸孝允・大久保利通・大隈重信・大木喬任らの参議が辞表を提出し、右大臣・岩倉も辞意を表明する事態に至った。これを憂慮した三条は18日夜、急病になり、岩倉が太政大臣代行になった。そこで、西郷と板垣退助・副島種臣・江藤新平らは岩倉邸を訪ねて、閣議決定の上奏裁可を求めたが、岩倉は了承しなかった。
9月23日、西郷が陸軍大将兼参議・近衛都督を辞し、位階も返上すると上表したのに対し、すでに宮中工作を終えていた岩倉は、閣議の決定とは別に西郷派遣延期の意見書を天皇に提出した。翌24日に天皇が岩倉の意見を入れ、西郷派遣を無期延期するとの裁可を出したので、西郷は辞職した。このとき、西郷の参議・近衛都督辞職は許可されたが、陸軍大将辞職と位階の返上は許されなかった。
翌25日になると、板垣・副島・後藤・江藤らの参議も辞職した。この一連の辞職に同調して、征韓論・遣韓大使派の林有造・桐野利秋・篠原国幹・淵辺群平・別府晋介・河野主一郎・辺見十郎太をはじめとする政治家・軍人・官僚600名余が次々に大量に辞任した。この後も辞職が続き、遅れて帰国した村田新八・池上四郎らもまた辞任した（明治六年政変）。
このとき、西郷の推挙で兵部大輔・大村益次郎の後任に補されながら、能力不足と自覚して、先に下野していた前原一誠は「宜シク西郷ノ職ヲ復シテ薩長調和ノ実ヲ計ルベシ、然ラザレバ、賢ヲ失フノ議起コラント」[11]という内容の書簡を太政大臣・三条実美に送り、明治政府の前途を憂えた。 </p>
（ウィキペディアより）</div>
</div>
</div>
<div id="d5" class="page">
<iframe src="../portfolio/gallery.html" allowtransparency="true"></iframe>
</div>
<div id="d6" class="page">
<div class="textbox_s">Email Address: saigo@hoge.ne.jp</div>
</div>
</div>
</body>
本サンプル表示用CSS
html,body {
height:100%;
background:#555;
overflow-x: 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;
left:0;
transition:left 1s ease;
}
/* 各ページ共通 */
.page {
position:absolute;
top:0;
width:100%;height:100%;
background-size:100% 100%;
}
/* 各ページの背景、表面ページ */
#d1 { left:0; background-image:url(img/background.jpg); }
#d1 span { font-size:78px;color:#fff;position:absolute;bottom:10%;left:15%;animation:slideup 2s ease;animation-fill-mode: forwards; }
#d1 img { width:350px;height:80%;position:absolute;bottom:0;right:15%; }
#d2 { left:100%; background-image:url(img/background2.jpg); }
#d3 { left:200%; background-image:url(img/background3.jpg); }
#d4 { left:300%; background-image:url(img/background4.jpg); }
#d5 { left:400%; background-image:url(img/background5.jpg); }
#d6 { left:500%; background-image:url(img/background6.jpg); }
/* ページ内コンテンツ・テキストボックス */
.contents {
position:absolute;
margin:auto;top:20%;
bottom:0;left:0;right:0;
width: 60%;
min-width:400px;
}
@media screen and (max-width:800px) {
.contents {
width:90%;
min-width:320px;
padding:5px;
margin-top:1%;
margin:0 auto;
font-size:14px;
}
}
.textbox {
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;
width:65%; height:80%;
}
@media screen and (max-width:800px) {
#d5 iframe {
width:90%;
}
}
/* 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 { left:0%; }
#r2:checked ~ #container { left:-100%; }
#r3:checked ~ #container { left:-200%; }
#r4:checked ~ #container { left:-300%; }
#r5:checked ~ #container { left:-400%; }
#r6:checked ~ #container { left:-500%; }
@keyframes slideup {
0% { botom:10%;opacity:0; }
100% { bottom:20%;opacity:1; }
}