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

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

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

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

CSS

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

Q&A

解決済

1回答

582閲覧

ラジオボックスとラジオボックス間の間隔を短く調整したい

sugawa

総合スコア24

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/04/12 12:02

編集2019/04/12 12:03

![イメージ説明

イメージ説明

上の写真のように、ラジオボックスとラジオボックスの間が開きすぎてスタイルが崩れてしまいます。
色々な値を変えてみましたが、ひとつ変えると、他方が壊れます。
決定打が見つからず質問致しました。
目指したいのは下の写真です。
以下にHTML、CSSを載せます。

HTML

1<!doctype html> 2<html> 3<head> 4<title>住宅設計施工の美浜工務店</title> 5<meta charset="utf-8"> 6<link href="index.css" rel="stylesheet" type="text/css"> 7<link href="contact_form.css" rel="stylesheet" type="text/css"> 8</head> 9 10<body> 11<div id="container"> 12 <header> 13 <div id="Logo_area"> 14 <h1><a href="#"><img src="imagesのコピー/Logo.gif" alt="美浜設計株式会社"></a></h1> 15 </div> 16 <div id="Navi_area"> 17 <div id="banner"><a href="contact.html"><img src="imagesのコピー/Contact.gif" alt="お問い合わせ"></a></div> 18 <ul> 19 <li><a href="contact.html">資料請求</a></li> 20 <li><a href="#">サイトマップ</a></li> 21 <li><a href="#">リクルート</a></li> 22 <li><a href="#">トップ</a></li> 23 </ul> 24 </div> 25 </header> 26 <main> 27 28 <div id="Side_navi"> 29 <ul> 30 <li id="navi01"> 31 <h2><a href="#"><img src="imagesのコピー/SideNavi_Top_out.gif" alt="トップ" ></a></h2> 32 </li> 33 <li id="navi02"> 34 <h2><a href="#"><img src="imagesのコピー/SideNavi_Guide_out.gif" alt="会社概要"></a></h2> 35 </li> 36 <li id="navi03"> 37 <h2><a href="#"><img src="imagesのコピー/SideNavi_Owners_out.gif" alt="実例集" ></a></h2> 38 </li> 39 <li id="navi04"> 40 <h2><a href="#"><img src="imagesのコピー/SideNavi_ModelHouse_out.gif" alt="モデルハウス" ></a></h2> 41 </li> 42 <li id="navi05"> 43 <h2><a href="#"><img src="imagesのコピー/SideNavi_Blog_out.gif" alt="匠のブログ" ></a></h2> 44 </li> 45 <li id="navi06"> 46 <h2><a href="#"><img src="imagesのコピー/SideNavi_Event_over.gif" alt="見学会" ></a></h2> 47 </li> 48 <li id="navi07"> 49 <h2><a href="#"><img src="imagesのコピー/SideNavi_Recruit_out.gif" alt="資料請求" ></a></h2> 50 </li> 51 </ul> 52 </div> 53 <div id="MainBox_sub"> 54 <img src="imagesのコピー/ContactImage.jpg" alt="お問い合わせイメージ"> 55 <div class="SubPage_title"><h2>お問い合わせ</h2></div> 56 <form> 57 <p> 58 <label> 59 <span>お名前 </span> 60   <input type="text" name="name" size="50" maxlength="50" required> <!--required:必須 これを入力しないと最終的に進めない--> 61 </label> 62 </p> 63 64 65 <p> 66 <label> 67 <span>メールアドレス </span> 68   <input type="email" name="email" size="25" maxlength="25" placeholder="xxx.@yyy.com" required> 69 </label> 70 </p> 71 72 73 <p> 74 <label> 75 <span>ブログやホームページがあればお知らせください</span> 76   <input type="email" name="email" size="50" maxlength="50" placeholder="htto://www.bbbb.com/" required> 77 </label> 78 </p> 79 80 <p> 81 <label> 82 <span>郵便番号</span> 83   <input type="text" name="郵便番号" size="25" maxlength="25" placeholder="999-0099" required> 84 </label> 85 </p> 86 87 <p> 88 <label> 89 <span>ご住所</span> 90   <input type="text" name="アドレス1" size="50" maxlength="50" placeholder="都道府県、市町村、番地"><br> 91 <span>建物名と部屋番号</span> 92   <input type="text" name="アドレス2" size="50" maxlength="50" placeholder="アパートやマンション等の建物名とお部屋番号" style="margin: 8px 0px 0px 0px;"> 93 </label> 94 </p> 95 96 <p> 97 <label> 98 <span>電話番号</span> 99   <input type="tel" name="tel" size="20" maxlength="17" placeholder="000-0000-0000"> 100 </label> 101 </p> 102 103 <p> 104 105 <span>性別</span> 106 <label> 107   <input type="radio" name="sex" value="男性" checked>男性 <!--男性が選択された状態に表示される--> 108   </label> 109 110 <label> 111   <input type="radio" name="sex" value="女性">女性 112   </label> 113 </p> 114 115 <p> 116 117 <span>ご年齢</span> 118 <label> 119   <input type="radio" name="年齢" value="20代">20代  120   </label> 121 122 <label> 123   <input type="radio" name="年齢" value="30代">30代  124   </label> 125 126 <label> 127   <input type="radio" name="年齢" value="40代">40代  128   </label> 129 130 <label> 131   <input type="radio" name="年齢" value="50代">50代  132   </label> 133 134 <label> 135   <input type="radio" name="年齢" value="60代">60代  136   </label> 137 138 139 </p> 140 141 142 143 144 </form> 145   146 147 </div> 148 149 150 151 </main> 152 <footer>©️2019 Tek-cell.inc All rights reserved.</footer> 153</div> 154</body> 155 156</html>

CSS

1form { 2 width: 650px; 3 4} 5 6form p { 7 margin: 0; 8 padding: 10px; 9 border-bottom: 2px solid #fff; 10 font-size: 12px; 11 background: linear-gradient(#fff,#6fc);/*グラデーション*/ 12 13 -moz-background: linear-gradient(top,#fff,#6fc); /*ファイヤフォックスでグラデーションを適応させるため*/ 14 -webkit-background: linear-gradient(top,#fff,#6fc); /*Google Chromeでグラデーションを適応させるため*/ 15 16} 17 18form p span { 19 display: inline-block;/*非改行でたかさ、横幅が指定できるようになる*/ 20 width: 160px; 21 text-align: left; 22 margin: 0px; 23 24 25} 26 27form p input { 28 padding: 3px 6px; 29 margin: 0; 30 color: #666; 31 border: none; 32 border-radius: 9px; 33 background: #fff; 34 box-shadow: 2px 3px 5px -2px #ccc inset; 35} 36 37form p label { 38 padding: 4px; 39 40 41} 42 43form p input { 44 padding: 4px; 45 46 47 48} 49 50

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

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

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

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

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

kei344

2019/04/15 17:38

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。
guest

回答1

0

ベストアンサー

とりあえず20代とかの項目の後にある全角空白を削除してみては?
あとは無駄な空白・改行をなくすとか

投稿2019/04/12 12:58

編集2019/04/12 12:58
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

sugawa

2019/04/12 13:04

収まりました ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問