1374322911 WEBページのコーディングをしているのですが、フォーム部分の文字を綺麗に並べられる方法はないでしょうか?


添付画像のように、奇麗に並べたいのですが
その方法がわからないです。

現在のサイトは、こちらです。
http://www.cresti.info/upload/upload.php

詳しい方がおりましたら、アドバイス頂けますでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/20 21:21:51
  • 終了:2013/07/24 13:51:44

ベストアンサー

id:Q-A No.4

Q-A回答回数106ベストアンサー獲得回数162013/07/21 08:07:59

ポイント174pt

#3さんと激しく被りますが、

font/alignなどのタグは、過去の遺物で現在は激しく非推奨です。htmlの修正案は以下の通り。

<div class="example">
<table border="1" bordercolor="#f39801">
<tr><td></td><TD>(「<strong>※</strong>」の項目は入力が必須です)</td></tr>
<tr><th>見積もり番号:</th><TD><input type="text" name="eid" value="" size="100%"><br>
(例)999999(「No.」は不要です。)</td></tr>
<tr><th><strong>※</strong>注文者名:</th><TD><input type="text" name="oname" value="" size="100%"><br>(例)株式会社クレストアイ 山田 太郎 (※最大30 文字程度)</td></tr>
<tr><th><strong>※</strong>メールアドレス:</th>
<TD><input type="text" name="oemail" value="" size="100%" /><br />
(例)yamada@xxxx.co.jp<br />
<strong>※</strong>ファイル選択ファイル名は<strong>半角英数</strong>でご入稿ください。</strong>:<br><input type="file" name="upfile" size="100%"><br />
(例)○ hanabi . zip  ○ hanabi . pdf<br />
 × 花火. zip   × 花火. pdf</td></tr>
<tr><td>
<tr><td></td><td><input type="submit" value="  送信  " ></td></tr>
</table>
</div>

