個人練習用：サイトパーツ、アコーディオン
タグ個人練習用
個人練習用：サイトパーツ、アコーディオン
そのままhtmlとcssで貼り付けたらサイトパーツのアコーディオンになります。個人練習用で作りました。htmlのあとcssが始まります。解説なしです。ある程度勉強していないと理解できないです。
関連タイピング
-
解説付きでbox-shadowの基本をまとめています。
プレイ回数306 長文315打 -
個人練習用で作りました。解説なしです。
プレイ回数1327 英語長文1140打 -
個人練習用：サイトパーツ、ボトムアイコン
プレイ回数133 英語長文1295打 -
個人練習用：サイトパーツ、ハンバーガーメニュー
プレイ回数172 英語長文1067打 -
個人練習用のコードです
プレイ回数838 英語長文1787打 -
動きのあるメニューバーのサンプルHTML、CSS
プレイ回数142 英語長文2586打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数4370 英語長文673打 -
日本語訳なしの英語長文です。個人練習用につくりました。
プレイ回数575 英語長文717打
問題文
ふりがな非表示
ふりがな表示
(<!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; }