Q&A
タブの切り替えはどのように実装してますか。
JSでしているのなら、そのコードも提示してください。
下記コードの場合、class="tabContainer"にauto,100%で指定すると要素が表示されず、px指定すると表示できるのですが、各タブで高さが統一されるため空白が多く出てしまうタブが出てしまいます。
どのように記述すれば、各タブでheightがタブごとに自動で調整されるのでしょうか？
HTML
1<section> 2 <nav> 3 <a href="javascript:void(0);" data-tab="one" class="active">Web制作</a> 4 <a href="javascript:void(0);" data-tab="two">Web広告</a> 5 <a href="javascript:void(0);" data-tab="three">コンサルティング</a> 6 <a href="javascript:void(0);" data-tab="four">SNS運用</a> 7 <a href="javascript:void(0);" data-tab="five">マーケティング</a> 8 <a href="javascript:void(0);" data-tab="six">コンセプトオーダーHP</a> 9 <div class="clear"></div> 10 </nav> 11 <div class="tabContainer"> 12 <div id="one" class="Tabcondent active"> 13 <div class="price-flex"> 14 <div class="price-title"> 15 <h2>Web制作</h2> 16 <p class="price-title-catch">Webの中に<br> 17 もう一人の営業マンを。<br> 18 戦略に基づいたWeb制作</p> 19 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 20 </div> 21 <div class="price-list-box"> 22 <div class="plan-flex"> 23 <div class="price-list production"> 24 <h3>■ホームページ制作</h3> 25 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 26 <p class="price-span">¥100,000〜</p> 27 </div> 28 <div class="price-list production"> 29 <h3>■ランディングページ制作</h3> 30 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 31 <p class="price-span">¥20,000〜</p> 32 </div> 33 </div> 34 <div class="plus">＋</div> 35 <div class="price-list"> 36 <h3>■ドメイン・サーバー管理費</h3> 37 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 38 <p class="price-span">¥10,000/月</p> 39 </div> 40 <div class="price-list"> 41 <p class="menu">初期メニュー</p> 42 <h3>■初期費用</h3> 43 <h4>⚫︎マーケティング実施メニュー</h4> 44 <p>・ヒアリングシート<br> 45 ・アナリティクス調査<br> 46 </p> 47 <p class="price-span">¥200,000</p> 48 </div> 49 </div> 50 </div> 51 </div> 52 <div id="two" class="Tabcondent"> 53 <div class="price-flex"> 54 <div class="price-title"> 55 <h2>Web広告</h2> 56 <p class="price-title-catch">Webの中に<br> 57 もう一人の営業マンを。<br> 58 戦略に基づいたWeb制作</p> 59 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 60 </div> 61 <div class="price-list-box"> 62 <p class="menu">初期メニュー</p> 63 <div class="plan-flex"> 64 <div class="price-list ads-list"> 65 <h3>■BASIC</h3> 66 <p class="ads-list-text">⚫︎運用プラン作成<br> 67 ・ヒアリング、取材<br></p> 68 <p class="price-span">¥100,000</p> 69 </div> 70 <div class="price-list ads-list"> 71 <h3>■RIGHT</h3> 72 <p class="ads-list-text">⚫︎リサーチ<br> 73 ・ヒアリング、取材<br> 74 </p> 75 <p class="price-span">¥20,000</p> 76 </div> 77 </div> 78 <p class="menu">ランニングメニュー</p> 79 <div class="price-list"> 80 <h3>■広告運用</h3> 81 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 82 <p class="price-span">¥50,000/月</p> 83 </div> 84 </div> 85 </div> 86 </div> 87 88 <div id="three" class="Tabcondent"> 89 90 <div class="price-flex"> 91 <div class="price-title"> 92 <h2>コンサルティング</h2> 93 <p class="price-title-catch">Webの中に<br> 94 もう一人の営業マンを。<br> 95 戦略に基づいたWeb制作</p> 96 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 97 </div> 98 <div class="price-list-box"> 99 <div class="price-list"> 100 <h3>■デジタルマーケティングコンサルティング</h3> 101 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 102 <p class="price-span">¥100,000</p> 103 </div> 104 <div class="price-list"> 105 <h3>■Web広告運用コンサルティング</h3> 106 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 107 <p class="price-span">¥50,000/月</p> 108 </div> 109 </div> 110 </div> 111 </div> 112 113 <div id="four" class="Tabcondent"> 114 <div class="price-flex"> 115 <div class="price-title"> 116 <h2>SNS運用</h2> 117 <p class="price-title-catch">Webの中に<br> 118 もう一人の営業マンを。<br> 119 戦略に基づいたWeb制作</p> 120 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 121 </div> 122 <div class="price-list-box"> 123 <p class="menu">初期メニュー</p> 124 <div class="price-list"> 125 <h3>■リサーチ</h3> 126 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 127 <p class="price-span">¥100,000</p> 128 </div> 129 <p class="menu">ランニングメニュー</p> 130 <div class="price-list"> 131 <h3>■SNSコーチングサポート</h3> 132 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 133 <p class="price-span">¥35,000〜</p> 134 </div> 135 <div class="price-list"> 136 <h3>■SNSコンサルティング</h3> 137 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 138 <p class="price-span">¥50,000/月</p> 139 </div> 140 </div> 141 </div> 142 </div> 143 144 <div id="five" class="Tabcondent"> 145 <div class="price-flex"> 146 <div class="price-title"> 147 <h2>マーケティング</h2> 148 <p class="price-title-catch">Webの中に<br> 149 もう一人の営業マンを。<br> 150 戦略に基づいたWeb制作</p> 151 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 152 </div> 153 <div class="price-list-box"> 154 <div class="price-list"> 155 <h3>■マーケティング</h3> 156 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 157 <p class="price-span">¥200,000</p> 158 </div> 159 <div class="price-list"> 160 <h3>■戦略立案</h3> 161 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 162 <p class="price-span">¥100,000</p> 163 </div> 164 <div class="plus">＋</div> 165 <div class="price-list"> 166 <h3>■Web制作・広告運用・コンサルティング</h3> 167 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 168 <p class="price-span">¥10,000/月</p> 169 </div> 170 </div> 171 </div> 172 </div> 173 174 <div id="six" class="Tabcondent"> 175 <div class="price-flex"> 176 <div class="price-title"> 177 <h2>コンセプトオーダーHP</h2> 178 <p class="price-title-catch">Webの中に<br> 179 もう一人の営業マンを。<br> 180 戦略に基づいたWeb制作</p> 181 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 182 </div> 183 <div class="price-list-box"> 184 <p class="menu">初期費用</p> 185 <div class="plan-flex"> 186 <div class="price-list reasonable"> 187 <h3>■BASIC</h3> 188 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 189 <p class="price-span">¥20,000</p> 190 </div> 191 </div> 192 <p class="menu">ランニングメニュー</p> 193 <div class="plan-flex"> 194 <div class="price-list reasonable"> 195 <h3>■RIGHT</h3> 196 <p>貴社に必要なホームページを作成します。デザイン性はもちろん、コンバージョン、広告、SNS、その後の運用も考えたホームページを制作します。</p> 197 <p class="price-span">¥10,000/月</p> 198 </div> 199 </div> 200 </div> 201 </div> 202 </div> 203 204 </div> 205</section>
CSS
1.consulting-story-box-inner { 2 width: 1200px; 3 margin: auto; 4} 5.smooth-scroll-box { 6 width: 70%; 7 margin: auto; 8 padding-top: 50px; 9} 10/*料金表*/ 11nav { 12 display: flex; 13 justify-content: center; 14 width: 100%; 15 margin: auto; 16} 17nav a { 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 width: 260px; 22 height: 60px; 23 background-color: #ca4027; 24 color: #fff; 25 font-size: 16px; 26 font-weight: bold; 27 border-right: 1px solid #672114; 28} 29.tabContainer { 30 display: block; 31 margin: 0 auto; 32 width: 100%; 33 height: 1050px; 34 overflow: hidden; 35 position: relative; 36 background-color: rgb(236, 236, 236); 37} 38.Tabcondent { 39 display: block; 40 position: absolute; 41 width: 100%; 42 height: auto; 43 opacity: 0; 44 border-radius: 32px; 45 left: 0; 46 right: 0; 47 top: 0; 48 bottom: 0; 49 margin: 37px auto; 50} 51.menu { 52 display: flex; 53 align-items: center; 54 margin-bottom: 20px; 55} 56.menu::after { 57 content: ""; 58 flex-grow: 1; 59 height: 1px; 60 display: block; 61 margin-left: .4em; 62 background: black; 63} 64.price-flex { 65 display: flex; 66 justify-content: center; 67 width: 1250px; 68 margin: auto; 69 padding: 80px 0; 70} 71.price-title { 72 width: 550px; 73 line-height: 20px; 74 padding: 0 40px; 75 border-right: 1px solid black; 76 margin-right: 40px; 77} 78.price-title h2 { 79 margin-bottom: 20px; 80} 81.price-title-catch { 82 font-size: 18px; 83 margin-bottom: 20px; 84 font-weight: bold; 85} 86.price-list { 87 width: 800px; 88 margin: 15px 30px; 89} 90.plus { 91 font-size: 50px; 92 font-weight: bold; 93 text-align: center; 94} 95.price-list h3 { 96 font-size: 20px; 97 margin-bottom: 10px; 98} 99.price-span { 100 text-align: right; 101 font-size: 25px; 102 font-weight: bold; 103 margin: 30px 0 10px 0; 104} 105a.active { 106 background-color: #672114; 107} 108.Tabcondent.active { 109 width: 100%; 110 opacity: 1; 111 border-radius: 0px; 112 transition: all ease-in-out 0.6s; 113 margin: 0 auto; 114} 115.plan-flex { 116 display: flex; 117 flex-wrap: wrap; 118 justify-content: left; 119 text-align: left; 120} 121.ads-list { 122 width: 330px; 123} 124.production { 125 width: 380px; 126} 127.reasonable { 128 width: 330px; 129} 130.ads-list-text { 131 height: 130px; 132}
回答1件
0
JSでactiveクラスの付け外しをしているのだとして回答します。
Tabcondentクラスにposition: absolute;を設定していますが、これだと他の要素からはないものとして扱われますので、親要素の高さは指定してないと 0 になります。
非表示のTabcondentの高さを0にしておけば、position: absolute;は必要ないです。
コード例
css
1.Tabcondent { 2 width: 100%; 3 height: 0; 4 opacity: 0; 5 margin: 0 auto; 6} 7.Tabcondent.active { 8 opacity: 1; 9 height: auto; 10 transition: all ease-in-out 0.6s; 11}
蛇足ですが、Tabcondent は Tabcontent じゃないかな？
投稿2021/12/25 18:01
編集2021/12/25 18:40総合スコア33795
あなたの回答
tips
プレビュー
