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

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

●質問者: wintarsnow
●カテゴリ:ウェブ制作
✍キーワード:CSS サイト スタイル ズバリ セル
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● tanpa
●20ポイント

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

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

div.hoge {

width: 400px;

height: 60px;

background-color: #4488EE;

padding-top:18px;

}

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

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

◎質問者からの返答

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

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

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


2 ● html1983
●5ポイント

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>

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

http://www.cybergarden.net/

CYBER@GARDEN

◎質問者からの返答

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

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


3 ● わかん
●5ポイント

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

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

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

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

writing-mode: tb-rl;

◎質問者からの返答

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

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

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


4 ● tanpa
●20ポイント

1のtanpaです。

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

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

強引な方法として

div.hoge {

width: 400px;

height: 60px;

background-color: #4488EE;

}

.vcenter {

position:relative;

margin:0;

top: 20px;

height: 20px;

}

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

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

◎質問者からの返答

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

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

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


5 ● k_ahiru
●40ポイント

http://user.script.nu/~ahiru/table.html

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

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

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

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

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

◎質問者からの返答

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

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

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

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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