スマホ表示の際に<iframe>要素を表示させる
iframeを用いたレスポンシブ対応の応用
Webページを作成中、レスポンシブ対応だけでなく、スマホで表示したときにデザインを変えようと思い、
CSSで
@media and screen(width:468px){.....}
といった感じに書いていたところ、スマホでページの一部をまるっきり変えたいなと考えました。
発生している問題
スマホでページを見たときに、
該当箇所は、メイン画像の下のボタンがアコーディオンになっている形で、
スマホではメイン画像のみを表示させ、メイン画像にアコーディオンのボタンの役割を付与させたいと考えております。
例）
<!-- HTML -->
<!-- アコーディオン -->
<div class="sub_title">
<img class="sub_img" src="メイン画像">
<section class="accordion">
<div class="accordion__container">
<p class="accordion__title js-accordion-title more">▼ さらに詳しく見る ▼</p>
<div class="accordion__content accordion_img">
<img class="accordion_img_01" src="サブ画像1">
<img class="accordion_img_02" src="サブ画像1">
<img class="accordion_img_03" src="サブ画像1">
</div>
</div>
</section>
</div>
<!-- ▼ CSS ▼ -->
<style>
.sub_title {
width: 80%;
height: auto;
text-align: center;
background-color: #fff;
margin-bottom: 60px;
margin-left: 10%;
}
@media only screen and (max-width:468px) {
.sub_title { width: 80%; }
.sub_title { text-align: center; }
.sub_title { margin: 0 10% 0 10%; }
}
.sub_img {
width: 80%;
padding: 20px;
}
@media only screen and (max-width:468px) {
.sub_gift { width: 90%;}
.sub_gift { padding: 10px 5px 0 5px;}
.accordion_img_01 { width: 100%;}
.accordion_img_02 { width: 100%;}
.accordion_img_03 { width: 100%;}
.accordion_img_01 { margin: 15px 0 0 0;}
.accordion_img_02 { margin: 5px 0 0 0;}
.accordion_img_03 { margin: 5px 0 15px 0;}
.accordion_img_01 { float: left;}
.accordion_img_02 { float: left;}
}
.accordion_img {
width: 100%;
}
.accordion_img_01 {
width: 80%;
margin: 40px 0 0 0;
}
.accordion_img_02 {
width: 80%;
margin: 25px 0 0 0;
}
.accordion_img_03 {
width: 80%;
margin: 25px 0 25px 0;
}
/* アコーディオン */
* {
margin: 0;
padding: 0;
}
.accordion {
margin-top: 10px;
}
.accordion__container {
width: 70%;
margin: 0 auto;
}
@media only screen and (max-width: 468px) {
.accordion__container {
width: 100%;
}
.accordion__container2 {
width: 100%;
margin: 0 auto;
}
}
.accordion__title {
background-color: rgba(0, 0, 0, 0);
/* border: 1px solid transparent; */
color: #fff;
font-size: 20px;
padding: 0.625em 0.625em 0.625em 2em;
position: relative;
cursor: pointer;
user-select: none;
}
@media only screen and (max-width: 468px) {
.accordion__title{ font-size: 10px;}
}
.accordion__title::after {
transform: rotate(90deg);
transition-duration: 0.3s;
}
.accordion__title:hover,
.accordion__title:active,
.accordion__title.is-active {
opacity: 0.6;
}
.accordion__title.is-active::before {
opacity: 0;
}
.accordion__title.is-active::after {
transform: rotate(0);
}
.accordion__content {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding: 0 1.5em;
line-height: 0;
height: 0;
overflow: hidden;
opacity: 0;
transition-duration: 0.3s;
}
.accordion__content.is-open {
border: 1px solid rgba(0, 0, 0, 0);
padding: 0.625em 1.5em;
line-height: normal;
/* numberに書き換える*/
height: auto;
opacity: 1;
}
@media only screen and (max-width: 468px) {
.accordion__title {
padding: 0;
}
.accordion__content {
padding: 0;
}
.accordion__content.is-open {
padding: 0;
}
}
/* ボタンのアクション */
.more {
background-color: #f19783;
}
.more:hover {
opacity: 0.6;
}
@media only screen and (max-width: 468px) {
.more:hover { cursor: pointer;}
.more:active { position: relative;} /* imgを少し下げ、押した感じを出す */
.more:active { top: 3px;} /* 3px下に配置する */
}
</style>
0