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

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

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

MEL (Maya Embedded Language) とはAutodesk Mayaで利用されるスクリプト言語です。

CSS3

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

HTML5

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

メール

メールは、コンピュータネットワークを利用し、 情報等を交換する手段のことです。

HTML

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

Q&A

1回答

525閲覧

formが揃わない、、、。

shioazi0131

総合スコア4

MEL

MEL (Maya Embedded Language) とはAutodesk Mayaで利用されるスクリプト言語です。

CSS3

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

HTML5

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

メール

メールは、コンピュータネットワークを利用し、 情報等を交換する手段のことです。

HTML

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

0グッド

1クリップ

投稿2019/10/02 12:57

今ホームページの作成をしているのですが、注文のメールフォームを作成の際
textboxが揃わず不恰好で困っています。
お力添えをお願いしたいです。

現段階のformのhtml

<cente><form action="#">

<dl> <dt>名前:</dt> <dd><input type="text" name="name" size="50" class="dai align"></dd> <dt>法人名:</dt> <dd><input type="text" name="name" size="60" class="dai align"></dd> <dt>メールアドレス</dt> <dd><input type="email" name="mail" size="60" class="syou align"></dd> <dt>メールアドレス確認用</dt> <dd><input type="email" name="mail" size="60" class="syou align"></dd> <dt>郵便番号:</dt> <dd><input type="text" name="zip22" class="form_text-small syou align"> - <input type="text" name="zip22" class="form_text-small syou align" onkeup="AjaxZip3.zip2addr('zip2','zip22','addr21','addr21');"> </dd><br> <dt>都道府県</dt> <dd><input type="text" name="addr21" class="form_text syou align"></dd> <dt>TEL</dt> <dd><input type="text" name="TEL" size="40" class="syou align"></dd> <dt>FAX</dt> <dd><input type="text" name="FAX" size="40" class="syou align"></dd> <dt>ご注文</dt> <dd><input type="text" name="suzi" size="30" class="syou align"></dd> <dt>備考欄 その他特記事項がございましたら記入してください</dt> <dd><texarea name="kanso" rows="10" cols="60" class="align"></textarea></dd> </center> </form>

css 下記

form{
width:900px;
padding:30px 50px;
}
form dl dt{
width: 165px;
padding: 10px 0;
float:left;
clear: both;
}
input.dai{
height:25px;
margin-top: 10px;
margin-bottom: 10px;
}
input.syou{
height: 15px;
margin-top: 15px;
margin-bottom: 15px;
}
form{
padding: 10px 0;
}

element.style{
padding-top: 300px;
}

以上がformについてかいたコードになります。
調べ持って色々付け足してとしていくうちによくわからなくなりました、、、。
大変見にくいかとは思いますが知恵をお貸し頂ければと思います。

全フォーム表示はされますが、入力されるボックスが先頭がバラバラなのを揃えたいです。

<dt>の部分は先頭全て揃っております。

よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2019/10/02 20:17

コードはマークダウンのcode機能を利用してご提示ください
Lhankor_Mhy

2019/10/05 01:55

「入力されるボックスが先頭がバラバラ」とのことですが、ご提示のコードを当方で試したところ、そろっているように見えました。なので、問題が再現しません。
guest

回答1

0

centerタグを書いているので、バラバラになってしまいます。
今、centerタグを使うことはまずないです。<div>にスタイルを設定して、marginでform全体をcenterに来るようにした方が良いかと思います。

<div style="margin:0 auto; width:◯◯◯px;"> <form> ... </form> </div>

該当のソースで修正すればこんな感じです。

CSS

1center { 2 text-align:left; /* 左寄せにする */ 3} 4form{ 5width:900px; 6padding:30px 50px; 7} 8form dl dt{ 9width: 165px; 10padding: 10px 0; 11float:left; 12clear: both; 13} 14input.dai{ 15height:25px; 16margin-top: 10px; 17margin-bottom: 10px; 18} 19input.syou{ 20height: 15px; 21margin-top: 15px; 22margin-bottom: 15px; 23} 24form{ 25padding: 10px 0; 26} 27 28element.style{ 29padding-top: 300px; 30}

html

1<center> 2 <form action="#"> 3 <dl> 4 <dt>名前:</dt> 5 <dd><input type="text" name="name" size="50" class="dai align"></dd> 6 <dt>法人名:</dt> 7 <dd><input type="text" name="name" size="60" class="dai align"></dd> 8 <dt>メールアドレス</dt> 9 <dd><input type="email" name="mail" size="60" class="syou align"></dd> 10 <dt>メールアドレス確認用</dt> 11 <dd><input type="email" name="mail" size="60" class="syou align"></dd> 12 <dt>郵便番号:</dt> 13 <dd><input type="text" name="zip22" class="form_text-small syou align"> 14 <input type="text" name="zip22" class="form_text-small syou align" onkeup="AjaxZip3.zip2addr('zip2','zip22','addr21','addr21');"> 15 </dd> 16 <dt>都道府県</dt> 17 <dd><input type="text" name="addr21" class="form_text syou align"></dd> 18 <dt>TEL</dt> 19 <dd><input type="text" name="TEL" size="40" class="syou align"></dd> 20 <dt>FAX</dt> 21 <dd><input type="text" name="FAX" size="40" class="syou align"></dd> 22 <dt>ご注文</dt> 23 <dd><input type="text" name="suzi" size="30" class="syou align"></dd> 24 <dt>備考欄 その他特記事項がございましたら記入してください</dt> 25 <dd><textarea name="kanso" rows="10" cols="60" class="align"></textarea></dd> 26 </dl> 27 </form> 28</center>

投稿2019/10/07 11:04

pinoko

総合スコア127

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問