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

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

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

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

HTML5

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

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML

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

CSS

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

Q&A

解決済

2回答

1196閲覧

大規模な範囲をタブで、表示非表示を切り替えたい

moST

総合スコア14

CSS3

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

HTML5

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

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/12/08 12:58

HTML,CSSで、タブにより大規模な範囲の表示非表示を切り替えたいです。
例えばテスト1を選択した際、tomos1で囲んでいる箇所が表示され、テスト2を選択した際非表示になるようにしたいです。
下記のコードではdivタグがsection class="about"の箇所までしか認識されないです。
divタグってSectionタグを跨げないのでしょうか・・・どうしましょう・・・。

HTML

1 <section class="about"> 2 <div class="tabs"> 3 <input id="want1" type="radio" name="tab_item" checked> 4 <label class="tab_item" for="want1">テスト1</label> 5 <input id="want2" type="radio" name="tab_item"> 6 <label class="tab_item" for="want2">テスト2</label> 7 8<div class="temos1"> 9 <div class="toras"> 10 <p>コンテンツ内容<br> 11 コンテンツ内容</p> 12 </div> 13 </section> 14 <section class="temos2"> 15 <p>コンテンツ内容</p> 16 </section> 17 <section class="temos3"> 18 <p>コンテンツ内容</p> 19 </section> 20 <section class="temos4"> 21 <p>コンテンツ内容</p> 22 </section> 23</div>

CSS

1.tabs { 2 /*ラジオボタンを全て消す*/ 3 input[name="tab_item"] { 4 display: none; 5 } 6 /*タブ切り替えの中身のスタイル*/ 7 .temos1 { 8 display: none; 9 padding: 40px 40px 0; 10 clear: both; 11 overflow: hidden; 12 } 13 #want1:checked ~ .temos1 { display: block; } 14 #want2:checked ~ #container2 { display: block; }

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

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

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

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

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

guest

回答2

0

ベストアンサー

HTMLの開始タグと終了タグの対応がおかしいです。

また、CSSのセレクタ#container2に対応するidの要素がありません。

.temos1以外の要素を#container2で指定したいとするなら、HTMLは下記のようにします。

html

1<section class="about"> 2 <div class="tabs"> 3 <input id="want1" type="radio" name="tab_item" checked> 4 <label class="tab_item" for="want1">テスト1</label> 5 <input id="want2" type="radio" name="tab_item"> 6 <label class="tab_item" for="want2">テスト2</label> 7 8 <div class="temos1"> 9 <div class="toras"> 10 <p>コンテンツ内容1<br> 11 コンテンツ内容1</p> 12 </div> 13 </div> 14 <div id="container2"> 15 <div class="temos2"> 16 <p>コンテンツ内容2</p> 17 </div> 18 <div class="temos3"> 19 <p>コンテンツ内容3</p> 20 </div> 21 <div class="temos4"> 22 <p>コンテンツ内容4</p> 23 </div> 24 </div> 25 </div> 26</section>

あと、CSSもおかしいですが、ひょっとしてSCSSですか。
SCSSなら、下記で
「テスト1」クリックで.temos1表示、
「テスト2」クリックでそれ以外を表示、
という動作になります。

scss

1.tabs { 2 /*ラジオボタンを全て消す*/ 3 input[name="tab_item"] { 4 display: none; 5 } 6 /*タブ切り替えの中身のスタイル*/ 7 .temos1 { 8 display: none; 9 padding: 40px 40px 0; 10 clear: both; 11 overflow: hidden; 12 } 13 #container2 { 14 display: none; 15 } 16 #want1:checked ~ .temos1 { display: block; } 17 #want2:checked ~ #container2 { display: block; } 18}

CSSなら、

css

1.tabs input[name="tab_item"] { 2 display: none; 3} 4.tabs .temos1 { 5 display: none; 6 padding: 40px 40px 0; 7 clear: both; 8 overflow: hidden; 9} 10.tabs #container2 { 11 display: none; 12} 13.tabs #want1:checked ~ .temos1 { 14 display: block; 15} 16.tabs #want2:checked ~ #container2 { 17 display: block; 18}

投稿2020/12/08 15:45

hatena19

総合スコア33620

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

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

moST

2024/02/15 17:32

回答ありがとうございます。 試したところ問題が解決しました! ベストアンサーに選ばせていただきました。
guest

0

HTMLの文法上、提示されたような書き方は間違っています。
このような動作は、JavaScriptを使って、選択された値に応じて要素を表示・非表示するのが一般的なやり方かと思います。

投稿2020/12/08 13:09

cerfweb

総合スコア1899

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問