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

背景
投稿者投稿者ラルゴいいね0お気に入り登録
プレイ回数2747難易度(2.9) 721打 英語
自作のハンバーガーメニューを作成しましょう!
順位 名前 スコア 称号 打鍵/秒 正誤率 時間(秒) 打鍵数 ミス 問題 日付
1 aki♪ 5405 B++ 5.4 99.1% 65.3 356 3 20 2024/09/28
2 それいゆ 1857 F 1.9 97.0% 185.7 356 11 20 2024/10/16

関連タイピング

問題文

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

(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);

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