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

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

ただいまの
回答率

88.63%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 602

UUTUM

score 5

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

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

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

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

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

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

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

<!---------------------------------------------------------------------->

<div class="container">
<div class="row hello_box">
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2 class="accordion">Q:質問1(問題:テキストと画像の2カラムで
  表示したいです。)</h2>
<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="スマートフォン用の画像"/>
</li>

<li>
<input type="checkbox" checked>
<i></i>
<h2 class="accordion">Q:質問2(テキストは上で下に画像を3点1カラムで表示したいです。)</h2>
<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="スマートフォン用の画像"/>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2 class="accordion">質問3</h2>
<p class="accordion">テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 </p>
<img src="/images/idea-100.jpg" class="accordion" alt="" class="aligncenter"
width="300" height="300" border="0" />
</li>

</div>
</div>
/*===============================================
 *  アコーディオン
*==============================================*/

.transition, p, ul li i:before, ul li i:after {
  -webkit-transition: all 0.25s ease-in-out;
          transition: all 0.25s ease-in-out;
}

.flipIn, h1, ul li {
  -webkit-animation: flipdown 0.5s ease both;
          animation: flipdown 0.5s ease both;
}

.no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


h2.accordion{
 /*文字の大きさ*/     
font-size: 16px;
/*行間の幅*/     
 line-height: 34px;
/*文字の太さ*/ 
font-weight: 300;
/*文字の間隔の調節*/
  letter-spacing: 1px;
/*ーーー*/
  display: block;
/*要素外の幅*/
  margin-right:50px;
/*変更ー元の数値は0*/
  padding:0px 0px 0px 0px;
/*カーソルをポインターに変更*/
  cursor: pointer;
}
/*h2にmarginを追加してもなぜか反映されない*/

p.accordion{
  color: rgba(48, 69, 92, 0.8);
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
/*追加-下の要素が飛び出るので 元は800px*/
  max-height: 1000px;
  opacity: 1;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
/*変更ーpadding:30px 50px;*/
padding:0px 30px 50px 0px;
/*要素外の幅*/
margin-right:50px;
z-index: 2;
/*右側に要素を配置*/
float:right;
}

/*変更:margin-top: 14px;*/
img src.accordion{
margin-top: 0px;
padding:0 0 50px 50px;
float:left;
}
/*変更:margin-top: 14px;*/
img src.accordion_noimage{
margin-top: 0px;
padding:30px 50px;
}

ul {
  list-style: none;
  -webkit-perspective: 900;
          perspective: 900;
  padding: 0;
  margin: 0;
}

ul li {
  position: relative;
  padding: 0;
  margin: 0;
    /*変更: padding-bottom: 4px;*/
  padding-bottom: 0px;
    /*変更:padding-top: 18px;*/
  padding-top: 0px;
    /*ボーダーの色→border-top: 1px dotted #dce7eb;*/
  border-top: 1px dotted #555555;
}

ul li:nth-of-type(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

ul li:nth-of-type(2) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}

ul li:nth-of-type(3) {
  -webkit-animation-delay: 1.0s;
          animation-delay: 1.0s;
}

ul li:last-of-type {
  padding-bottom: 0;
}



/*<<<アコーディオンのアロー>>>*/
ul li i {
  position: absolute;
  -webkit-transform: translate(-6px, 0);
      -ms-transform: translate(-6px, 0);
          transform: translate(-6px, 0);
  margin-top: 30px;
    /*右からのオブジェクトの位置を決める*/
  right: 30px;
}

ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #ff6873;
  width: 3px;
  height: 9px;
}

ul li i:before {
  -webkit-transform: translate(-2px, 0) rotate(45deg);
      -ms-transform: translate(-2px, 0) rotate(45deg);
          transform: translate(-2px, 0) rotate(45deg);
}

ul li i:after {
  -webkit-transform: translate(2px, 0) rotate(-45deg);
      -ms-transform: translate(2px, 0) rotate(-45deg);
          transform: translate(2px, 0) rotate(-45deg);
}

ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transform: translate(0, 50%);
      -ms-transform: translate(0, 50%);
          transform: translate(0, 50%);
}

ul li input[type=checkbox]:checked ~ i:before {
  -webkit-transform: translate(2px, 0) rotate(45deg);
      -ms-transform: translate(2px, 0) rotate(45deg);
          transform: translate(2px, 0) rotate(45deg);
}

ul li input[type=checkbox]:checked ~ i:after {
  -webkit-transform: translate(-2px, 0) rotate(-45deg);
      -ms-transform: translate(-2px, 0) rotate(-45deg);
          transform: translate(-2px, 0) rotate(-45deg);
}

@-webkit-keyframes flipdown {
  0% {
    opacity: 0;
    -webkit-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    -webkit-transform: rotateX(8deg);
            transform: rotateX(8deg);
  }
  83% {
    -webkit-transform: rotateX(6deg);
            transform: rotateX(6deg);
  }
  92% {
    -webkit-transform: rotateX(-3deg);
            transform: rotateX(-3deg);
  }
  100% {
    -webkit-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

@keyframes flipdown {
  0% {
    opacity: 0;
    -webkit-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    -webkit-transform: rotateX(8deg);
            transform: rotateX(8deg);
  }
  83% {
    -webkit-transform: rotateX(6deg);
            transform: rotateX(6deg);
  }
  92% {
    -webkit-transform: rotateX(-3deg);
            transform: rotateX(-3deg);
  }
  100% {
    -webkit-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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


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

ul li input[type=checkbox]:checked ~ div {

}

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/24 13:47

    new1roさま

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

    キャンセル

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

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る