実現したいこと
・レスポンシブ時にcontents_chapter_title pのテキストが１〜２行の場合：ウィンドウサイズ820px以上の時はcontents_chapterのheightは110px、ウィンドウサイズ820px以下の時はcontents_chapterのheightは70pxにする
・レスポンシブ時にcontents_chapter_title pのテキストが3行以上折り返す場合：contents_chapterのheightをautoにする、.contents_chapter_title pの上下のmargin15pxを保持したままcontents_chapterのheightが可変するようにする
前提
上記が実現可能であれば追加・修正コードを教えていただけると助かります。
「持続可能なライフスタイルについて」（contents_title）をクリックするとアコーディオンメニューが開き、その中にさらにアコーディオンメニューが入っているという2重構造になっております。
JavaScriptを使用し、アコーディオンメニューをクリックして展開する時、中身の要素のheightに合わせて外側のメニューボタンの高さも可変するよう設定しています。
また、展開している状態で再度クリックしてアコーディオンメニューを閉じると、autoから元の高さ（110px / 70px）に戻ります。
発生している問題・エラーメッセージ
・レスポンシブ時にcontents_chapter_title pのテキストが3行以上折り返す場合、contents_chapter_title pからはみ出してしまい、.contents_chapter_title pの上下のmargin15pxの部分にまで侵入してきてしまう、4行以降はcontents_chapterのheightも超えてしまう
該当のソースコード
html
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <style>7 .button-container {8 display: flex;9 flex-direction: column;10 align-items: center;11 }12 13 .button {14 width: 70%;15 max-width: 400px;16 word-wrap: break-word;17 text-align: center;18 padding: 15px;19 margin-bottom: 20px;20 border: 1px solid #ccc;21 line-height: 1.5;22 overflow: hidden;23 }24 25 .button:nth-child(1) {26 white-space: nowrap;27 }28 29 .button:nth-child(2) {30 line-height: 1.5;31 }32 33 .button:nth-child(3) {34 line-height: 1.2;35 }36 </style>37 <title>Resizable Buttons</title>38</head>39<body>40 <div class="button-container">41 <button class="button">42 長い文章がここに入ります。長い文章がここに入ります。 <!-- 1行のテキスト -->43 </button>44 <button class="button">45 別の文章がここに入ります。別の文章がここに入ります。別の文章がここに入ります。別の文章がここに入ります。 <!-- 2行のテキスト -->46 </button>47 <button class="button">48 さらに別の文章がここに入ります。さらに別の文章がここに入ります。さらに別の文章がここに入ります。さらに別の文章がここに入ります。 <!-- 3行のテキスト -->49 </button>50 </div>51</body>52</html>
css
1@charset "utf-8";2 3html {4 visibility: hidden;5}6 7html.wf-active {8 visibility: visible;9}10 11.background_image {12 padding:5%;13 }14 15.background_image::before {16 content: "";17 display: block;18 position: fixed;19 top: 0;20 left: 0;21 z-index: -1;22 width: 100%;23 height: 100vh;24 background-position: 50% 100%;25 background-image:url('images/bg.svg');26 opacity: 127}28 29.container {30 margin: 100px auto;31 height: auto;32 width: 1200px;/*62.5%*/33}34 35.container ul {36 list-style: none;37 padding-left: 0;38}39 40.container_contents_list {41 margin-bottom: 30px;42}43 44.contents {45 width: 100%;46 height: 120px;47 background: #fff;48 border: 3px solid #F5DCA5;49 border-radius: 20px;50 box-shadow: 0px 5px 0px #F5DCA5;51}52 53.contents_title {54 height: 50px;55 padding: 35px 0;56 display: flex;57 cursor: pointer;58}59 60.title_text {61 margin: auto 40px;62 width: 100%;63 height: 100%;64 line-height: 100%;65 font-size: 100%;66 font-weight: 700;67}68 69.open_button {70 width: 20px;71 height: 20px;72 margin: auto 30px auto 0;73}74 75/****** 第2階層 ******/76 77.contents_chapter_container {78 display: none;79 margin: 0 125px 20px 125px;80 height: auto;81}82 83.contents_chapter_container.active {84 display: block; 85}86 87.contents_chapter {88 width: 100%;/*950px*/89 height: 110px;/*110px*//**/90 border-radius: 20px;91 margin-bottom: 30px;92 background-color: #E1EBA0;93}94 95.contents_chapter_title {96 height: 110px;/*110px*//**/97 display: flex;98 cursor: pointer;99}100 101.contents_chapter_title p {102 margin: 15px;/**/103 width: 100%;104 height: auto;105 line-height: 38px;/*23px*/106 text-align: left;107 display: flex;108 flex-direction: column;109 justify-content: center;110 color: #1E1E1E;111 font-size: 1.4em;/*23px*/112 /*font-weight: 600; 113 font-family: "Rounded M+ 1c", sans-serif;*/114 /*font-family: "M PLUS Rounded 1c", sans-serif;*/115 font-family: "m-plus-rounded-1c", sans-serif;116 font-weight: 700;117 font-style: normal;118}119 120.contents_chapter_caption {121 display: none;122 height: 100%;123 margin: 0 5px;/**/124 padding: 32px 0;125 background-color: #fff;126 border-radius: 0 0 18px 18px;127}128 129.contents_chapter_caption p {130 height: 100%;131 margin: 0 35px;132 color: #323232;133 font-size: 1.3em;/*20px*/134 font-family: "m-plus-rounded-1c", sans-serif;135 font-weight: 400;136 font-style: normal;137 line-height: 38px;138}139 140.contents_chapter_caption img {141 width: 70%;142 margin: auto;143 display: block;144}145 146.open_button_chapter {147 width: 20px;148 height: 20px;149 margin: auto 30px auto 0;150}151 152/*----------ウィンドウサイズが1350ピクセル以下の場合----------*/153 154@media screen and (max-width : 1350px) {155 .container {156 width: 100%;/*1200px;*/157 }158}159 160/*----------ウィンドウサイズが1000ピクセル以下の場合----------*/161 162@media screen and (max-width : 1000px) {163 .contents_chapter_container {164 margin: 0 40px 20px 65px;/*0 125px 20px 125px;*/165 }166}167 168/*----------ウィンドウサイズが820ピクセル以下の場合----------*/169 170@media screen and (max-width : 820px) { 171 .container {172 margin: 50px auto;173 }174 175 .container_contents_list {176 margin-bottom: 20px;/*30px*/177 }178 179 .contents {180 height: 60px;/*120;*/181 border-radius: 10px;182 box-shadow: 0px 3px 0px #F5DCA5;183 }184 185 .contents_title {186 height: 30px;/*50px;*/187 padding: 15px 0;/*40px 0;*/188 }189 190 .title_text {191 margin: auto 20px;/*auto 40px;*/192 line-height: 0;193 }194 195 .open_button {196 width: 15px;/*20px;*/197 height: 15px;/*20px;*/198 margin: auto 20px auto 0;/*auto 30px auto 0;*/199 }200 201 /****** 第2階層 ******/202 .contents_chapter_container {203 margin: 0 10px 20px 22px;/*0 40px 20px 65px;/*0 125px 20px 125px;*/204 }205 206 .contents_chapter {207 height: 70px;/*110px**//**/208 border-radius: 10px;/*20px;*/209 margin-bottom: 20px;/*30px;*/210 }211 212 .contents_chapter_title {213 height: 70px;/*110px*//**/214 }215 216 .contents_chapter_title p {217 margin: 10px;/*15px;*//**/218 line-height: 24px;/*38px*/219 font-size: 0.8em;/*13px*//*1.4em;*//*23px*/220 }221 222 .contents_chapter_caption {223 padding: 12px 0;/*22px 0;*//*32px 0;*/224 border-radius: 0 0 8px 8px ;/*0 0 18px 18px ;*/225 }226 227 .contents_chapter_caption p {228 margin: 0 15px;/*0 25px;*//*0 35px;*/229 font-size: 0.8em;/*12px*//*1.3em;*//*20px;*/230 line-height: 28px;/*38px;*/231 }232 233 .open_button_chapter {234 width: 15px;/*20px;*/235 height: 15px;/*20px;*/236 margin: auto 15px auto 0;/*auto 30px auto 0;*/237 }238 239}
試したこと
・contents_chapterのheightをautoにし、contents_chapter_title pのテキストの量によって.contents_chapter_title pの上下のmargin15pxを保持したままcontents_chapterのheightを可変させることはできたが、レスポンシブ時にcontents_chapter_title pのテキストが１〜２行の場合でも作用されてしまうため断念
補足情報（FW/ツールのバージョンなど）
画像部分は見えていないと思いますが、実際は＋ボタン（icon_plus.svg）と-ボタン（icon_minus.svg）がクリックで切り替わるよう設置しております。
0 コメント