Q&A
PHPコードを下手に気にして手動で削るくらいならブラウザの「ソースを表示」で得られるHTMLをコピペで提示されたほうが良いです。
↓とか
<input type="text" class="name" name="name" id="name" value="/>
実現したいこと
入力フォームをスマホの端から端まで表示したいのですが、
ブラウザのCHROMEの画面の幅を360pxにしてみたのですが、@media (max-width:480px;)の欄に書いたCSSが反映されません.
レスポンシブの対応の記述に挑戦するのは初めてになります。今までは小型PC用にデザインしていました。表示コードのＣＳＳなのですが、#name{がなぜかきちんと文字に表示されないので、斜め表記？になっています。テキストエディタではきちんとなっています。
付属画像がブラウザのCHROMEの画面の幅を360pxにしてみた表示画面ですが、フォームが真ん中にくるどころか、全然さっぱりおかしな位置になってしまいます。
試したこと。
<meta name="viewport" content="width=device=width, initial-scale=1">が正しく書けているか。
responsive cssのコードにwidth１００％を追加してみたのですが、フォームが全然はみ出ています。
フォームを真ん中に配置するｃｓｓmargin: auto;
text-align: center;も追加してみましたが、全然真ん中になっていません。
ちなみにresponsive cssのコードを全部消し、ブラウザのCHROMEの画面の幅を確認してみるとすべて入力フォームは真ん中になっています。幅いっぱいにならなくて、小さく表示されていますが、、、、
html
1<!DOCTYPE html> 2 3<html> 4 5<head> 6<meta content="text/html; charset=utf-8"/> 7<meta name="viewport" content="width=device=width, initial-scale=1"> 8 <title>お問い合わせ</title> 9 <link rel="stylesheet" href="syoki.css"> 10 <link rel="stylesheet" href="responsive.css"> 11 12 <style> 13 /* 入力フォームの位置 */ 14 .auto-style1 { 15 margin: auto; 16 text-align: center; 17 } 18</style> 19 20</head> 21<body> 22<form action ="hpform1.php" method ="post" class="auto-style1"> 23 24 <div class="auto-style1"> 25 <p class="px-num"> 26名前：※ 27 </p> 28<input type="text" class="name" name="name" id="name" value=""/> 29 30</div> 31 32 33</form> 34 </body></html> 35
◎◎ｃｓｓ（syokicsss)
php
1/* 入力フォームのスタイル */ 2 3 4 #name{ 5 border: 3px solid #63e02d; /* 枠線 */ 6 padding: 0.5em; /* 内側の余白量 */ 7 background-color: snow; /* 背景色 */ 8 width: 27.8em; /* 横幅 */ 9 height: 36px; /* 高さ */ 10 font-size: 1em; /* テキスト内の表示文字サイズ */ 11 line-height: 1.2; /* 行の高さ */ 12 13}
◎◎（responsive css)レスポンシブ対応のcss
php
1/* 画面幅（〜480px以下の時までの適応）指定 */ 2@media screen and (max-width : 480px){ 3 #name { 4 5 width: 100%; 6 7 } 8 9} 10.auto-style1{ 11width:100%; 12margin: auto; 13 text-align: center; 14}
そうですね。chromeの右側に出て検証って文字小さくて見づらいです。
ん コード調整してもらえると思ったのですが、しないですか？
このコードコピペだとそもそもHTMLおかしいままですよ。
ソールコードの検証だと、全部コード出てくるのですが、一部を抜き出すということでしょうか？ソースコード検証使ったことなくて
でしたら、手元のコードコピペでいいですよ。
半端なものより１００倍マシです。
いずれにしても「コピペで他者が現象再現できるコード」であれば、どんなものでも。「再現できないし別の問題があるコード」だから指摘しています。
回答遅れました。一応直しておきました。字数オーバーしたちゃうかもしれなかったのと、あと、ソースコード短い方が回答つきやすいような気がしたので。
回答1件
0
ベストアンサー
html
1<meta name="viewport" content="width=device=width, initial-scale=1">
contentの中身を修正したら効くようになるかも？
device-width、イコールじゃなくてハイフンじゃないかなぁと。
投稿2021/05/14 09:48
退会済みユーザー
総合スコア0
ありがとうございます。間違っていました。見落としていました。一つ聞きたいのですが、ご指摘の通りコード直して、スマホで見てみたのですが、スマホの幅定規で１センチくらいはみ出ているのですが、こんなものなのでしょうか？クロームで横幅他の大きさでも確認してみましたが、真ん中には来ているのですが、１センチくらい横幅がはみ出ている気がします。
box-sizing: border-box;
というものがありますので、それをinputに当ててあげると良いかと思います。
paddingのコメントに「内側の余白量」とありますが、
box-sizing: border-box;を付けておかないと外側へ広がりますので大きくなります。
おまけですが、
<input type="text" class="name" name="name" id="name" value="/>
valueの後ろの"が１つ足らないのでHTMLが崩れます。
お手元のコードを確認していただいて１つしか無いようであれば足してあげてくださいね。
蛇足ですが最後の/（スラッシュ）は無くても動きます。
ざっくり説明すると古い書き方の名残です。
ありがとうございます。そうなんですね。一応自分でも大きさの違う端末で画面確認してみました。少し幅大きかったような感じがしました。box-sizing: border-box;。ありがとうございます。やってみます。
あなたの回答
tips
プレビュー
