オーガナイズドなCSSとミニマルなJSで実装する三枚綴りページ

テーマ

　「DHTMLを極める為にJSを極める」という考え方はもう古いという事に最近気がついた。時代のニーズのトレンドは「周到なCSSを如何に練り上げ、JSやPHPにどれだけしょうもないことをさせるか」ではないか。例えば↓↓↓こんな風に。

やりたいこと

html1ページに3枚のページを重ねて表示する。
1枚目を中央に配置し、2枚目を右下、3枚目を左上にずらす。
2枚目をクリックすると2枚目が一番上にめくり上がり、3枚目をクリックすると3枚目が一番上にめくり上がる。
1→2→３→1→2や、1→3→2→1→3の切り替えは無限に可能。

手順1

htmlタグはとてもシンプル。大雑把に言えば、一つのulに5つのliを入れているだけ。
ulは可動域を示し、liはページx3と切替スイッチx2の役割を担う。

<ul id=i1 class=p0>
<li id=i10>i10<li id=i11>i11<li id=i12>i12
<li id=i13><a href=javascript:ci1(2)></a>
<li id=i14><a href=javascript:ci1(1)></a>
</ul>

手順2

次はcss。そのうち、まずはulについて。
fixedで固定とし、body中央に可動域ulを配置している。
この値はjsで変更させたり、media-queriesでスマホ用とPC用に別個の指定を設けられる。
後述するliの位置や大きさはulを基準としているので、ul一つの位置、大きさ指定で、全てのliがオーガナイズドに連動して変化する。

ul{position:fixed;width:500px;height:80%;
left:calc(50% - 250px);top:10%}

手順3

3枚のページと2つのスイッチ（5つのli）を指定するcss。
ulのclassがp0である場合、3枚目i12とスイッチi13が左上にずれ、
2枚目i11とスイッチi14が右下にずれる。
スイッチ（i13,i14）の位置は固定であり、ページの位置はulのclassNameで操作される。

li,a{display:inline-block}
li{position:absolute;width:450px;height:calc(100% - 50px);
left:0;top:0;transition:left .7s,top 1.2s;opacity:.7}
#i10,#i11,#i12{overflow:auto}
#i13>a,#i14>a{width:100%;height:100%}
.p0>#i10,.p1>#i11,.p2>#i12{left:25px;top:25px;z-index:2;opacity:1}
.p0>#i11,.p1>#i12,.p2>#i10,#i14{left:50px;top:50px}

おまけ

動きがわかるように、bodyと3枚のページに背景を指定。

body{background:#444}
#i10{background:#eff}
#i11{background:#fef}
#i12{background:#ffe}

手順4

今回、jsにさせる事は一つ。「ulのclass属性値を切り替える」だけ。
スイッチi14でci1(1)を呼び出せばp0→p1→p2→p0と切り替わり、
スイッチi13でci1(2)を呼び出せばp0→p2→p1→p0と切り替わる。

var n=0;
function ci1(b){n=(n+b)%3;id(1).className='p'+n}
function id(n){return document.getElementById('i'+n)}

あとはjsを<script></script>、cssを<style></style>で囲うだけで完成。

下記を.htmlファイルとして保存すれば、そのまま使える。i10〜i12にはpやulだけでなく、width,height:100%のiframeやtextareaなど、何を入れても機能する。

<meta charset=utf-8>
<style>
*,iframe,textarea{margin:0;padding:0;border:none;box-sizing:border-box}
ul{position:fixed;width:500px;height:80%;left:calc(50% - 250px);top:10%}
li,a{display:inline-block}
li{position:absolute;width:450px;height:calc(100% - 50px);
left:0;top:0;transition:left .7s,top 1.2s;opacity:.5}
#i10,#i11,#i12{overflow:auto}
#i13>a,#i14>a{width:100%;height:100%}
.p0>#i10,.p1>#i11,.p2>#i12{left:25px;top:25px;z-index:2;opacity:1}
.p0>#i11,.p1>#i12,.p2>#i10,#i14{left:50px;top:50px}
body{background:#444}#i10{background:#eff}
#i11{background:#fef}#i12{background:#ffe}
</style>
<ul id=i1 class=p0>
<li id=i10>i10
<li id=i11>i11
<li id=i12>i12
<li id=i13><a href=javascript:ci1(2)></a>
<li id=i14><a href=javascript:ci1(1)></a>
</ul>
<script>
var n=0;
function ci1(b){n=(n+b)%3;id(1).className='p'+n}
function id(n){return document.getElementById('i'+n)}
</script>

コピペが面倒なら、とりあえず
https://4efg.com/e
（工事中）まで。

応用例は後日。