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

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

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

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

2回答

1640閲覧

レスポンシブデザイン フォームが中央に配置されないものがある。

ghtew2

総合スコア245

CSS3

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/05/15 09:14

編集2021/05/16 12:13

実現したいこと
画面幅(〜480px)までのスマホのレスポンシブ対応のコードを書いているのですが、初心者なのでまずこれ1つから。
入力フォームをスマホの横幅いっぱいにして、中央に配置させるコードを書いているのですが上手くいきません。phpのフォイルにHTMLのコードを書いて、CSSのコードとスタイルシートで別にも書いてあります。
クロームでレスポンシブを確認する機能を使って確認しているのですが、横幅414の大きさは丁度真ん中配置されているのですが、それ以外の横幅360、320,375など、付属画像のようにフォームの横幅がいっぱいにならず、ずれてしまって困っています。

入力フォームの名前のフォーム1つだけならきちんとレスポンシブ対応きちんと適応されます。しかし、名前のフォーム以外に「フリガナ」「電話番号」のHTMLとCSSをコードに追加すると、付属画像のようにレスポンスがおかしくなってしまいます。

試したこと
レスポンシブ対応のCSSコードにwitdh100%と記載した入力フォームと記載していない入力フォームをクロームのレスポンシブ確認画面で比べてみたのですが、witdh100%と書いたフォームは確かに真ん中の配置に近くなっています。witdh100%と書いていないフォームは全然はみ出ていましたので、適応されていないはずはないと思うのですけども。途方に暮れています。

質問してから再度試したこと
確かに回答に下さった通り、提示したコードでレスポンシブ対応はきちんとされていました。しかし、複数入力フォームがあるのですが、名前を入力するフォームのみなら、phpコード内にあるHTMLとCSSでレスポンシブ対応はきちんとなりました。しかし、名前のフォーム以外にも「フリガナ」「電話番号」のHTMLとCSSをコードに追加すると、付属画像のようにレスポンスがおかしくなってしまいます。
PHPのコードに新たに、「フリガナ」「電話番号」のHTMLと、CSSのコードにそのデザインのコードを追加しました。

付属画像
411pxの画像 OK
イメージ説明

ずれている
イメージ説明
ずれている
イメージ説明
ずれている
イメージ説明

php

1<?php 2session_start(); 3 4$errors = array(); 5if(isset($_POST['submit'])) { 6$name = $_POST['name']; 7 8if($name === "") { $errors['name'] ="名前が入力されていません。 "; 9} 10if(count($errors) === 0) { 11$_SESSION['name'] = $name; 12 13header('Location:http://△△'); 14 exit(); 15 } 16} 17if(isset($_GET['action']) && $_GET['action'] === 'edit'){ 18$name = $_SESSION['name']; 19 } 20?> 21 22<!DOCTYPE html> 23 24<html> 25 26<head> 27<meta content="text/html; charset=utf-8"/> 28<meta name="viewport" content="width=device-width, initial-scale=1"> 29 <title>お問い合わせ</title> 30 <link rel="stylesheet" href="syoki.css"> 31 <link rel="stylesheet" href="responsive.css"> 32 33 <style> 34 35 /* 入力フォームの位置 */ 36 .auto-style1 { 37 margin: auto; 38 text-align: center; 39 } 40</style> 41<?php echo "<ul>";foreach($errors as $value) { 42 43echo "<li>"; 44echo $value; 45echo "</li>"; 46} 47 48echo "</ul>"; 49?> 50 51</head> 52<body> 53 54<form action ="hpform1.php" method ="post" class="auto-style1"> 55 56 <div class="auto-style1"> 57 58 <p class="px-num"> 59名前:※ 60 </p> 61<input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/> 62 63<p class="px-num"> 64 フリガナ:※ 65 </p> 66 <input type="text" class="furigana" name="furigana" id="furigana" value="<?php if(isset($furigana)){ echo $furigana; } ?>"/> 67 68 <p class="px-num"> 69 電話番号:※ 70 </p> 71 72 <input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>"/> 73 </div> 74 75 <div class="enter"> 76 77 <button type="submit" name ="submit" class="auto-style4" height="230px" width="813"> 78 <img src="enter.png" alt="確認画面へ" class="auto-style3" height="230px" width="813"/></button> 79 </div> 80</form> 81 </body></html> 82 83 84

cssのコード(syokicss)

css

