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

背景
投稿者投稿者ラルゴ  いいね0  お気に入り登録
プレイ回数2276  難易度(2.9) 721打 英語
タグタイピング タイピング練習 HTML CSS
自作のハンバーガーメニューを作成しましょう！
順位 名前 スコア 称号 打鍵/秒 正誤率 時間(秒) 打鍵数 ミス 問題 日付
1 aki♪ 4815 B 4.8 98.8% 73.1 356 4 20 2024/04/19
2 yuyu 562 G 0.6 84.5% 517.1 356 65 20 2024/04/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);

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