menu
menu

キーワード検索

12月のアクセストップ10

  1. ( 2↑) CSSだけでドロップダウンメニュー
  2. ( 1↓) スマホサイトの作成・基本編
  3. ( 3-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 7↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) jQueryでドロップダウンメニュー
  7. (10↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 6↓) スマホ・タブレット・PCの振り分けいろいろ
  9. ( 8↓) Windows 10にApache2.4 VC11をインストール
  10. ( -↑) jQueryで日時を表示【実践でjQuery入門】
  • facebook13
  • はてなブックマーク8
  • Google+5
  • Pocket0
  • Twitter1

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

  • Labs

CSS3

こんにちは(・∀・)

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

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;
}

2-1. ラジオボタンで要素の表示非表示サンプル

サンプルデモ

 サンプルデモはこちら!

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;
}

2-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;
}

関連リンク

 jQueryで要素の表示非表示

 JavaScriptで要素の表示非表示

  • カテゴリー:Labs
  • facebook13
  • はてなブックマーク8
  • Google+5
  • Pocket0
  • Twitter1