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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

432閲覧

タブ切り替えがうまくいかない

machaking

総合スコア46

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2022/05/21 06:02

Wordpress(テーマ:aside)でグリッドレイアウト(レスポンシブ)のテーマ仕様時、
タブでランキングと新着記事の切り替えを実装しようとしました。

該当URL
https://weddinggenic.jp

タブ切り替えで選択されてない要素はdisplay:noneによって消されており、
消されている時にテーマのレスポンシブ機能によって要素コンテンツの大きさが0になるのか、切り替えても要素が表示されません。
(ブラウザの大きさを変えるとこれもテーマの機能でブラウザサイズを読み取り(更新)そこから要素の高さ等を決定するみたいで正常表示されます。)

これを解決する為にタブ要素をabsoluteで重ね合わせ、切り替え時にz-indexで操作するなど考えたのですが、親要素の高さがなくなってしまったりとどうにもうまくいきません。

ご教示願えませんでしょうか。

PHP

1<div class="tabs"> 2 <input id="all" type="radio" name="tab_item" checked> 3 <label class="tab_item" for="all">NEW</label> 4 <input id="programming" type="radio" name="tab_item"> 5 <label class="tab_item" for="programming">RANKING</label> 6 <div class="tab_content" id="all_content"> 7 <div class="tab_content_description"> 8 <div class="isotope masonry"> 9 タブ1の中身 10 </div> 11 </div> 12 </div> 13 <div class="tab_content" id="programming_content"> 14 <div class="tab_content_description"> 15 <div class="isotope masonry"> 16 タブ2の中身 17 </div> 18 </div> 19 </div> 20</div>

CSS

1/*タブ切り替え全体のスタイル*/ 2.tabs { 3 margin-top: 50px; 4 padding-bottom: 40px; 5/* background-color: #fff; */ 6/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */ 7/* width: 700px; */ 8 margin: 0 auto; 9 position: relative; 10} 11 12/*タブのスタイル*/ 13.tab_item { 14 width: calc(100%/5); 15 height: 50px; 16 border-bottom: 3px solid #5ab4bd; 17 background-color: #d9d9d9; 18 line-height: 50px; 19 font-size: 16px; 20 text-align: center; 21 color: #565656; 22 display: block; 23 float: left; 24 text-align: center; 25 font-weight: bold; 26 transition: all 0.2s ease; 27} 28.tab_item:hover { 29 opacity: 0.75; 30} 31 32/*ラジオボタンを全て消す*/ 33input[name="tab_item"] { 34 display: none; 35} 36 37/*タブ切り替えの中身のスタイル*/ 38.tab_content { 39 display: none; 40/* padding: 40px 40px 0; */ 41 clear: both; 42 overflow: hidden; 43} 44 45 46/*選択されているタブのコンテンツのみを表示*/ 47#all:checked ~ #all_content, 48#programming:checked ~ #programming_content, 49#design:checked ~ #design_content { 50 display: block; 51} 52 53/*選択されているタブのスタイルを変える*/ 54.tabs input:checked + .tab_item { 55 background-color: #5ab4bd; 56 color: #fff; 57}

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。
displayでの切り替えではなくheight:0での切り替えをすると機能しました。

投稿2022/05/21 08:08

machaking

総合スコア46

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問