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

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

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

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

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

CSS

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

解決済

リセットCSSを適応するとラジオボタンが欠けてしまう。

ghtew2
ghtew2

総合スコア176

CSS3

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

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

CSS

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

1回答

0評価

0クリップ

142閲覧

投稿2022/06/13 09:49

リセットCSSを適応すると、ラジオボタンが割れてしまうのですが、(適応しないと割れない)これをリセットCSSはいじらずに、きちんと表示させたいです。

提示コードは以下の順で記載してます。
HTMLのコードはボックスとラジオボタンの骨組みです。
ラジオボタンのCSSはその下
3つ目にRichard ClarkのリセットCSSのコード(書き換えしてない)

ラジオボタンのCSSの.radio_text{
font-size: 16px;を23pxにすると、ボタンの割れは改善されますが、「同意するしない」の文字が大きすぎてしまいます。

これを文字の大きさはそんなに変えずに、ラジオボタンを表示させたいです。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="reset.css"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> .wrapper { overflow: hidden; } </style> </head> <body> <div class="wrapper"> <div class="main"> </div> <div class="radio_text"> <section> <label class="radio_text"> <input type="radio" name="doui" value="suru" checked>同意する </label> <label class="radio_text"> <input type="radio" name="doui" value="shinai">同意しない </label> </section> </div> </body> </html>

ラジオボタンのCSS

css

/*スクロール内のボックスの配置*/ .main { margin-left: auto; /* ボックスを中央寄せにするため */ margin-right: auto; /* ボックス中央寄せにするため */ } /*スクロール内のボックスの指定*/ .main{ width:650px; height:160px; border: 1.3px solid #40ce03; overflow: auto; color:#40ce03 ; margin-bottom: 20px; margin-top: 17px;/* ボックス内文字上の余白 */ font-size: 14px;/* 文字の大きさ */ padding-left: 10px;/* ボックス内文字左の余白 */ font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif; } /*スクロールの幅の指定*/ .main::-webkit-scrollbar{ width: 14px; height: 10px; } /*スクロールの背景の指定*/ .main::-webkit-scrollbar-track { border-radius:5px; border-left: 1px solid #40ce03;/* スクロールバーに接する左の線の表示 */ } /*スクロールのつまみ部分の指定*/ .main::-webkit-scrollbar-thumb { border-radius: 5px; background:#40ce03 ; } .radio_text{ text-align: center;/* 文字を中央に配置 */ margin-top: 6px;/* ボタンとその横の文字の上の余白 */ margin-bottom: 20px; font-size: 16px; } /*RadioとText*/ label.radio_text { cursor : pointer; position : relative; margin-right : 20px; overflow : hidden; padding-left : 32px; display : inline-block; } label.radio_text:before { position : absolute; width : 16px;/* ボタンのフチの大きさ */ height : 16px; border : 1px solid #40ce03; border-radius : 50%; left : 0px; top : 4px; content : ''; z-index : 3; } label.radio_text:after { content : ''; position : absolute; width : 18px;/* ボタンクリック時の緑の背景の大きさ */ height : 18px; border-radius : 100%; left : 0px; top : 5px; background-color : #40ce03; z-index : 1; } label.radio_text input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; position : absolute; z-index : 2; width : 48px; height : 48px; left : -48px; top : 1px; margin : 0px; box-shadow : 26px -1px #FFF; } label.radio_text input[type="radio"]:checked { box-shadow : none; } label.radio_text input[type="radio"]:focus { opacity : 0.2; box-shadow : 20px -1px #FFF; } /*ラジオボタンをクリック時フォーカスインジケーター(縦線)が見えているので*/ :focus { outline: none; }

リセットCSSreset.css

css

/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

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

CSS

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