HTML&CSS (ハンバーガーメニュー)

投稿者ラルゴプレイ回数518
難易度(2.9) 721打 英語タグタイピング タイピング練習 HTML CSS
自作のハンバーガーメニューを作成しましょう!
順位 名前 スコア 称号 打鍵/秒 正誤率 時間(秒) 打鍵数 ミス 問題 日付
1 地蔵 3534 D+ 3.7 95.6% 96.2 356 16 20 2021/10/24
2 aki♪ 3417 D 3.4 99.1% 103.3 356 3 20 2021/11/02
3 t 3227 E++ 3.3 97.2% 107.2 356 10 20 2021/10/23

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(drawer__icon)

drawer__icon

(drawer__icon__bars)

drawer__icon__bars

(drawer__icon__bar1)

drawer__icon__bar1

(drawer__icon__bar2)

drawer__icon__bar2

(drawer__icon__bar3)

drawer__icon__bar3

(css)

css

(.drawer__icon {)

.drawer__icon {

(position: fixed;)

position: fixed;

(top: 20px;)

top: 20px;

(right: 16px;)

right: 16px;

(z-index: 300;)

z-index: 300;

(.drawer__icon__bars {)

.drawer__icon__bars {

(width: 22px;)

width: 22px;

(height: 20px;)

height: 20px;

(display: block;)

display: block;

(position: relative;)

position: relative;

(.drawer__icon__bar1, .drawer__icon__bar2, .drawer__icon__bar3 { position: absolute;)

.drawer__icon__bar1, .drawer__icon__bar2, .drawer__icon__bar3 { position: absolute;

(width: 22px;)

width: 22px;

(height: 4px;)

height: 4px;

(background: #fff;)

background: #fff;

など

(top: 0;)

top: 0;

(left: 0;)

left: 0;

(.drawer__icon__bar1 { top: 0;)

.drawer__icon__bar1 { top: 0;

(.drawer__icon__bar2 { top: 8px;)

.drawer__icon__bar2 { top: 8px;

(.drawer__icon__bar3 { top: 16px;)

.drawer__icon__bar3 { top: 16px;

(html)

html

(drawer__icon is-active)

drawer__icon is-active

(css)

css

(.drawer__icon { $.is-active {)

.drawer__icon { $.is-active {

(.drawer__icon__bar2 { display: none;)

.drawer__icon__bar2 { display: none;

(.drawer__icon__bar1 { transform: rotate(-45deg);)

.drawer__icon__bar1 { transform: rotate(-45deg);

(top: 8px;)

top: 8px;

(.drawer__icon__bar3 { transform: rotate(45deg);)

.drawer__icon__bar3 { transform: rotate(45deg);

(top: 8px;)

top: 8px;

(.drawer__icon { $.is-active {)

.drawer__icon { $.is-active {

(transform: translateX(-200px);)

transform: translateX(-200px);

問題文を全て表示 一部のみ表示 誤字・脱字等の報告