上記をcssでデザインしていきます。
今回係わりのあるcssファイルはhttp://www.cresti.info/common/css/table.css
このtable.cssの下3行(.example table以下)を以下のように修正してお試しください。
.example table{ border: 1px #f39801 solid; font-size:80%;}
.example td{ border: 0px #f39801 solid;
text-align:left;/*左寄せ*/
vertical-align:top;/*上寄せ*/
line-height:1.6/*行送り*/
}
.example th{ border: none;padding-top:0.5em;background:#ffffff;text-align:left;vertical-align:top;
height:4em;/*項目の最低高さ。詰まりすぎると見難い印象だったので*/
font-weight:normal;/*thにすると文字が太くなります。今回は細い方がお好みかな?と*/
}
.example strong{/*font color(非推奨)をstrong(推奨)に変えました。*/
color:red;/*文字色を赤に*/
font-weight:normal;/*strongは太字が初期値ですので普通の太さに*/
}

他4件のコメントを見る
id:idetuyo

なぜかわかりませんが、タグ修正後、IE,chrome環境下にて、フォーム部分の右側したがの枠線が途中で切れてしまいます。

2013/07/22 17:51:25
id:idetuyo

余計なタグ 

が入っており、閉じておりませんでした。お騒がせいたしました。

2013/07/22 17:56:40

その他の回答(4件)

id:hissssa No.1

hissssa回答回数421ベストアンサー獲得回数1272013/07/20 21:46:54

ポイント40pt

TABLEで揃えればいいと思いますよ。タイトル部分と入力欄をテーブルの別セルに分ければOKです。
以下のような感じで:

<TABLE>
<TR><TD></TD><TD >説明1</TD></TR>
<TR><TD align="right">入力1:</TD><TD><input name="input1"/></TD></TR>
<TR><TD></TD><TD>説明2</TD></TR>
<TR><TD align="right">入力2:</TD><TD><input name="input2"/></TD></TR>
</TABLE>

上記のように、入力行のところのラベル部分と入力ボックス部分をテーブルの隣のセルに入れるようにすれば、自動的に列は揃います。行間の説明の所は、2つのセルの後ろだけに説明文を入れるようにすればOKです。

他2件のコメントを見る
id:idetuyo

ありがとうございます。0にしていしたら、枠線が消えました。ただ、なぜかセンタリングのままになって、うまく揃いません。おそらくCSSの指定が影響しているのだと思いますが。

とやっても、全く変わらずです。

2013/07/21 00:02:27
id:hissssa

CSSでアライメントがセンター指定されているせいでしょう。個別のセルでアライメントを上書きすれば良いかと思われます。
TDタグの属性として「align="left"」をつけてやれば、そのセルは左揃えになります。

2013/07/21 01:17:48
id:holoholobird No.2

holoholobird回答回数574ベストアンサー獲得回数1042013/07/20 22:07:01

ポイント40pt

見たところ、中央寄せを使用しているように見受けられます。
http://www.css5days.com/day05/form01.html
http://www.ne.jp/asahi/hatakeyama/design/csslayout/kowaza/index09.html

まず入力するテキストボックスのラベルについては、
float:left;
padding-left:15px;
width:200px;
入力するテキストボックスも同様に、
float:left;
padding-left:15px;
width:300px;

改行して何かしら文字を入力する場合は、
clear:both;したのちにpadding-left:15px;を指定。

ってな感じでやるとうまくいくと思います。

id:cno No.3

cno回答回数124ベストアンサー獲得回数122013/07/21 07:18:34

ポイント40pt

下記の手順でレイアウトに関する設定はCSSに統一、その後一部のCSSを修正されればよろしいかと思います。

1.テーブル内のレイアウトに関するタグはすべて除去
2.見積り番号:、※注文者名:などはヘッダなのでtdではなくthにする。
3.http://www.cresti.info/common/css/table.css
  の最下部のスタイル指定

.example table { border: 1px #f39801 solid; }
.example td { border: 0px #f39801 solid; }
.example th { border: 0px #f39801 solid; }



.example table { border: 1px #f39801 solid; }
.example td { border: 0px #f39801 solid;text-align:left; }
.example th { border: 0px #f39801 solid;text-align:right; }


でいかがでしょうか?

id:Q-A No.4

Q-A回答回数106ベストアンサー獲得回数162013/07/21 08:07:59ここでベストアンサー

ポイント174pt

#3さんと激しく被りますが、

font/alignなどのタグは、過去の遺物で現在は激しく非推奨です。htmlの修正案は以下の通り。

<div class="example">
<table border="1" bordercolor="#f39801">
<tr><td></td><TD>(「<strong>※</strong>」の項目は入力が必須です)</td></tr>
<tr><th>見積もり番号:</th><TD><input type="text" name="eid" value="" size="100%"><br>
(例)999999(「No.」は不要です。)</td></tr>
<tr><th><strong>※</strong>注文者名:</th><TD><input type="text" name="oname" value="" size="100%"><br>(例)株式会社クレストアイ 山田 太郎 (※最大30 文字程度)</td></tr>
<tr><th><strong>※</strong>メールアドレス:</th>
<TD><input type="text" name="oemail" value="" size="100%" /><br />
(例)yamada@xxxx.co.jp<br />
<strong>※</strong>ファイル選択ファイル名は<strong>半角英数</strong>でご入稿ください。</strong>:<br><input type="file" name="upfile" size="100%"><br />
(例)○ hanabi . zip  ○ hanabi . pdf<br />
 × 花火. zip   × 花火. pdf</td></tr>
<tr><td>
<tr><td></td><td><input type="submit" value="  送信  " ></td></tr>
</table>
</div>

上記をcssでデザインしていきます。
今回係わりのあるcssファイルはhttp://www.cresti.info/common/css/table.css
このtable.cssの下3行(.example table以下)を以下のように修正してお試しください。
.example table{ border: 1px #f39801 solid; font-size:80%;}
.example td{ border: 0px #f39801 solid;
text-align:left;/*左寄せ*/
vertical-align:top;/*上寄せ*/
line-height:1.6/*行送り*/
}
.example th{ border: none;padding-top:0.5em;background:#ffffff;text-align:left;vertical-align:top;
height:4em;/*項目の最低高さ。詰まりすぎると見難い印象だったので*/
font-weight:normal;/*thにすると文字が太くなります。今回は細い方がお好みかな?と*/
}
.example strong{/*font color(非推奨)をstrong(推奨)に変えました。*/
color:red;/*文字色を赤に*/
font-weight:normal;/*strongは太字が初期値ですので普通の太さに*/
}

他4件のコメントを見る
id:idetuyo

なぜかわかりませんが、タグ修正後、IE,chrome環境下にて、フォーム部分の右側したがの枠線が途中で切れてしまいます。

2013/07/22 17:51:25
id:idetuyo

余計なタグ 

が入っており、閉じておりませんでした。お騒がせいたしました。

2013/07/22 17:56:40
id:oroura No.5

oroura回答回数7ベストアンサー獲得回数02013/07/21 16:33:54

ポイント12pt

まず、問題部分のフォーム内の指定を以下のようにすれば解決できるかも。。。
1.rightからleftにすべて変換。
2.ただし、最後の送信ボタンだけは、centerにする。
3.送信ボタンの場所はセルの結合colspan="2"を入力
以上の3つでうまくいけばできます。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません