質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1201閲覧

アコーディオン内にdiv要素を格納し、2カラムで表示したい(初心者)

UUTUM

総合スコア9

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/24 02:26

編集2020/03/31 23:45

htmlとcssのみで実装できるアコーディオンをサイトに作ろうと考えております。
画像と文字をアコーディオン内に納めるまではうまくいったのですが、レイアウト*を調節しようと
divタグを入れた所、div要素のみがアコーディオンの開閉と関係なく外に出たままの状態になってしまいました。

問題:1
この原因を知りたいです。なぜ、divがアコーディオンの外に出てしまうのか?
アコーディオンの外に出ないようにする方法はありますでしょうか?

問題:2
レイアウト調節をする為にdivタグを使用しようと考えております。
画像を左、テキストを右といったような配置です。
こういうレイアウトはdiv以外を使用した場合でも可能なのでしょうか?

※現在サイトは全て、bootstrapで制作しておりcol-md-6などを使用して
簡単にカラムを分けられると理想的です。

以下、現在制作しているアコーディオンのhtmlとcssになります。

※codepen上では画像は外に飛び出してしまいますが、wordpress上では
きちんとアコーディオン内に格納されています。
この原因もご存知であればお教えいただきたいです。

お手数ですが、ご確認の上、ご回答いただけましたら幸いです。
何卒よろしくお願い致します。

HTML

1<!----------------------------------------------------------------------> 2 3<div class="container"> 4<div class="row hello_box"> 5<ul> 6<li> 7<input type="checkbox" checked> 8<i></i> 9<h2 class="accordion">Q:質問1(問題:テキストと画像の2カラムで 10 表示したいです。)</h2> 11<p class="accordion"> 12テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 13</p> 14<img class="pc accordion" src="/images/test_pc-01.jpg" width="300px" height="300px" alt="パソコン用の画像"/> 15 <img class="sp accordion" src="/images/track_sp.svg" alt="スマートフォン用の画像"/> 16</li> 17 18<li> 19<input type="checkbox" checked> 20<i></i> 21<h2 class="accordion">Q:質問2(テキストは上で下に画像を3点1カラムで表示したいです。)</h2> 22<p class="accordion">テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 </p><img class="pc accordion" src="/images/test_pc-01.jpg" width="300px" height="300px" alt="パソコン用の画像"/><img class="sp accordion" src="/images/track_sp.svg" alt="スマートフォン用の画像"/> 23</li> 24<li> 25<input type="checkbox" checked> 26<i></i> 27<h2 class="accordion">質問3</h2> 28<p class="accordion">テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 </p> 29<img src="/images/idea-100.jpg" class="accordion" alt="" class="aligncenter" 30width="300" height="300" border="0" /> 31</li> 32 33</div> 34</div>

css

