CSSの質問です。

今までテーブルでレイアウトしていたサイトをCSSで作り直したいと思い勉強しながらやっています。
それで、幅400×高さ60のテーブルに背景色を設定し、フォームのテキストボックスとボタンを、セルの縦中央に配置するのと同じ見た目をテーブルタグを使わず実現するにはどのようにスタイル組めば良いでしょうか。
ズバリの回答か、良いヒントになるサイトがありましたら教えて下さい。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/09/10 20:23:41
  • 終了:--

回答(6件)

id:tanpa No.1

tanpa回答回数72ベストアンサー獲得回数02004/09/10 21:54:30

ポイント20pt

http://tohoho.wakusei.ne.jp/css/index.htm

そのファイルは現在ありません

div.hoge {

width: 400px;

height: 60px;

background-color: #4488EE;

padding-top:18px;

}

こんな感じでどうでしょうか?

指定にvalignのようなモノはありませんので上からのスペースをpadding-topで指定しています。

id:wintarsnow

回答ありがとうございます!

なるほど、paddingで指定するという方法があるのですね。

やってみましたらだいたい真ん中に来ました。でも18pxという数字はどこから計算するのでしょうか?

2004/09/10 22:14:33
id:html1983 No.2

html1983回答回数72ベストアンサー獲得回数02004/09/10 21:58:12

ポイント5pt

http://www.htmq.com/index.htm

HTMLクイックリファレンス

↓こんな感じでいかがでしょうか。

<html>

<head>

<STYLE TYPE=”text/css”>

.input-area {

width: 400px;

height: 60px;

background-color: #ccccff;

text-align: center;

}

</STYLE>

</head>

<body>

<div class=”input-area”>

<form action=”#” method=”get”>

<input type=”text” size=”40” name=”my_text”>

</form>

</div>

</body>

</html>

ついでに私がいつも参考にしているサイトをご紹介します。

id:wintarsnow

回答ありがとうございます。

でもtext-alignですと横(水平方向)中央ですよね? 横ではなく「縦(垂直方向)」中央にしたいのです。

2004/09/10 22:18:42
id:wakan No.3

わかん回答回数98ベストアンサー獲得回数02004/09/10 22:25:40

ポイント5pt

他の回答を見た所、「縦書き」をやりたいんですか?

コレってブラウザ依存、ハッキリ言うと MSIE 5.5、6.0

でしか表示できないものになってしまいますが。

それでもイイのなら、次の設定を追加です。

writing-mode: tb-rl;

id:wintarsnow

回答ありがとうございます。

いえ、縦書きではなく普通に横書きです。そもそも中央にしたいのはフォームのテキストボックスとボタンですので…。

私のコメントが何か誤解を招く部分があったようで、失礼致しました。

2004/09/10 22:35:19
id:tanpa No.4

tanpa回答回数72ベストアンサー獲得回数02004/09/10 22:30:16

ポイント20pt

1のtanpaです。

18pxの根拠ですが、こればかりは見ながら調整するしか無いと思います。

テキストボックスやボタンのサイズがブラウザによって異なる場合があるからです。

強引な方法として

div.hoge {

width: 400px;

height: 60px;

background-color: #4488EE;

}

.vcenter {

position:relative;

margin:0;

top: 20px;

height: 20px;

}

↑input要素に適用してください。

これは微妙でしょ?(^^;

id:wintarsnow

ご返答ありがとうございます。

やはり見ながら調整なのですね。

強引な方法はやってみましたらSafariでは驚くくらいビシッときっちり中央になりましたが、Mac版IE5ではボックスからフォームのテキストボックスがはみ出してしまいました。強引なだけあってブラウザ解釈の差が大きそうですね…。

2004/09/10 22:54:30
id:k_ahiru No.5

k_ahiru回答回数23ベストアンサー獲得回数02004/09/10 22:37:16

ポイント40pt

長くなったので↑のURLを開いてください。

個人的には、ムリに table を使わないよりか、

CSSとtable を使ったほうがシンプルにできるかなあとは思いますが。

http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm

スタイルシート 縦中央(垂直中央)

id:wintarsnow

回答ありがとうございます!

下のURLは知ってましたが、上のはとても参考になりました。

>CSSとtable を使ったほうがシンプルにできるかなあと

はい、CSSのみでの実現が複雑だったらそうしようと思っています。

2004/09/10 23:00:08
id:sight No.6

sight回答回数69ベストアンサー獲得回数12004/09/10 22:49:39

ポイント40pt

これでどうでしょう?

<STYLE type=”text/css”>

div.input {

width: 400px;

line-height: 60px;

background-color: #DDDDDD;

border: solid 1px;

</STYLE>

id:wintarsnow

回答ありがとうございます!

line-heightを使う手もあるのですね。

これもほぼ中央になりました!

ただMacIE5だとボタンにもline-heightが適用されてしまうので、工夫が必要になりますね。

--

色々方法が得られて助かりました!皆様ありがとうございました。

2004/09/10 23:10:59

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

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

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

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

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