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

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

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

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

HTML

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

CSS

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

Q&A

解決済

2回答

3301閲覧

ラジオボタンがdisplay : noneでも消えない

退会済みユーザー

退会済みユーザー

総合スコア0

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/03/01 08:33

編集2019/11/15 06:06

ラジオボタンが消えない display : none;

ラジオボタンの分スペースが開いてしまいます。

ラジオボタン分のスペースを消したいです。

基本はIEで開きますが、chromeで開くと四角の枠が表示されてしまいます。

該当のソースコード

HTML

1<div class="cp_qa"> 2<input id="cp_conttab1" type="radio" name="tabs" checked> 3<label for="cp_conttab1" class="cp_tabitem">タブ1</label> 4<div id="cp_content1"> 5<div class="cp_qain">

css

1.cp_qa label.cp_tabitem[for*='1']:before { content: '\f2bd'; }

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

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

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

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

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

guest

回答2

0

いくつか修正しますね。

css

1/* カテゴリー */ 2.cp_qa #cp_content1, 3.cp_qa #cp_content2, 4.cp_qa #cp_content3, 5.cp_qa #cp_content4 { 6display: none; 7padding: 10px 0 0; 8border-top: 1px solid #blue; // 間違ってる 9border-top: 1px solid blue; // #いらない 10font-size:14px; 11} 12 13.cp_qa label.cp_tabitem[for*='1']:before { content: ''; } // contentの中身いらない 14.cp_qa label.cp_tabitem[for*='2']:before { content: ''; } 15.cp_qa label.cp_tabitem[for*='3']:before { content: ''; } 16.cp_qa label.cp_tabitem[for*='4']:before { content: ''; } 17 18/* カテゴリにマウスカーソルが当たったとき */ 19.cp_qa label.cp_tabitem:hover { 20cursor: pointer; 21color: white; 22background-color:##0000cd; // #多い 23background-color: #0000cd; 24}

ご参考までに

投稿2019/03/01 09:03

sauzar18

総合スコア163

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

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

退会済みユーザー

退会済みユーザー

2019/03/04 00:24

ご回答、修正していただきありがとうございます。
guest

0

ベストアンサー

cssの以下の部分でアイコンなどを指定しているのが表示されているのではないでしょうか。

css

1.cp_qa label.cp_tabitem[for*='1']:before { content: '\f2bd'; } 2.cp_qa label.cp_tabitem[for*='2']:before { content: '\f15c'; } 3.cp_qa label.cp_tabitem[for*='3']:before { content: '\f0f4'; } 4.cp_qa label.cp_tabitem[for*='4']:before { content: '\f001'; }

この部分をなくせば解決すると思います。

投稿2019/03/01 08:44

cerfweb

総合スコア1899

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

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

退会済みユーザー

退会済みユーザー

2019/03/01 08:49

ご回答していただきありがとうございます。 テンプレートでは、アイコンが表示されていましたので、 そのまま残っていたんですね。。 cerfweb様のおっしゃるとおりにすれば、スペースが消えました。 助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問