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

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

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

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

HTML

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

Q&A

解決済

1回答

6634閲覧

【CSS】Radioで要素が表示されない

erp

総合スコア46

CSS3

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

HTML

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

0グッド

0クリップ

投稿2020/03/20 07:39

編集2020/03/20 13:56

CSSが分からない

とんでもないレベルの初心者です。CSSに強い方お助けくださいませ。

発生している問題

radioで要素を表示・非表示にしたいのですが、消えたまま表示されません。

該当のソースコード

html

1<main> 2 <p>A - Z</p> 3 <br> 4 <input id="font_all" type="radio" name="font" value="checked"> 5 <input id="font_serif" type="radio" name="font"> 6 <input id="font_san-serif" type="radio" name="font"> 7 <input id="font_script" type="radio" name="font"> 8 <input id="font_handwriting" type="radio" name="font"> 9 <input id="font_monospace" type="radio" name="font"> 10 <input id="font_slab" type="radio" name="font"> 11 <input id="font_other" type="radio" name="font"> 12 <p class="align-left"> 13 <label for="font_all">all</label> 14 <label for="font_serif">serif</label> 15 <label for="font_san-serif">san-serif</label> 16 <label for="font_script">script</label> 17 <label for="font_handwriting">handwriting</label> 18 <label for="font_monospace">monospace</label> 19 <label for="font_slab">slab</label> 20 <label for="font_other">other</label> 21 </p> 22 23 <section> 24 <ul class="font-ul"> 25 <a href=""><li data-font="serif" class="serif-averia"> 26 <span>Averia Serif Libre</span><br> 27 <p>The quick brown fox jumps over the lazy dog</p> 28 </li></a> 29 <a href=""><li data-font="san-serif"> 30 <span>Open Sans</span> 31 <p>The quick brown fox jumps over the lazy dog</p> 32 </li></a> 33 <li></li> 34 </ul> 35 </section> 36 </main>

css

1ul.font-ul > a > li { 2 display: none; 3} 4 5#font_all:checked ~ .font-ul > a > li, 6#font_serif:checked ~ .font-ul > a > li[data-font*="serif"], 7#font_san-serif:checked ~ .font-ul > a > li[data-font*="san-serif"], 8#font_script:checked ~ .font-ul > a > li[data-font*="script"], 9#font_handwriting:checked ~ .font-ul > a > li[data-font*="handwriting"], 10#font_monospace:checked ~ .font-ul > a > li[data-font*="monospace"], 11#font_slab:checked ~ .font-ul > a > li[data-font*="slab"], 12#font_other:checked ~ .font-ul > a > li[data-font*="other"] { 13 display: inline-block !important; 14} 15 16ul.font-ul li { 17 display:inline-block; 18 position: relative; 19 width: 230px; 20 height: auto; 21 padding: 7px; 22 margin: 5px; 23 border: solid 1px rgba(255, 255, 255, .3); 24 border-radius: 5px; 25 font-size: 10px; 26 color: #fff; 27 background: rgba(255, 255, 255, 0.125); 28}

試したこと

ディベロッパーで見てもよく分かりませんでした。

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

chrome最新版

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

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

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

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

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

guest

回答1

0

ベストアンサー

2つ、原因があるようでした。

1つはセレクタに「section」が抜けていること、
変更前: #font_all:checked ~ .font-ul > a > li,
変更後: #font_all:checked ~ section .font-ul > a > li,

もう1つは文字色や背景色がない (白?) ため要素が表示されていても視認できないことです。

#font_all:checked ~ section .font-ul > a > li, #font_serif:checked ~ section .font-ul > a > li[data-font*="serif"], #font_san-serif:checked ~ section .font-ul > a > li[data-font*="san-serif"], #font_script:checked ~ section .font-ul > a > li[data-font*="script"], #font_handwriting:checked ~ section .font-ul > a > li[data-font*="handwriting"], #font_monospace:checked ~ section .font-ul > a > li[data-font*="monospace"], #font_slab:checked ~ section .font-ul > a > li[data-font*="slab"], #font_other:checked ~ section .font-ul > a > li[data-font*="other"] { display: inline-block !important; color: #f00; /* 文字色を指定 */ }

別件ですが
ulの子要素はliにして、その中にaを含めたほうがHTML的には正しいので、
余裕あれば見直すことをおすすめします。

投稿2020/03/20 14:18

new1ro

総合スコア4528

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

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

erp

2020/03/20 14:41

やってみたら出来ました! 検証と回答、ありがとうございます!!! 手直しもしてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問