CSSを使ったformの組み方

添付のようなかたちでformとテキストを配置したいのですが、
どのようにすればよいか分かりません。

何卒ご教示ください。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/10/31 18:52

　あなたがHTMLをどのようにマークアップされたかが、わからないのでアドバイス不能なのですが、基本的な考え方は

　送信はボタンは、そのフォームの中ないし外の、その送信ボタンの含まれるコンテナブロックをposition:relativeなど、static以外に指定してから、送信ボタンを絶対配置すれば良いです。


たとえば
<div class="section">
＿<h2>見出し</h2>
＿<form action="">
＿＿<table summary="formTable"
＿＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="title">項目</th><th abbr="content">内容</th><th class="note">注意</th>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="article">記事</th>
＿＿＿＿＿<td><textarea cols="30" rows="20" name="text"></textarea></td>
＿＿＿＿＿<td>この欄には、お気づきの点を何なりと自由にお書きください。</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="送信">送信</th><td><input type="submit" value="送信"></td><td></td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿<table>
＿</form>
</div>
と、ごく一般的なフォーム用のtableで、マークアップされていたとします。
・・・スタイルシートを適用させる前に確認する・・・

これを、提示された形にデザインしようとすると、スタイルシートは

table[summary="formTable"]{border-collapse:collapse;position:relative;}
table[summary="formTable"] tr{display:none;}
table[summary="formTable"] tr + tr{display:table-row;}
table[summary="formTable"] th,table[summary="formTable"] td{vertical-align:top;}
table[summary="formTable"] td + td{text-indent:1em;padding:0.2em 0.5em;font-size:0.9em;}
table[summary="formTable"] th[abbr="送信"]{display:none;}
table[summary="formTable"] tr{height:0;}
table[summary="formTable"] td input[type="submit"]{visibility:visible;position:absolute;right:5px;bottom:5px;width:13em;}
/* わかりやすいように幅を指定しておく */
table[summary="formTable"] th{width:6em;}
table[summary="formTable"] th + td + td{width:12em;}

のように書きます。HTMLのマークアップを見て、どこをどのようにデザインするかをセレクタとプロパティで、例のように指定します。スタイルの書き方は、あなたのHTMLに合わせてください。HTMLをデザインにあわせるのではありません。

　HTMLとスタイルシートは独立しているものなので、将来、他のデザインにするときはスタイルシートだけ書き換えたらすみます。

この回答へのお礼

大変詳細にご解説いただき、誠にありがとうございます。
とても分かり易く助かりました。

お礼日時：2012/11/12 08:43

No.1 回答者： noname#164113 回答日時： 2012/10/31 11:25

画像を添付したのでしょうが、真っ白で解析不能です。

再度、投稿してください。

この回答へのお礼

大変失礼いたしました。

以下からご確認可能でしょうか？
http://uploda.cc/img/img5090e6fd5a91d.jpg

お礼日時：2012/10/31 17:54