page Q&A

最終更新：2022/03/08

MGMのQ&Aページ

下線

MGMのQ&Aページで使っているのと同じやつ

フォームなどで使うチェックボックスを応用して作成しています。

チェックボックスにチェックが入ったら対応するlabelを開く、という仕組みです。

注意点

「input」のidと「label」のforが同じじゃないと動きません。また、一度使ったidは使用できません。
以下の項目は失敗例です。

失敗例1 idとforを別にした

動きません。

失敗例2-1 他とidが被っている

先にある方は動きますが、後の方は動きません。後の方をクリックすると前の方が動きます。

失敗例2-2 他とidが被っている

動きません

html

			<div class="cp_qa">
	<div class="cp_actab">
		<input id="faq01" type="checkbox" name="tabs" class="faqTgl_wrap">
		<label for="faq01">
	  <div class="cp_plus efont">Q.</div>
			フォームなどで使うチェックボックスを応用して作成しています。
		<div class="faqTgl"><span></span></div>
		</label>
	  <div class="cp_actab-content">
	  <div class="cp_plus efont">A.</div>チェックボックスにチェックが入ったら対応するlabelを開く、という仕組みです。</div>
	</div>
	<div class="cp_actab">
		<input id="faq02" type="checkbox" name="tabs" class="faqTgl_wrap">
		<label for="faq02">
		<div class="cp_plus efont">Q.</div>
			注意点
		<div class="faqTgl"><span></span></div>
		</label>
		<div class="cp_actab-content">
	  <div class="cp_plus efont">A.</div>「<strong>input</strong>」の<strong>id</strong>と「<strong>label</strong>」の<strong>for</strong>が同じじゃないと動きません。また、一度使ったidは使用できません。<br>以下の項目は失敗例です。</div>
	</div>
	<div class="cp_actab">
		<input id="faq03" type="checkbox" name="tabs" class="faqTgl_wrap">
		<label for="faq0a">
		<div class="cp_plus efont">Q.</div>
			失敗例1 idとforを別にした
		<div class="faqTgl"><span></span></div>
		</label>
		<div class="cp_actab-content">
	  <div class="cp_plus efont">A.</div>動きません。</div>
	</div>
	<div class="cp_actab">
		<input id="faq04" type="checkbox" name="tabs" class="faqTgl_wrap">
		<label for="faq04">
	  <div class="cp_plus efont">Q.</div>
			失敗例2-1 他とidが被っている
		<div class="faqTgl"><span></span></div>
		</label>
	  <div class="cp_actab-content">
	  <div class="cp_plus efont">A.</div>先にある方は動きますが、後の方は動きません。後の方をクリックすると前の方が動きます。</div>
	</div>
	<div class="cp_actab">
		<input id="faq04" type="checkbox" name="tabs" class="faqTgl_wrap">
		<label for="faq04">
		<div class="cp_plus efont">Q.</div>
			失敗例2-2 他とidが被っている
		<div class="faqTgl"><span></span></div>
		</label>
		<div class="cp_actab-content">
	  <div class="cp_plus efont">A.</div>動きません</div>
	</div>
</div>

フォームなどで使うチェックボックスを応用して作成しています。

</label>

<div class="cp_plus efont">A.</div>チェックボックスにチェックが入ったら対応するlabelを開く、という仕組みです。</div>

</div>

注意点

</label>

<div class="cp_plus efont">A.</div>「<strong>input</strong>」の<strong>id</strong>と「<strong>label</strong>」の<strong>for</strong>が同じじゃないと動きません。また、一度使ったidは使用できません。<br>以下の項目は失敗例です。</div>

</div>

失敗例1 idとforを別にした

</label>

<div class="cp_plus efont">A.</div>動きません。</div>

</div>

失敗例2-1 他とidが被っている

</label>

<div class="cp_plus efont">A.</div>先にある方は動きますが、後の方は動きません。後の方をクリックすると前の方が動きます。</div>

</div>

失敗例2-2 他とidが被っている

</label>

<div class="cp_plus efont">A.</div>動きません</div>

</div>

css

