個人練習用：サイトパーツ、ハンバーガーメニュー
個人練習用：サイトパーツ、ハンバーガーメニュー
シンプルなハンバーガーメニューです。ＨＴＭＬの次にＣＳＳが始まります。解説なしです。
関連タイピング
-
２カラムフレックスボックスのサンプルサイト
プレイ回数653 英語長文630打 -
html,cssカーソルを合わせると動く画像
プレイ回数616 長文456打 -
動きのあるメニューバーのサンプルHTML、CSS
プレイ回数143 英語長文2586打 -
個人練習用：並び変え、間隔の調整、縦方向の揃えなど基本のまとめ
プレイ回数355 英語長文813打 -
ワードプレスでよく使う分岐文です。
プレイ回数740 長文記号1049打 -
簡単な解説付きでグラデーションをまとめ、個人練習用
プレイ回数523 長文645打 -
個人練習用で作りました。解説なしです。
プレイ回数1329 英語長文1140打 -
解説なし、個人練習用につくりました。
プレイ回数717 英語長文1054打
問題文
ふりがな非表示
ふりがな表示
(<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;
など
(transform: rotate(45deg); top: 27px; right: 12px; })
transform: rotate(45deg); top: 27px; right: 12px; }
(#check:checked ~ .span3 { width: 27px;)
#check:checked ~ .span3 { width: 27px;
(transform: rotate(-45deg); top: 27px; right: 12px; })
transform: rotate(-45deg); top: 27px; right: 12px; }
(#check { display: none; })
#check { display: none; }
(ul { width: 100%; height: 100%;)
ul { width: 100%; height: 100%;
(background-color: #2a9ee04a; margin: 0;)
background-color: #2a9ee04a; margin: 0;
(padding: 0; text-align: center;)
padding: 0; text-align: center;
(list-style: none; position: absolute;)
list-style: none; position: absolute;
(top: 0; right: -100%; transition: 1s; z-index: 10; })
top: 0; right: -100%; transition: 1s; z-index: 10; }
(li { margin-top: 20px; })
li { margin-top: 20px; }
(#check:checked ~ ul { right: 0; })
#check:checked ~ ul { right: 0; }