人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

1374322911
●拡大する

●質問者: idetuyo
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● hissssa
●40ポイント

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です。


idetuyoさんのコメント
ありがとうございます。今、試してみたのですが、内側の線が出ていまいました。内側の線を非表示にしたいと思いますが、どのようなタグを使ったら良いのでしょうか?もしご存知でしたらご教授いただけますでしょうか?

hissssaさんのコメント
恐らく、ご自分で作成されたテーブルを上記のように改修されたのだと思いますが、そのテーブルに「border="1"」が指定されているのが原因でしょう。border指定により、セルの枠線が表示されるようになります。

idetuyoさんのコメント
ありがとうございます。0にしていしたら、枠線が消えました。ただ、なぜかセンタリングのままになって、うまく揃いません。おそらくCSSの指定が影響しているのだと思いますが。<TD align="left">とやっても、全く変わらずです。

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

2 ● holoholobird
●40ポイント

見たところ、中央寄せを使用しているように見受けられます。
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;を指定。

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


3 ● cno
●40ポイント

下記の手順でレイアウトに関する設定は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; }


でいかがでしょうか?


4 ● Q-A
●174ポイント ベストアンサー

#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は太字が初期値ですので普通の太さに*/
}


idetuyoさんのコメント
ありがとうございます。このソースを利用させていただますm(_ _)m

idetuyoさんのコメント
おはようございます!早速、適用させてみました。綺麗に整いまして、満足しております。本当にありがとうございます。

cnoさんのコメント
細かい点で恐縮ですが、「ご入稿くださいの後ろ」のstrongの閉じタグが不要なところと、 input のfileでsizeが(画面幅の)100%となっているため、レイアウトが (ファイル入力フォームが広がって)崩れているみたいです (Firefoxで確認)

idetuyoさんのコメント
なんと、ご指摘ありがとうございます。今、不要なストロングタグを省いて、100%を50%に変更してみました。特にフォームの崩れはfirefoxでは見受けられませんが、いかがでしょうか?お手数ではございますが、同環境でのブラウザでもご確認いただけますでしょうか?

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

idetuyoさんのコメント
余計なタグ <tr><td>が入っており、閉じておりませんでした。お騒がせいたしました。

5 ● oroura
●12ポイント

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