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

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

新規登録して質問してみよう
ただいま回答率
85.53%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

2回答

231閲覧

レスポンシブ時に複数条件(等幅、可変)を同時に用いてボタンサイズを変更したい

foodtheater

総合スコア2

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2023/11/29 07:16

編集2023/11/30 18:19

実現したいこと

・レスポンシブ時にcontents_chapter_title pのテキストが1〜2行の場合:ウィンドウサイズ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は自己解決欄(解決していませんが)に貼ってあります。

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: 1 27} 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のテキストが1〜2行の場合でも作用されてしまうため断念

補足情報(FW/ツールのバージョンなど)

画像部分は見えていないと思いますが、実際は+ボタン(icon_plus.svg)と-ボタン(icon_minus.svg)がクリックで切り替わるよう設置しております。

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

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

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

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

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

Lhankor_Mhy

2023/11/30 02:13

contents_chapter_title や contents_chapter というのは、ご提示のHTMLで言うと具体的にはどれのことですか? ひとつめの.button が contents_chapter_title でしょうか?
foodtheater

2023/11/30 04:30 編集

すいません、誤ったhtmlを貼っていました。 質問のほうを修正しようと思ったのですが、文字数制限をオーバーしていたため、自己解決欄に(解決していませんが)htmlを貼りました。
foodtheater

2023/11/30 04:40

Lhankor_Mhyさんのご質問への回答を以下に記します。 contennts:一つ目のアコーディオンメニューのボタン contennts_title:上記のボタンのテキストタイトル contents_chapter:一つ目のアコーディオンメニューのボタンをクリックして展開した中にあるアコーディオンメニューのボタン contents_chapter_title:上記のボタンのテキストタイトル
guest

回答2

0

ベストアンサー

ご希望の動作を理解できているか不安なのですが、高さの最小値を設けたいということであれば、CSSのmin-heightで対応してはどうでしょうか。

css

