個人練習用：サイトパーツ、アコーディオン
関連タイピング
-
解説なしで、個人練習用のコードです。
プレイ回数378英語長文327打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数3728英語長文673打 -
html,cssカーソルを合わせると動く画像
プレイ回数556長文456打 -
２カラムフレックスボックスのサンプルサイト
プレイ回数611英語長文630打 -
解説なし、個人練習用につくりました。
プレイ回数640英語長文1054打 -
個人練習用：サイトパーツ、ボトムアイコン
プレイ回数106英語長文1295打 -
簡単な解説付きでグラデーションをまとめ、個人練習用
プレイ回数482長文645打 -
自分練習用、英語長文：夢について
プレイ回数478英語長文542打
問題文
(<!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; }