1/*=============================================== 2 *  アコーディオン 3*==============================================*/ 4 5.transition, p, ul li i:before, ul li i:after { 6 -webkit-transition: all 0.25s ease-in-out; 7 transition: all 0.25s ease-in-out; 8} 9 10.flipIn, h1, ul li { 11 -webkit-animation: flipdown 0.5s ease both; 12 animation: flipdown 0.5s ease both; 13} 14 15.no-select, h2 { 16 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 17 -webkit-touch-callout: none; 18 -webkit-user-select: none; 19 -moz-user-select: none; 20 -ms-user-select: none; 21 user-select: none; 22} 23 24 25h2.accordion{ 26 /*文字の大きさ*/ 27font-size: 16px; 28/*行間の幅*/ 29 line-height: 34px; 30/*文字の太さ*/ 31font-weight: 300; 32/*文字の間隔の調節*/ 33 letter-spacing: 1px; 34/*ーーー*/ 35 display: block; 36/*要素外の幅*/ 37 margin-right:50px; 38/*変更ー元の数値は0*/ 39 padding:0px 0px 0px 0px; 40/*カーソルをポインターに変更*/ 41 cursor: pointer; 42} 43/*h2にmarginを追加してもなぜか反映されない*/ 44 45p.accordion{ 46 color: rgba(48, 69, 92, 0.8); 47 font-size: 14px; 48 line-height: 26px; 49 letter-spacing: 1px; 50 position: relative; 51 overflow: hidden; 52/*追加-下の要素が飛び出るので 元は800px*/ 53 max-height: 1000px; 54 opacity: 1; 55 -webkit-transform: translate(0, 0); 56 -ms-transform: translate(0, 0); 57 transform: translate(0, 0); 58/*変更ーpadding:30px 50px;*/ 59padding:0px 30px 50px 0px; 60/*要素外の幅*/ 61margin-right:50px; 62z-index: 2; 63/*右側に要素を配置*/ 64float:right; 65} 66 67/*変更:margin-top: 14px;*/ 68img src.accordion{ 69margin-top: 0px; 70padding:0 0 50px 50px; 71float:left; 72} 73/*変更:margin-top: 14px;*/ 74img src.accordion_noimage{ 75margin-top: 0px; 76padding:30px 50px; 77} 78 79ul { 80 list-style: none; 81 -webkit-perspective: 900; 82 perspective: 900; 83 padding: 0; 84 margin: 0; 85} 86 87ul li { 88 position: relative; 89 padding: 0; 90 margin: 0; 91 /*変更: padding-bottom: 4px;*/ 92 padding-bottom: 0px; 93 /*変更:padding-top: 18px;*/ 94 padding-top: 0px; 95 /*ボーダーの色→border-top: 1px dotted #dce7eb;*/ 96 border-top: 1px dotted #555555; 97} 98 99ul li:nth-of-type(1) { 100 -webkit-animation-delay: 0.5s; 101 animation-delay: 0.5s; 102} 103 104ul li:nth-of-type(2) { 105 -webkit-animation-delay: 0.75s; 106 animation-delay: 0.75s; 107} 108 109ul li:nth-of-type(3) { 110 -webkit-animation-delay: 1.0s; 111 animation-delay: 1.0s; 112} 113 114ul li:last-of-type { 115 padding-bottom: 0; 116} 117 118 119 120/*<<<アコーディオンのアロー>>>*/ 121ul li i { 122 position: absolute; 123 -webkit-transform: translate(-6px, 0); 124 -ms-transform: translate(-6px, 0); 125 transform: translate(-6px, 0); 126 margin-top: 30px; 127 /*右からのオブジェクトの位置を決める*/ 128 right: 30px; 129} 130 131ul li i:before, ul li i:after { 132 content: ""; 133 position: absolute; 134 background-color: #ff6873; 135 width: 3px; 136 height: 9px; 137} 138 139ul li i:before { 140 -webkit-transform: translate(-2px, 0) rotate(45deg); 141 -ms-transform: translate(-2px, 0) rotate(45deg); 142 transform: translate(-2px, 0) rotate(45deg); 143} 144 145ul li i:after { 146 -webkit-transform: translate(2px, 0) rotate(-45deg); 147 -ms-transform: translate(2px, 0) rotate(-45deg); 148 transform: translate(2px, 0) rotate(-45deg); 149} 150 151ul li input[type=checkbox] { 152 position: absolute; 153 cursor: pointer; 154 width: 100%; 155 height: 100%; 156 z-index: 1; 157 opacity: 0; 158} 159 160ul li input[type=checkbox]:checked ~ p { 161 margin-top: 0; 162 max-height: 0; 163 opacity: 0; 164 -webkit-transform: translate(0, 50%); 165 -ms-transform: translate(0, 50%); 166 transform: translate(0, 50%); 167} 168 169ul li input[type=checkbox]:checked ~ i:before { 170 -webkit-transform: translate(2px, 0) rotate(45deg); 171 -ms-transform: translate(2px, 0) rotate(45deg); 172 transform: translate(2px, 0) rotate(45deg); 173} 174 175ul li input[type=checkbox]:checked ~ i:after { 176 -webkit-transform: translate(-2px, 0) rotate(-45deg); 177 -ms-transform: translate(-2px, 0) rotate(-45deg); 178 transform: translate(-2px, 0) rotate(-45deg); 179} 180 181@-webkit-keyframes flipdown { 182 0% { 183 opacity: 0; 184 -webkit-transform-origin: top center; 185 transform-origin: top center; 186 -webkit-transform: rotateX(-90deg); 187 transform: rotateX(-90deg); 188 } 189 5% { 190 opacity: 1; 191 } 192 80% { 193 -webkit-transform: rotateX(8deg); 194 transform: rotateX(8deg); 195 } 196 83% { 197 -webkit-transform: rotateX(6deg); 198 transform: rotateX(6deg); 199 } 200 92% { 201 -webkit-transform: rotateX(-3deg); 202 transform: rotateX(-3deg); 203 } 204 100% { 205 -webkit-transform-origin: top center; 206 transform-origin: top center; 207 -webkit-transform: rotateX(0deg); 208 transform: rotateX(0deg); 209 } 210} 211 212@keyframes flipdown { 213 0% { 214 opacity: 0; 215 -webkit-transform-origin: top center; 216 transform-origin: top center; 217 -webkit-transform: rotateX(-90deg); 218 transform: rotateX(-90deg); 219 } 220 5% { 221 opacity: 1; 222 } 223 80% { 224 -webkit-transform: rotateX(8deg); 225 transform: rotateX(8deg); 226 } 227 83% { 228 -webkit-transform: rotateX(6deg); 229 transform: rotateX(6deg); 230 } 231 92% { 232 -webkit-transform: rotateX(-3deg); 233 transform: rotateX(-3deg); 234 } 235 100% { 236 -webkit-transform-origin: top center; 237 transform-origin: top center; 238 -webkit-transform: rotateX(0deg); 239 transform: rotateX(0deg); 240 } 241}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

問題:1
この原因を知りたいです。なぜ、divがアコーディオンの外に出てしまうのか?
アコーディオンの外に出ないようにする方法はありますでしょうか?

CSS側の記述として以下の記述しか見つけられませんでした。
<p>に対してだけしかCSSの指定をしていないので、当然<div>に対しては何も起こりません。

CSS

1ul li input[type=checkbox]:checked ~ p { 2 /* 省略 */ 3}

divに対して何らか (アコーディオンの外に出ない、など) のCSSを指定したいのであれば
以下のような記述を追加してください。

CSS

1ul li input[type=checkbox]:checked ~ div { 2 3}

問題:2
レイアウト調節をする為にdivタグを使用しようと考えております。
画像を左、テキストを右といったような配置です。
こういうレイアウトはdiv以外を使用した場合でも可能なのでしょうか?

(正しいかどうかはともかく) div以外の要素でも可能です。
が、HTML側としてはdivで問題ないと思います。divを使っていることに問題があるわけではなく、CSS側の記述に問題があると考えます。

投稿2020/03/24 03:02

編集2020/03/24 03:20
new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

UUTUM

2020/03/24 04:47

new1roさま とてもわかりやすく解説して頂き本当にありがとうございます! いま試した所、あっさりとdivがアコーディオンに内包されました。 ずっと悩んで何度も同じことを一人で繰り返していたので鳥肌がたちました! 本当にありがとうございました。 また、わからないことがあった際ご協力いただけましたら幸いです! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問