個人練習用：サイトパーツ、アコーディオン
| 順位 | 名前 | スコア | 称号 | 打鍵/秒 | 正誤率 | 時間(秒) | 打鍵数 | ミス | 問題 | 日付 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | mikaroko | 2036 | F+ | 2.0 | 97.6% | 673.3 | 1405 | 34 | 27 | 2025/10/31 |
関連タイピング
-
動きのあるメニューバーのサンプルHTML、CSS
プレイ回数137英語長文2586打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数4296英語長文673打 -
自分練習用、英語長文
プレイ回数2608英語長文1127打 -
フレックスボックスを使ったよくあるサイトパーツ
プレイ回数139英語長文667打 -
h2やh3のデザインのcssです。解説なしです。
プレイ回数336英語長文980打 -
html,cssカーソルを合わせると動く画像
プレイ回数607長文456打 -
個人練習用で作りました。解説なしです。
プレイ回数1303英語長文1140打 -
日本語訳なし、しゃべることと歩くことの比較
プレイ回数657英語長文1097打
問題文
(<!DOCTYPE html><html><head><meta charset="UTF-8">)
<!DOCTYPE html><html><head><meta charset="UTF-8">
(<title>accordion</title>)
<title>accordion</title>
(<link rel="stylesheet" href="css/acot.css"></head><body>)
<link rel="stylesheet" href="css/acot.css"></head><body>
(<div class="sample-accordion"><div class="ac-content">)
<div class="sample-accordion"><div class="ac-content">
(<label for="ac-cap1">1</label><input id="ac-cap1" type="checkbox">)
<label for="ac-cap1">1</label><input id="ac-cap1" type="checkbox">
(<div class="ac-cont"><p>1</p></div>)
<div class="ac-cont"><p>1</p></div>
(<label for="ac-cap2">2</label><input id="ac-cap2" type="checkbox">)
<label for="ac-cap2">2</label><input id="ac-cap2" type="checkbox">
(<div class="ac-cont"><p>2<br>2</p></div>)
<div class="ac-cont"><p>2<br>2</p></div>
(<label for="ac-cap3">3</label><input id="ac-cap3" type="checkbox">)
<label for="ac-cap3">3</label><input id="ac-cap3" type="checkbox">
(<div class="ac-cont"><p>3</p></div>)
<div class="ac-cont"><p>3</p></div>
(<label for="ac-cap4">4</label><input id="ac-cap4" type="checkbox">)
<label for="ac-cap4">4</label><input id="ac-cap4" type="checkbox">
(<div class="ac-cont"><p>4</p></div>)
<div class="ac-cont"><p>4</p></div>
(<label for="ac-cap5">5</label><input id="ac-cap5" type="checkbox">)
<label for="ac-cap5">5</label><input id="ac-cap5" type="checkbox">
(<div class="ac-cont"><p>5</p></div>)
<div class="ac-cont"><p>5</p></div>
(<!--ac-content--></div><!--sample-accordion--></div></body></html>)
<!--ac-content--></div><!--sample-accordion--></div></body></html>
(css start)
css start
(.sample-accordion { min-width: 300px; margin: 0 auto; padding: 0; })
.sample-accordion { min-width: 300px; margin: 0 auto; padding: 0; }
(.sample-accordion .ac-content { margin: 0; padding: 0; })
.sample-accordion .ac-content { margin: 0; padding: 0; }
(.sample-accordion input { display: none; })
.sample-accordion input { display: none; }
(.sample-accordion label { display: block; background: #9fb7d4; cursor: pointer;)
.sample-accordion label { display: block; background: #9fb7d4; cursor: pointer;
(padding: 10px; color: #fff; border-bottom: 1px solid #fff;)
padding: 10px; color: #fff; border-bottom: 1px solid #fff;
(box-sizing: border-box; })
box-sizing: border-box; }
(.sample-accordion label:hover { background: #ccc; })
.sample-accordion label:hover { background: #ccc; }
(.sample-accordion .ac-cont { transition: 0.2s; height: 0; overflow: hidden;)
.sample-accordion .ac-cont { transition: 0.2s; height: 0; overflow: hidden;
(background: #ddd; padding: 0 10px; box-sizing: border-box; })
background: #ddd; padding: 0 10px; box-sizing: border-box; }
(.sample-accordion input:checked + .ac-cont {)
.sample-accordion input:checked + .ac-cont {
(height: auto; padding: 10px; box-sizing: border-box; })
height: auto; padding: 10px; box-sizing: border-box; }