Q&A
ありがとうございます＾＾ 実はudemyというところで動画を買って学んでいるので、その講師さまに質問をしてみたのですが、回答がなかなかなくて、右往左往してました＾＾；でもおっしゃるように別な方法をいろいろ探して別パターンでつくるのは大切ですね。ヒントが得られるかもしれないし。本当にありがとうございます。
# お問い合わせフォームのラジオボタンについて
HTML CSSを初学者で学習しています。お問い合わせフォームの性別を選ぶ部分の箇所にラジオボタンというのを設定したのですが、通常は「性別〇〇〇〇（ボタン）男 （ボタン）女」と作りたいところ、性別とボタンの項目の間隔が詰まってしまい「性別（ボタン）男 （ボタン）女」となってしまいます。
コードは 【index.html】で
<p> <span style="padding-right:140px;">性別</span> <label> <input type="radio" name="sex" value="男性" checked>男性 </label> <label> <input type="radio" name="sex" value="女性">女性 </label> </p> です。ここでspanの部分にpadding-reftに140px設定するときちんと間隔が空いてきれいに設定できました。しかし今まで作っていてpaddingを140も設定した経験がなく大抵が10px～30px前後が最大だったと思います。こんな莫大な数値のpadding-reftを設定してページに影響はないのでしょうか？画面上は見本通りに作れておりますが不安でした・・・。
どうか教えてください。よろしくお願いいたします。
回答5件
0
padding-rightがデかすぎて大丈夫か？
問題ありません。
snowsnowさんのようにstyleを直接指定している場合、他の箇所には影響しないため気にしなくて大丈夫です。
ちょっと進んだ回答
asuchi0819さんの回答にある通り、emの使用をお勧めします。
pxは「画面がどんな状況であれ、○pxは確保する」という指定になります。
emは「フォントサイズに準拠したサイズを確保する」という指定になります。
emを指定しておけば、スマートフォンやタブレットなどでもフォントサイズに合わせて、いい感じに
スペースを取ってくれるようになるかと思います。（今後の為にもemを使えるようになっておいた方がいい、という感じになります。）
投稿2019/10/21 03:31
退会済みユーザー
総合スコア0
0
起こり得ないわけではないですが、全体のバランスやそれこそレイアウト、要件次第だと思います。
「見本通り」ということはそ見本のように「模範解答」のようなものもあるのではと推察されます。そちらを確認されては？
ひとつのものを表現するための方法はひとつではありません。
もし納得いかないのでしたら現在できたものはそれはそれで置いておき、まっ更な状態で別パターンを作ってみるのもロジックを育てるいい機会になると思います。
投稿2019/10/21 03:08
総合スコア80875
オンライン学習サービスを貶める意図はないですが、画一的な学習しかできず、応用力がつかないイメージがあります(私がオンライン学習経験かあるわけではなくteratailでの質問者の傾向を見て)
考えて実地検証を行うことによってその応用力はついて養われていくものだと思いますので、色々自分でやってみると良いです。
0
ベストアンサー
140pxで問題が発生するかしないかだと「するでしょう」。（デザイン上と利便性の問題）
そのファイルをスマホで見てみて下さい。かなり見づらくなっているはずです。
vwかemで指定することをお勧めします。
投稿2019/10/21 03:06
編集2019/10/21 03:11
総合スコア10429
もし、ローカルで開発しているなら
https://cdpn.io/asuchi0819/debug/GRRNzeW/gakeYzJzxxKk
にスマホからアクセスしてみて下さい。（viewportを記述済みとする）
少々使いずらくないですか？
今度はrem(em)で指定した場合です。
https://cdpn.io/asuchi0819/debug/YzzpBMG/XBrGRqoqDRnM
見やすくないですか？
変わらなかったらすみません。
早速のご返信ありがとうございます。vw emという意味が全くわからないのですが、pxの部分をvw emに変えて設定してみればいいのでしょうか？ 例（"padding-right:5em;")ちょっとやってみますね。ありがとうございます。このように設定するとスマホの影響は受けずに済むんですね。
「受けにくい」というのが正しい表現です。
今回は質問者さんのコードを元にしているためサンプルでは5emで指定していますが1~2emあたりが良い気がします。
本当にすみません、ローカル開発という意味もわからず＾＾；今はVSコードというのを使っていて、そこにコードを書いてクロームで確認しながら作っています。それとお恥ずかしいのですが私ガラケーなので、スマフォで確認ができず・・。でも今のurlを見せていただいたら見やすくなってました！
:padding-right:2em; でまずはやってみますね＾＾ すみませんが、この「em」と「ｐｘ」はどういう風に違うのですか？すみません、何から何まで。
この場合の「ローカル」はサーバーなどに上げずにパソコン内だけで実行することを指しています。
サーバーなどはやっておりません、まだ初歩の初歩で＾＾；
まず、画面は小さな点（ライト）の集合体です。
その点が1つで1pxとなります。（最近は違ってきてますが）
対してemは親要素の文字の大きさ（font-size）を1とする単位です。
この場合はspanの親要素のpのfont-sizeが1となります。
pの親要素のbodyは既定ではブラウザのfont-sizeとなっています。
本当にご丁寧でわかりやすいです、ありがとうございます！今やってみました、「11em」で見本通りになりました。11という数値もかなり膨大ですよね？これはよくないでしょうか？
11文字分（ととりあえずは考えて下さい）の空白を開けるのであまりよろしくはないです。media screenでPCとスマホのCSSを分けるならまだわかりますが... まぁ現段階ではem値は小さめにした方が良いと思います。
よろしくないですか・・。なぜこのような現象が起きてしまうのでしょうか。細かいミスがどこかにあるということなのでしょうか？
「そういうもの」としか言いようがないです。
奥が深いんですね。確かに作っていて、なんでこうなるんだろう？という現象が何度もありました。参考にさせていただいて、その都度対処してみようと思います。emという言葉は初めて知ったので大変な収穫でした＾＾本当にありがとうございました。
ちなみに似たようなものにremがあります。違いは以下の通りです。
em : 親要素のfont-sizeを1とする
rem : ブラウザ既定のフォントサイズを1する。
https://codepen.io/asuchi0819/pen/OJJbqpZ?editors=1000#0
にわかりやすくまとめました。
すごくわかりやすいです！小数点も打てるんですね！初めて知りました＾＾1emがブラウザ既定のフォントサイズになるということは・・・・11emはかなりまずい数値ですよね・・・。今ずれてる項目箇所を全部emで直したんですが、最小で８、最大で11でした。なぜこうなるのか・・。
それは教材のコードを丸コピしたのですか？
そうですね！udemyという動画でその講師の先生がレクチャーをしてくれるんですよね。その通りに打ち込んでいくスタイルです。何度やりなおしてもその先生の通りにならないんですよね＾＾；なので自分でやってみようと思っていじってるうちに「madding-right」を使うしかなかったんです涙 詳細を質問したのですが回答がなかったので右往左往してたところだったんです涙
0
問題があるかないかといえば、HTMLやCSSのルール的には特に問題はありません。
どのようなデザインなのかわかりませんが、多くの場合、
フォームでは複数の項目があるのではと思います。
性別以外にも入力・選択項目があり、それらと合わせるのであれば、
paddingを設定するのではなく、
項目名に幅(width)を設定するほうが、項目名の幅が揃います。
下記は例です。
HTML
1<p> 2 <span class="ttl">名前</span> 3 <input type="text" name="name" value=""> 4</p> 5<p> 6 <span class="ttl">性別</span> 7 <label> 8 <input type="radio" name="sex" value="男性" checked>男性 9 </label> 10 <label> 11 <input type="radio" name="sex" value="女性">女性 12 </label> 13</p> 14
CSS
1.ttl { 2 display: inline-block; 3 width: 4em; 4}
投稿2019/10/21 04:17
総合スコア109
ｍ＿Oさんありがとうございます！あぁ！その手がありますね！！！幅！余白を造ることばかりに気をとられていました。なるほどです！ 参考になります！！あの・・１つうかがっていいでしょうか？「display: inline-block;」とはなんでしょうか？改行されず横並びになるためのものだったでしょうかね？まだまだ勉強が追い付かず・・すみません涙
htmlにはブロック要素とインライン要素のタグがあります。
例えば、divやpタグはブロック要素で、spanやaタグはインライン要素です。
ブロック要素は指定しなければ幅100%となり、その要素や次の要素は回り込みません（同じ行にならない）。
インライン要素は指定しなければ、中身の幅になり、次の要素がインライン要素であれば回り込みます。
display:inline-block;は、インライン要素をインライン要素のまま（次の要素を回り込ませる）幅を設定するために指定しています。
他の方法として、tableタグを使用したり、
ブロック要素を使用してCSSでfloatやflexを使う方法もありますが
段階的に学習していかれたら良いかと思います。
0
皆様本当にありがとうございました。こんなにも有益で沢山の情報を短時間にいただけるとは思っておりませんでした。udemyで講座を買い取ってそのレクチャー通りのコードを書いていたんですが、自分で変えてみて解決しました！このように変えました。
<p> <label> <span>性別</span> <input type="radio" name="sex" value="男性" checked>男性 </label> <label> <input type="radio" name="sex" value="女性">女性 </label> </p>上から三行目の<span>を<label>の中で括ったら解決しました。
本当にありがとうございました！
投稿2019/10/21 09:10
総合スコア11
解決してなによりです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/21 03:40
2019/10/21 03:45
退会済みユーザー
2019/10/21 03:54 編集
2019/10/21 04:04