個人練習用：サイトパーツ、ハンバーガーメニュー

(<nav><input type="checkbox" id="check">)

<nav><input type="checkbox" id="check">

(<span class="span1"></span>)

<span class="span1"></span>

(<span class="span2"></span><span class="span3"></span>)

<span class="span2"></span><span class="span3"></span>

(<label for="check"></label>)

<label for="check"></label>

(<ul><li>menu1</li><li>menu2</li>)

<ul><li>menu1</li><li>menu2</li>

(<li>menu3</li></ul></nav>)

<li>menu3</li></ul></nav>

(start css)

start css

(nav { position: relative; height: 100vh;)

nav { position: relative; height: 100vh;

(overflow: hidden; })

overflow: hidden; }

(label { width: 30px; height: 30px;)

label { width: 30px; height: 30px;

(border: 1px solid black; position: absolute;)

border: 1px solid black; position: absolute;

(right: 10px; top: 10px; z-index: 1000; })

right: 10px; top: 10px; z-index: 1000; }

(span { width: 20px; height: 1px; background-color: black;)

span { width: 20px; height: 1px; background-color: black;

(position: absolute; right: 15px;)

position: absolute; right: 15px;

(transition: .3s; z-index: 100; })

transition: .3s; z-index: 100; }

(.span1 { top: 20px; })

.span1 { top: 20px; }

(.span2 { top: 27px; })

.span2 { top: 27px; }

(.span3 { top: 34px; })

.span3 { top: 34px; }

(#check:checked ~ .span2 { display: none; })

#check:checked ~ .span2 { display: none; }

(#check:checked ~ .span1 { width: 27px;)

#check:checked ~ .span1 { width: 27px;