【Labs】CSSだけでブロック要素の表示非表示 - web design lab
home > labs > 【Labs】CSSだけでブロック要素の表示非表示

9月更新・前月(8月)の人気記事トップ10 09/02/2024

  1. ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
  2. ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
  3. ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
  4. ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  5. (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
  6. ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
  7. ( 09 ↑) 【Mac】Safariでソースコードを見る方法
  8. ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
  9. ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
  10. (圏外↑) 【GIMP】レイヤーをロック
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村
【Labs】CSSだけでドロップダウンメニュー 【Labs】アクセス解析 w3Analyzer

【Labs】CSSだけでブロック要素の表示非表示


【Labs】CSSだけでブロック要素の表示非表示

こんにちは（・∀・）

CSSだけで作ってみましたシリーズです。今回はCSSだけでブロック要素の表示非表示です。

Contents

  1. チェックボックスで要素の表示非表示(トグルボタン)
  2. ラジオボタンで要素の表示非表示
  3. ラジオボタンで要素の表示非表示2
1. チェックボックスで要素の表示非表示(トグルボタン)
HTML

<div class="container">
<div class="top">
<p>listen,<br>
overlook,<br>
voice,<br>
effort.</p>
</div>
<label for="btn">≫</label>
<input id="btn" type="checkbox">
<div class="btm">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
</div>
<br>
<div class="top">
<p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p>
</div>
<label for="btn2" class="btn2">≫</label>
<input id="btn2" type="checkbox">
<div class="btm">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
</div>
<!--container--></div>
CSS

.container {
  margin: 0 auto;
  text-align: left;
}
.container input {
  display: none;
}
.container label {
  color: #4776AF;
  cursor: pointer;
  padding: 0 10px;
}
.container label:hover {
  color: #ccc;
}
.container .top {
  padding: 10px;
  background: #fff;
}
.container .btm {
  transition: 0.2s;
  height: 0;
  overflow: hidden;
  padding: 0 10px;
}
.container .btn {
  text-align: left;
  display: block;
  width: 80px;
  margin: 0;
}
.container .btn2 {
  text-align: center;
  display: block;
  width: 80px;
  margin: 0 auto;
}
.container input:checked + .btm {
  height: auto;
  padding: 0 10px 10px 10px;
  background: #fff;
}
Result

サンプルデモ

2. ラジオボタンで要素の表示非表示
HTML

<div class="container">
<div class="top">
<p><p>listen,<br>
overlook,<br>
voice,<br>
effort.</p></p>
</div>
<label for="topbtn" class="topbtn">More ≫</label>
<input id="topbtn" type="radio" name="oo">
<div class="btm">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
<label for="btmbtn" class="btmbtn">≪ Close</label>
<input id="btmbtn" type="radio" name="oo">
</div>
<br>
<div class="top">
<p><p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p></p>
</div>
<label for="topbtn2" class="topbtn2">More ≫</label>
<input id="topbtn2" type="radio" name="oo2">
<div class="btm">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
<label for="btmbtn2" class="btmbtn2">≪ Close</label>
<input id="btmbtn2" type="radio" name="oo2">
</div>
<!--container--></div>
CSS

.container {
  margin: 0 auto;
  text-align: left;
}
.container input {
  display: none;
}
.container label {
  color: #4776AF;
  cursor: pointer;
  padding: 0 10px;
}
.container label:hover {
  color: #ccc;
}
.container .top {
  padding: 10px;
  background: #fff;
}
.container .btm {
  transition: 0.2s;
  height: 0;
  overflow: hidden;
  padding: 0 10px;
}
.container .topbtn,
.container .btmbtn {
  text-align: left;
  display: block;
  width: 80px;
  margin: 0;
}
.container .topbtn2,
.container .btmbtn2 {
  text-align: center;
  display: block;
  width: 80px;
  margin: 0 auto;
}
.container input:checked + .btm {
  height: auto;
  padding: 0 10px 10px 10px;
  background: #fff;
}
Result

サンプルデモ

3. ラジオボタンで要素の表示非表示2
HTML

<div class="container">
<div class="top">
<p>listen,<br>
overlook,<br>
voice,<br>
effort.</p>
</div>
<label for="topbtn" class="topbtn">More ≫</label>
<input id="topbtn" type="radio" name="oo">
<div class="btm">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
<label for="btmbtn" class="btmbtn">≪ Close</label>
<input id="btmbtn" type="radio" name="oo">
</div>
<br>
<div class="top">
<p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p>
</div>
<label for="topbtn2" class="topbtn2">More ≫</label>
<input id="topbtn2" type="radio" name="oo2">
<div class="btm">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
<label for="btmbtn2" class="btmbtn2">≪ Close</label>
<input id="btmbtn2" type="radio" name="oo2">
</div>
<!--container--></div>
CSS

.container {
  margin: 0 auto;
  text-align: left;
}
.container input {
  display: none;
}
.container label {
  color: #4776AF;
  cursor: pointer;
  padding: 0 10px;
}
.container label:hover {
  color: #ccc;
}
.container .top {
  padding: 10px;
  background: #fff;
}
.container .btm {
  height: 0;
  overflow: hidden;
  padding: 0 10px;
}
.container .topbtn,
.container .btmbtn {
  text-align: left;
  display: block;
  width: 80px;
  margin: 0;
}
.container .topbtn2,
.container .btmbtn2 {
  text-align: center;
  display: block;
  width: 80px;
  margin: 0 auto;
}
.container input:checked + .btm {
  margin-top: -36px;
  height: auto;
  padding: 0 10px 10px 10px;
  background: #fff;
  position: relative;
  z-index: 2;
}
Result

サンプルデモ

関連リンク

【Labs】jQueryで要素の表示非表示
【Labs】JavaScriptで要素の表示非表示

【Labs】CSSだけでドロップダウンメニュー 【Labs】アクセス解析 w3Analyzer
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村