.cp_qa *, .cp_qa *:after, .cp_qa *:before {
  box-sizing: border-box;
}
.cp_qa {
  overflow-x: hidden;
  margin: 0 auto;
  background-color: #ebebec;
  padding: 1.2rem 1.2rem 0.2rem;
  margin-bottom: 5rem;
}
.cp_qa .cp_actab {
  padding: 0 0 1rem;
}
.cp_qa .cp_actab p {
  margin-bottom: 0;
}
.cp_qa label {
  font-size: 1.1rem;
  display: block;
  width: 100%;
  margin: 0;
  padding: 20px 50px 20px 50px;
  cursor: pointer;
  background-color: #fff;
  color: #000;
  position: relative;
}
.cp_qa .cp_actab-content {
  font-size: 1em;
  position: relative;
  overflow: hidden;
  height: 0;
  padding: 0 54px;
  transition: 0.4s ease;
  opacity: 0;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
  height: auto;
  padding: 24px 54px;
  opacity: 1;
  background-color: #fff;
}
.cp_qa .cp_plus {
  font-size: 1.9rem;
  line-height: 100%;
  position: absolute;
  z-index: 5;
  margin: 20px 0 0 15px;
  transition: .6s ease;
  color: #000;
  top: 0;
  left: 0;
}
.cp_qa .cp_actab input[type=checkbox] {
  display: none;
}
/* faqtgl */
.faqTgl {
  position: absolute;
  display: block;
  width: 50px;
  height: 66px;
  top: 0;
  right: 0;
}
.faqTgl span {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 30%;
  width: 40%;
  border-bottom: 1px solid #777;
  transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.faqTgl::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 32%;
  width: 40%;
  border-bottom: 1px solid #777;
  transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.faqTgl_wrap:checked + label .faqTgl span {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.faqTgl_wrap:checked + label .faqTgl::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.cp_qa *, .cp_qa *:after, .cp_qa *:before {

box-sizing: border-box;

}

.cp_qa {

overflow-x: hidden;

margin: 0 auto;

background-color: #ebebec;

padding: 1.2rem 1.2rem 0.2rem;

margin-bottom: 5rem;

}

.cp_qa .cp_actab {

padding: 0 0 1rem;

}

.cp_qa .cp_actab p {

margin-bottom: 0;

}

.cp_qa label {

font-size: 1.1rem;

display: block;

width: 100%;

margin: 0;

padding: 20px 50px 20px 50px;

cursor: pointer;

background-color: #fff;

color: #000;

position: relative;

}

.cp_qa .cp_actab-content {

font-size: 1em;

position: relative;

overflow: hidden;

height: 0;

padding: 0 54px;

transition: 0.4s ease;

opacity: 0;

}

.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {

height: auto;

padding: 24px 54px;

opacity: 1;

background-color: #fff;

}

.cp_qa .cp_plus {

font-size: 1.9rem;

line-height: 100%;

position: absolute;

z-index: 5;

margin: 20px 0 0 15px;

transition: .6s ease;

color: #000;

top: 0;

left: 0;

}

.cp_qa .cp_actab input[type=checkbox] {

display: none;

}

/* faqtgl */

.faqTgl {

position: absolute;

display: block;

width: 50px;

height: 66px;

top: 0;

right: 0;

}

.faqTgl span {

content: "";

position: absolute;

top: calc(50% - 1px);

left: 30%;

width: 40%;

border-bottom: 1px solid #777;

transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.faqTgl::after {

content: "";

position: absolute;

top: calc(50% - 1px);

left: 32%;

width: 40%;

border-bottom: 1px solid #777;

transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.faqTgl_wrap:checked + label .faqTgl span {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

.faqTgl_wrap:checked + label .faqTgl::after {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

下線

福家産業様（リブレットハウス）で作成しました。

福島県内であればどこでも建築をお願いできますか？

いわき市を拠点に施工しております。施工エリアを拠点から車で1時間以内にすることで、お困りの際にご連絡いただければすぐに駆け付けられるようにしています。1時間圏内であれば、市外、県外でも施工可能エリアとなっております。

詳しくは、お問い合わせください。

他の会社との違いは何ですか？

他社との大きな違いですが、家づくりだけでなく豊富な分譲地のご提供や運営するインテリアショップを通してのインテリアのご提案、家を建てた後の彩り豊かな生活のご提案を行っています。

創業から一貫して「想いを大切にする」家づくりを行なっており、一つ一つのご家族のそれぞれの「想い」を叶えるために、お客様に寄り添ったご提案をいたします。

また、設計だけでなく、現場管理、施工パートナーの教育、アフターメンテナンスまでプロフェッショナルとして責任を持って行っています。

これまでにどれくらいの建築実績がありますか？

約1000棟の新築住宅建築を施工しています。

html

		<div class="cp_lib_qa">
			<div class="cp_lib_actab">
				<input id="lib01" type="checkbox" name="tabs" class="libTgl_wrap">
				<label for="lib01">
					<div class="cp_lib_plus efont">Q.</div>
					福島県内であればどこでも建築をお願いできますか？
					<div class="libTgl"><span></span></div>
				</label>
				<div class="cp_lib_actab-content">
					<div class="cp_lib_plus efont">A.</div>
					<p class="mb-3">いわき市を拠点に施工しております。施工エリアを拠点から車で1時間以内にすることで、お困りの際にご連絡いただければすぐに駆け付けられるようにしています。1時間圏内であれば、市外、県外でも施工可能エリアとなっております。</p><p>詳しくは、<a href="https://libretto-house.jp/contact/">お問い合わせ</a>ください。</p></div>
			</div>
			<div class="cp_lib_actab">
				<input id="lib02" type="checkbox" name="tabs" class="libTgl_wrap">
				<label for="lib02">
					<div class="cp_lib_plus efont">Q.</div>
					他の会社との違いは何ですか？
					<div class="libTgl"><span></span></div>
				</label>
				<div class="cp_lib_actab-content">
					<div class="cp_lib_plus efont">A.</div>
				<p class="mb-3">他社との大きな違いですが、家づくりだけでなく豊富な分譲地のご提供や運営するインテリアショップを通してのインテリアのご提案、家を建てた後の彩り豊かな生活のご提案を行っています。</p>
				<p class="mb-3">創業から一貫して「想いを大切にする」家づくりを行なっており、一つ一つのご家族のそれぞれの「想い」を叶えるために、お客様に寄り添ったご提案をいたします。</p>
				<p>また、設計だけでなく、現場管理、施工パートナーの教育、アフターメンテナンスまでプロフェッショナルとして責任を持って行っています。</p></div>
			</div>
			<div class="cp_lib_actab">
				<input id="lib03" type="checkbox" name="tabs" class="libTgl_wrap">
				<label for="lib03">
					<div class="cp_lib_plus efont">Q.</div>
					これまでにどれくらいの建築実績がありますか？
					<div class="libTgl"><span></span></div>
				</label>
				<div class="cp_lib_actab-content">
					<div class="cp_lib_plus efont">A.</div>
					<p>約1000棟の新築住宅建築を施工しています。</p></div>
			</div>
		</div>

福島県内であればどこでも建築をお願いできますか？

</label>

<p class="mb-3">いわき市を拠点に施工しております。施工エリアを拠点から車で1時間以内にすることで、お困りの際にご連絡いただければすぐに駆け付けられるようにしています。1時間圏内であれば、市外、県外でも施工可能エリアとなっております。</p><p>詳しくは、<a href="https://libretto-house.jp/contact/">お問い合わせ</a>ください。</p></div>

</div>

他の会社との違いは何ですか？

</label>

<p class="mb-3">他社との大きな違いですが、家づくりだけでなく豊富な分譲地のご提供や運営するインテリアショップを通してのインテリアのご提案、家を建てた後の彩り豊かな生活のご提案を行っています。</p>

<p class="mb-3">創業から一貫して「想いを大切にする」家づくりを行なっており、一つ一つのご家族のそれぞれの「想い」を叶えるために、お客様に寄り添ったご提案をいたします。</p>

<p>また、設計だけでなく、現場管理、施工パートナーの教育、アフターメンテナンスまでプロフェッショナルとして責任を持って行っています。</p></div>

</div>

これまでにどれくらいの建築実績がありますか？

</label>

<p>約1000棟の新築住宅建築を施工しています。</p></div>

</div>

css

.cp_lib_qa *, .cp_lib_qa *:after, .cp_lib_qa *:before {
  box-sizing: border-box;
}
.cp_lib_qa {
  overflow-x: hidden;
  margin: 0 auto;
  margin-bottom: 1.5rem;
}
.cp_lib_qa .cp_lib_actab {
	border-bottom: 1px #eee solid;
}
.cp_lib_qa .cp_lib_actab p {
  margin-bottom: 0;
}
.cp_lib_qa label {
  font-size: 1.1rem;
  display: block;
  width: 100%;
  margin: 0;
  padding: 20px 50px 20px 50px;
  cursor: pointer;
  background-color: #fff;
  color: #000;
  position: relative;
	font-weight: bold;
}
.cp_lib_qa .cp_lib_actab-content {
  font-size: 1em;
  position: relative;
  overflow: hidden;
  height: 0;
  padding: 0 54px;
  transition: 0.4s ease;
  opacity: 0;
}
.cp_lib_qa .cp_lib_actab input[type=checkbox]:checked ~ .cp_lib_actab-content {
  height: auto;
  padding: 24px 54px;
  opacity: 1;
  background-color: #fff;
}
.cp_lib_qa .cp_lib_plus {
  font-size: 1.9rem;
  line-height: 100%;
  position: absolute;
  z-index: 5;
  margin: 20px 0 0 15px;
  transition: .6s ease;
  color: #000;
  top: 0;
  left: 0;
}
.cp_lib_qa .cp_lib_actab input[type=checkbox] {
  display: none;
}
/* libtgl */
.libTgl {
  position: absolute;
  display: block;
  width: 50px;
  height: 66px;
  top: 0;
  right: 0;
}
.libTgl span {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 30%;
  width: 40%;
  border-bottom: 1px solid #777;
  transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.libTgl::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 32%;
  width: 40%;
  border-bottom: 1px solid #777;
  transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.libTgl_wrap:checked + label .libTgl span {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.libTgl_wrap:checked + label .libTgl::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.cp_lib_qa *, .cp_lib_qa *:after, .cp_lib_qa *:before {

box-sizing: border-box;

}

.cp_lib_qa {

overflow-x: hidden;

margin: 0 auto;

margin-bottom: 1.5rem;

}

.cp_lib_qa .cp_lib_actab {

border-bottom: 1px #eee solid;

}

.cp_lib_qa .cp_lib_actab p {

margin-bottom: 0;

}

.cp_lib_qa label {

font-size: 1.1rem;

display: block;

width: 100%;

margin: 0;

padding: 20px 50px 20px 50px;

cursor: pointer;

background-color: #fff;

color: #000;

position: relative;

font-weight: bold;

}

.cp_lib_qa .cp_lib_actab-content {

font-size: 1em;

position: relative;

overflow: hidden;

height: 0;

padding: 0 54px;

transition: 0.4s ease;

opacity: 0;

}

.cp_lib_qa .cp_lib_actab input[type=checkbox]:checked ~ .cp_lib_actab-content {

height: auto;

padding: 24px 54px;

opacity: 1;

background-color: #fff;

}

.cp_lib_qa .cp_lib_plus {

font-size: 1.9rem;

line-height: 100%;

position: absolute;

z-index: 5;

margin: 20px 0 0 15px;

transition: .6s ease;

color: #000;

top: 0;

left: 0;

}

.cp_lib_qa .cp_lib_actab input[type=checkbox] {

display: none;

}

/* libtgl */

.libTgl {

position: absolute;

display: block;

width: 50px;

height: 66px;

top: 0;

right: 0;

}

.libTgl span {

content: "";

position: absolute;

top: calc(50% - 1px);

left: 30%;

width: 40%;

border-bottom: 1px solid #777;

transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.libTgl::after {

content: "";

position: absolute;

top: calc(50% - 1px);

left: 32%;

width: 40%;

border-bottom: 1px solid #777;

transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.libTgl_wrap:checked + label .libTgl span {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

.libTgl_wrap:checked + label .libTgl::after {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

振り分けページへ戻る

トップへ戻る