0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-28

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

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

####手順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>で囲うだけで完成。

part2.png 下記を.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
(工事中)まで。

応用例は後日。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?