※ ChatGPTを利用し、要約された質問です（原文：入力フォームの上の文字の位置を変更したいです）
入力フォームの上の文字の位置を変更したいです
このQ&Aのポイント
入力フォームの上の文字の位置を変更したいです。Webの中央に配置した場合、入力フォームの左下に文字を配置したいです。
現在は入力フォームの上に文字が表示されていますが、付属画像のように入力フォームの左下に配置したいです。
文字を左に配置するだけであればできますが、入力フォームの左下に配置する方法がわかりません。どうすればよいでしょうか？
入力フォームをWebの中央に配置した場合、入力フォームの上にある文字の位置を、付属画像のように入力フォームの左下に配置したいのですが、上手くいきません。ただ、文字を左に配置するだけならできるのですが、付属画像のように入力フォームの左下に配置する方法が分かりません。どうしたらよいでしょうか？
以下がコードになります。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"/>
<title>お問い合わせ</title>
<link rel="stylesheet" href="syoki.css">
<style>
/* 入力フォームの位置 */
h2{
text-align: center;
font-size: 22px
}
.auto-style1 {
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<form action ="hpform1.php" method ="post">
<div class="auto-style1">
<h2>名前：※</h2>
<input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/>
<h2>フリガナ：※</h2>
<input type="text" class="furigana" name="furigana" id="furigana" value="<?php if(isset($furigana)){ echo $furigana; } ?>"/>
<span colspan="2"><input type ="submit" name ="submit"value="確認画面へ"></span>
</form>
</body></html>
◎◎（syoki.css)◎◎
/* 入力フォームのスタイル */
#name {
border: 2px solid #63e02d; /* 枠線 */
padding: 0.5em; /* 内側の余白量 */
background-color: snow; /* 背景色 */
width: 27.8em; /* 横幅 */
height: 36px; /* 高さ */
font-size: 1em; /* テキスト内の表示文字サイズ */
line-height: 1.2; /* 行の高さ */
}
#furigana {
border: 2px solid #63e02d; /* 枠線 */
padding: 0.5em; /* 内側の余白量 */
background-color: snow; /* 背景色 */
width: 27.8em; /* 横幅 */
height: 36px; /* 高さ */
font-size: 1em; /* テキスト内の表示文字サイズ */
line-height: 1.2; /* 行の高さ */
text-align: center;
}
お礼
ありがとうございました。そうなんですね。