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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

249閲覧

タブ実装時のdisplay gridのレイアウト崩れ

spn

総合スコア37

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/06/04 15:01

実現したいこと

タブを実装時、隠す時をdisplay none ,表示する時をdisplay blockを使用してタブの切り替えを行なった。
その時の切り替わるレイアウトにdisplay gridを使用したが全体にdisplay blockが効いているため、display gridが効かなくなってレイアウトが崩れてしまった。

完成時イメージ display blockを消すとうまくいく
イメージ説明

現状 レイアウト崩れ
イメージ説明

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

scss

1.news__nav { 2 margin-top: 46px; 3 text-align: center; 4 5 ol { 6 display: flex; 7 justify-content: center; 8 9 li { 10 font-size: 16px; 11 12 13 &:first-child { 14 margin-right: 53px; 15 } 16 17 a:hover, 18 a:focus { 19 color: #978F10; 20 } 21 22 23 24 } 25 } 26 27} 28 29.grid { 30 display: grid; 31 gap: 20px 46px; 32} 33 34//カード 35.news-card__item { 36 background: #F6F6F6; 37 padding: 15px 30px 10px 15px; 38 transition: 0.3s; 39} 40 41.news-card__link { 42 display: flex; 43 flex-direction: row-reverse; 44 justify-content: start; 45 align-items: flex-start; 46} 47 48.news-card__body { 49 margin-left: 30px; 50 51 time { 52 font-size: 14px; 53 line-height: 2.2; 54 } 55} 56 57.news-card__txt { 58 59 font-size: 16px; 60 line-height: 2; 61 62 .blank { 63 display: none; 64 } 65} 66 67.news-card__thumb { 68 69 img { 70 width: 103px; 71 height: 100px; 72 aspect-ratio: 1 / 1; 73 } 74} 75 76@include medium { 77 .news__inner { 78 padding: 60px 25px; 79 } 80 81 .grid-pd2col { 82 display: grid; 83 gap: 20px; 84 grid-template-columns: repeat(2, 1fr); 85 max-width: 1186px; 86 margin: 50px auto 0; 87 } 88 89 90 91} 92 93@include large { 94 .grid-pd2col { 95 gap: 20px 46px; 96 } 97 98 99} 100 101@include x-large { 102 .news-card__txt { 103 .blank { 104 display: block; 105 } 106 } 107} 108 109//ニュースタブ 110.active { 111 text-decoration: underline; 112} 113 114.news__area ul:not(.show) { 115 display: none; 116} 117 118.news__area ul.show { 119 display: block; 120}

HTML

1 <nav class="news__tab" aria-label="お知らせメニュー"> 2 <ol> 3 <li class="active"><a>営業情報</a></li> 4 <li><a>その他</a></li> 5 6 </ol> 7 </nav><!-- /.news__tab --> 8 9 <div class="news__area"> 10 <ul class="grid grid-pd2col news-card__list show"> 11 <li class="news-card__item"> 12 <a href="#" class="news-card__link"> 13 <div class="news-card__body"> 14 <time>2020.12.24</time> 15 <p class="news-card__txt">年末最後の営業日は27日になります。</p><!-- /.news-card__txt --> 16 </div><!-- /.news-card__body --> 17 <figure class="news-card__thumb"><img src="img/news01.jpg" alt=""></figure> 18 <!-- /.news-card__thumb --> 19 </a><!-- /.news-card__link --> 20 </li><!-- /.news-card__item --> 21 22 </ul><!-- /.grid grid-pd3colnews-card-list --> 23 24 25 <ul class="grid grid-pd2col news-card__list"> 26 <li class="news-card__item"> 27 <a href="#" class="news-card__link"> 28 <div class="news-card__body"> 29 <time>2023.3.24</time> 30 <p class="news-card__txt">ホームページをリニューアルしました。</p><!-- /.news-card__txt --> 31 </div><!-- /.news-card__body --> 32 <figure class="news-card__thumb"><img src="img/news01.jpg" alt=""></figure> 33 <!-- /.news-card__thumb --> 34 </a><!-- /.news-card__link --> 35 </li><!-- /.news-card__item --> 36 37 </ul><!-- /.grid grid-pd3colnews-card-list --> 38 </div><!-- /.news__aria --> 39

jQuery

1$(function () { 2 3 // ①タブをクリックしたら発動 4 $('.news__tab li').click(function () { 5 6 // ②クリックされたタブの順番を変数に格納 7 var index = $('.news__tab li').index(this); 8 9 // ③クリック済みタブのデザインを設定したcssのクラスを一旦削除 10 $('.news__tab li').removeClass('active'); 11 12 // ④クリックされたタブにクリック済みデザインを適用する 13 $(this).addClass('active'); 14 15 // ⑤コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示 16 $('.news__area ul').removeClass('show').eq(index).addClass('show'); 17 18 }); 19});

試したこと

ネットで調べて、display inline-blockでもしてみましただダメでした。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

「タブ」というのが、カード(.grid-pd2col)のことで、これを2列にレイアウトしたいということなら、gridを設定するのはその親要素(.news__area)になります。

diff

1-.grid-pd2col { 2+.news__area { 3 display: grid; 4 gap: 20px; 5 grid-template-columns: repeat(2, 1fr); 6 max-width: 1186px; 7 margin: 50px auto 0; 8 }

gridレイアウトには、グリッドコンテナ、グリッドアイテムという概念がありますので、まずはそれを理解しましょう。

投稿2023/06/05 01:56

hatena19

総合スコア33790

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

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

spn

2023/06/05 03:40

ありがとうございました!
guest

0

ベストアンサー

css

1.news__area ul.show { 2 display: block; 3}

block ではなく grid にする必要があります。ul:not(.show) のルールセットが存在するので、このルールセット自体が不要かもしれません。

投稿2023/06/04 21:48

int32_t

総合スコア21008

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

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

spn

2023/06/05 03:40

ありがとうございます!! int32_tさんのおかげで解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問