1.contents_chapter { 2 width: 100%; 3 /*950px*/ 4 /* height: 110px; */ 5 height: auto !important; 6 /*110px*/ 7 /**/ 8 border-radius: 20px; 9 margin-bottom: 30px; 10 background-color: #E1EBA0; 11} 12 13.contents_chapter_title { 14 /* height: 110px; */ 15 min-height: 110px; 16 /*110px*/ 17 /**/ 18 display: flex; 19 cursor: pointer; 20} 21 22/* @media screen and (max-width : 820px) も同様 */

投稿2023/11/30 05:24

Lhankor_Mhy

総合スコア35740

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

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

foodtheater

2023/11/30 09:19

Lhankor_Mhyさんに教えて頂いた処理を試したところ、期待どおりの動きが実装できました。 ありがとうございました。 色々と試しているうちに、少し難しく考えてしまっていたようです。
guest

0

本来アップしたかったhtmlです。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <!-- headの基本定義、言語設定など --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- タイトル --> 8 <title>サンプル</title> 9 <!-- scripts.jsを参照する --> 10 <link rel="stylesheet" href="sample.css"> 11 <script> 12 (function(d) { 13 var config = { 14 kitId: 'bdv5jgh', 15 scriptTimeout: 3000, 16 async: true 17 }, 18 h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) 19 })(document); 20 </script> 21 </head> 22 23 <body> 24 25 <div class="background_image"> 26 27 <div class="container"> 28 <ul> 29 <li class="container_contents_list"> 30 <div class="contents" id="contents_1"> 31 <div class="contents_title" onclick="toggleContents(this, 'iconToggle_1', 'contents_1')"> 32 <div class="title_text"><p>持続可能なライフスタイルの確立について</p></div> 33 <img src="images/icon_plus.svg" alt="開く" class="open_button" id="iconToggle_1"> 34 </div> 35 <ul class="contents_chapter_container"> 36 <li> 37 <div class="contents_chapter" id="contents_chapter_1"> 38 <div class="contents_chapter_title" onclick="toggleContents_Chapter(this, 'iconToggle_chapter_1', 'contents_chapter_1')"> 39 <p>3Rとはなんですか?</p> 40 <img src="images/icon_plus.svg" alt="開く" class="open_button_chapter" id="iconToggle_chapter_1"> 41 </div> 42 <div class="contents_chapter_caption"> 43 <p>こにテキストが入る予定です</p> 44 </div> 45 </div> 46 </li> 47 <li> 48 <div class="contents_chapter" id="contents_chapter_2"> 49 <div class="contents_chapter_title" onclick="toggleContents_Chapter(this, 'iconToggle_chapter_2', 'contents_chapter_2')"> 50 <p>環境にやさしい生活を実現するために、無駄な廃棄物を減らすための工夫やポイントがありますか?</p> 51 <img src="images/icon_plus.svg" alt="開く" class="open_button_chapter" id="iconToggle_chapter_2"> 52 </div> 53 <div class="contents_chapter_caption"> 54 <p>ここにテキストが入る予定です</p> 55 </div> 56 </div> 57 </li> 58 <li> 59 <div class="contents_chapter" id="contents_chapter_3"> 60 <div class="contents_chapter_title" onclick="toggleContents_Chapter(this, 'iconToggle_chapter_3', 'contents_chapter_3')"> 61 <p>現代社会では環境への影響や資源の有効活用が重要視されています。リサイクルの効果的な方法や工程、リサイクル施設に提供する際の注意すべきポイント、エコフレンドリーな商品の選び方などについて教えていただけますか?</p> 62 <img src="images/icon_plus.svg" alt="開く" class="open_button_chapter" id="iconToggle_chapter_3"> 63 </div> 64 <div class="contents_chapter_caption"> 65 <p>ここにテキストが入る予定です</p> 66 </div> 67 </div> 68 </li> 69 </ul> 70 </div> 71 </li> 72 73 </ul> 74 </div> 75 76 </div> 77 78 </body> 79<script> 80 function toggleContents(element, iconId, contentsId) { 81 var icon = element.querySelector('.open_button'); 82 var isOpened = icon.src.includes('icon_minus.svg'); 83 var contents = document.getElementById(contentsId); 84 85 if (isOpened) { 86 icon.src = 'images/icon_plus.svg'; 87 contents.style.height = 'auto'; // 高さを元に戻す 88 } else { 89 icon.src = 'images/icon_minus.svg'; 90 contents.style.height = 'auto'; // 高さをautoに設定 91 } 92 93 // ここに開閉のロジックを追加する(例:アコーディオンの表示・非表示など) 94 // この例では、ul要素の表示・非表示をトグルしています 95 var sublist = element.nextElementSibling; 96 sublist.style.display = sublist.style.display === 'block' ? 'none' : 'block'; 97 } 98 99 function toggleContents_Chapter(element, iconId, contentsId) { 100 var icon = element.querySelector('.open_button_chapter'); 101 var isOpened = icon.src.includes('icon_minus.svg'); 102 var contents_chapter = document.getElementById(contentsId); 103 104 if (isOpened) { 105 icon.src = 'images/icon_plus.svg'; 106 contents_chapter.style.height = '110px'; // 高さを元に戻す 107 contents_chapter.style.paddingBottom = '0'; // padding-bottomを0に戻す 108 // ウィンドウサイズが820px以下の場合はpadding-bottomを5pxに設定 109 if (window.innerWidth <= 820) { 110 icon.src = 'images/icon_plus.svg'; 111 contents_chapter.style.height = 'auto'; // 高さを元に戻す 112 contents_chapter.style.paddingBottom = '0'; // padding-bottomを0に戻す 113 } 114 } else { 115 icon.src = 'images/icon_minus.svg'; 116 contents_chapter.style.height = 'auto'; // 高さをautoに設定 117 contents_chapter.style.paddingBottom = '5px'; // padding-bottomを5pxに設定 118 } 119 120 // ここに開閉のロジックを追加する(例:アコーディオンの表示・非表示など) 121 // この例では、ul要素の表示・非表示をトグルしています 122 var sublist = element.nextElementSibling; 123 sublist.style.display = sublist.style.display === 'block' ? 'none' : 'block'; 124 } 125 126</script> 127 128</html> 129

投稿2023/11/30 04:29

foodtheater

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問