1/* 入力フォームのスタイル */ 2#name { 3 4 border: 3px solid #63e02d; /* 枠線 */ 5 background-color: snow; /* 背景色 */ 6 width: 29.3em; /* 横幅 */ 7 height: 56px; /* 高さ */ 8 font-size: 1em; /* テキスト内の表示文字サイズ */ 9 line-height: 1.2; /* 行の高さ */ 10 box-sizing: border-box; 11} 12#furigana { 13 14 border: 3px solid #63e02d; /* 枠線 */ 15 padding: 0.5em; /* 内側の余白量 */ 16 background-color: snow; /* 背景色 */ 17 width: 27.8em; /* 横幅 */ 18 height: 36px; /* 高さ */ 19 font-size: 1em; /* テキスト内の表示文字サイズ */ 20 line-height: 1.2; /* 行の高さ */ 21 box-sizing: border-box; 22} 23 24#tel { 25 26 border: 3px solid #63e02d; /* 枠線 */ 27 padding: 0.5em; /* 内側の余白量 */ 28 background-color: snow; /* 背景色 */ 29 width: 27.8em; /* 横幅 */ 30 height: 36px; /* 高さ */ 31 font-size: 1em; /* テキスト内の表示文字サイズ */ 32 line-height: 1.2; /* 行の高さ */ 33}

cssのレスポンシブ対応コード(responsive.css) 

css

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}

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

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

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

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

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

itagagaki

2021/05/15 09:39

わかりませんが、試しに #name に max-width: 100%; を入れてみてください。
ghtew2

2021/05/15 12:16

回答ありがとうございます。変化ないです。
itagagaki

2021/05/15 12:52

私も質問のコードをそのままファイルにしてApache経由でChromeやEdgeのレスポンシブ確認画面でチェックしてみました。ズレも余白もありませんでしたよ?
ghtew2

2021/05/15 13:26

そうなんですか?ありがとうございます。実機でも試して見ます。パソコンにも原因があるかもしれませんね。調べて見ます。 回答ありがとうございます。
gpsoft

2021/05/15 15:24

ちなみに、 submitボタンの中にあるimg要素にwidth="813"が付いてますが、意図したものですか?
ghtew2

2021/05/15 20:41

回答ありがとうございます。そうですね。パソコン用だと,大きさが丁度よいです。
mari.rinn

2021/05/15 22:04 編集

.auto-style1のmarginが現在はautoになってますが、通常、中央寄せする場合は、margin:0 auto;のように、上下の値は指定する形にするのが普通なので、そのようにしてみるとどうですか?更にinputにもそれをつけてみられたらどうでしょうか?
ghtew2

2021/05/16 12:16

回答ありがとうございます。つけてみても変わりませんでした。しかし、以下のことがわかりました。入力フォームの名前のフォーム1つだけならきちんとレスポンシブ対応きちんと適応されていました。。しかし、名前のフォーム以外に「フリガナ」「電話番号」のHTMLとそのCSSのデザインをコードに追加すると、付属画像のようにレスポンスがおかしくなってしまいます。 「フリガナ」「電話番号」のHTMLとそのCSSのデザインのコードに新たに追加しました。
guest

回答2

0

#furigana#telが画面幅を超えています。Chromeでは全体が入るように表示しちゃっていて、その分#nameの右に余白ができたように見えています。

投稿2021/05/16 12:33

itagagaki

総合スコア8402

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

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

ghtew2

2021/05/16 12:52

ありがとうございございます。telの長さも全部同じ(提示通りのコードでもレスポンシブ対応になりました。box-sizing: border-box;/* 追加 */margin:0 auto;/* 追加 */ text-align: center;/* 追加 */ でなりました。 一応真ん中にはきました。ただ、ご指摘の通り、フォーム結構大きいですね。また、調節してみます。 回答ありがとうございました。
guest

0

自己解決

回答ありがとうございました。解決できました。なぜか、入力フォームのHTMLとCSSを項目ごとにひとつ貼り付けしなおしたらレスポンシブ対応になりました。

コードも回答くださった方の通りでした。
フォームのデザインのCSS 名前(#nameも同様のコード)でなりました。
#furigana {
margin:0 auto;/* 追加 /
text-align: center;/
追加 /
border: 3px solid #63e02d; /
枠線 /
padding: 0.5em; /
内側の余白量 /
background-color: snow; /
背景色 /
width: 27.8em; /
横幅 /
height: 36px; /
高さ /
font-size: 1em; /
テキスト内の表示文字サイズ /
line-height: 1.2; /
行の高さ /
box-sizing: border-box;/
追加 */

/* 追加 */の部分1つでも足りないと、レスポンシブ対応にはなりませんでした。

クロームも一度再インストールも試してみました。

投稿2021/05/16 12:47

編集2021/05/16 12:53
ghtew2

総合スコア245

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問