「これはヤバかったな」という遅刻エピソード

スタイルシートのみで表の作成

締切済

  • 質問者：mahhhhh
  • 質問日時：
  • 回答数：6件

よくある、「サービスにログインするときのパスワード、ＩＤ入力画面」というものを作ってます。
パスワード、テキストフィールド
ＩＤ、テキストフィールド
ログインボタン
のような。

たとえば簡単にテーブルで組みますと、

<table width="400" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="100">パスワード</td>
<td><label>
<input type="text" name="textfield" />
</label></td>
</tr>
<tr>
<td>ＩＤ</td>
<td><input type="text" name="textfield2" /></td>
</tr>
<tr>
<td colspan="2" align="center"><label>
<input type="submit" name="Submit" value="ログイン" />
</label></td>
</tr>
</table>

似たり寄ったりこんな感じだとします。

これと同等のものを、スタイルシートだけで作成できますか？
たとえば、ソースは、


<dl id="LOGIN-FORM">
<dt class="loginFormLabel" id="USER-NAME-LABEL">
<label for="USER-NAME">ユーザ名</label>
<input type="text" name="username" size="24" value="" id="USER-NAME" class="inputText" />
</dt>
<dt class="loginFormLabel" id="USER-PASSWORD-LABEL">
<label for="USER-PASSWORD">パスワード</label>
<input type="password" name="password" size="24" value="" onmousedown="" onkeydown="if (event.keyCode == 13) {enter.click();return false;}" id="USER-PASSWORD" class="inputText" />
</dt>
<dt class="loginFormLabel" id="USER-INFO-SUBMIT-LABEL">
<label for="USER-INFO-SUBMIT">アクション</label>
</dt>
<dd class="loginFormText" id="USER-INFO-SUBMIT-TEXT">
<input type="submit" value="ログイン" id="USER-INFO-SUBMIT" class="submit" />
</dd>
</dl>
です。

テキストフィールドの頭をそろえたり、ログインボタンの位置を
変えたりしたいです。

テーブルでやればいいのに・・・と思いますが、
スタイルシートで頼むといわれて、困ってます。

教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6

  • 回答者： ICHI-yan
  • 回答日時：

http://www.lucky-bag.com/appendix/styling-dl/dl_ …
いくつかパターンを簡潔におなじ見た目になるように紹介されています。

borderとwidthをプラスして、表っぽくすれば、いいのでは？と思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼おくれてすいません！ありがとうございます！
これは参考になりますね、なるほどーーー

じっくり検証してみます！

※みなさんへ

ここのお礼欄をお借りしてお礼申し上げます。
ポイントは後ほどつけさせていただきますので
少々お待ちくださいませ！

通報する
お礼日時：2007/04/04 19:06

No.5

IEを完全に無視し,Firefoxもtrunkでないと多分駄目という蛇足オマケバージョン。

Operaは知らないけど,手元の9.20 Betaでは上手く行った(笑)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
dl#LOGIN-FORM{
width:80%;
background-color:green;
margin:auto;
padding:0;
}

dl#LOGIN-FORM dt.loginFormLabel{
display:inline-block;
width:10%;
margin:0;
padding:0;
text-align:center;
background-color:yellow;

}
dl#LOGIN-FORM dd.loginFormText{
display:inline-block;
width:80%;
margin:0;
padding:0;
text-align:center;
background-color:pink;
}
dl#LOGIN-FORM dd.loginFormText input{
width:100%;
}


</style>
<title>サンプル</title>
</head>
<body>
<dl id="LOGIN-FORM">
<dt class="loginFormLabel" id="USER-NAME-LABEL">
<label for="USER-NAME">ユーザ名</label>
</dt>
<dd class="loginFormText">
<input type="text" name="username" size="24" value="" id="USER-NAME" class="inputText" />
</dd>
<dt class="loginFormLabel" id="USER-PASSWORD-LABEL">
<label for="USER-PASSWORD">パスワード</label>
</dt>
<dd class="loginFormText">
<input type="password" name="password" size="24" value="" onmousedown="" onkeydown="if (event.keyCode == 13) {enter.click();return false;}" id="USER-PASSWORD" class="inputText" />
</dd>

<dt class="loginFormLabel" id="USER-INFO-SUBMIT-LABEL">
<label for="USER-INFO-SUBMIT">アクション</label>
</dt>
<dd class="loginFormText" id="USER-INFO-SUBMIT-TEXT">
<input type="submit" value="ログイン" id="USER-INFO-SUBMIT" class="submit" />
</dd>
</dl>
</body>
</html>

ちなみに,前回や今回に含まれていない
>td colspan="2"
は適当に工夫してください(笑)
そう考えると
最後のsubmitのclassをloginFormLabelとloginFormTextのままにしたのは失敗だったなあという気が。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼おくれてすいません！ありがとうございます！

おお、再度ありがとうございますーーー
試してみます・・・ですが、
>>IEを完全に無視し
IEは無視できないのです～

でもちょいと改造してみますね！

通報する
お礼日時：2007/04/04 19:04

No.4

  • 回答者： js_player
  • 回答日時：

CSSをかなり触らないといけませんが、一応作ってみたので書いておきます。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>ログイン画面</title>
<style type="text/css">
form#LOGINFORM p{
clear:left;
}

form#LOGINFORM label{
margin:0;
padding:0;
float:left;
display:block;
width:100px;
}
</style>
</head>
<body>

<form id="LOGINFORM">
<p>
<label for="TEXTFIELD">パスワード</label>
<input type="text" id="TEXTFIELD" />
</p>

<p>
<label for="TEXTFIELD2">ＩＤ</label>
<input type="text" id="TEXTFIELD2" />
</p>

<p>
<input type="submit" value="ログイン" />
</p>
</form>

</body>
</html>

labelをブロック要素にして、widthで幅を指定し、それを p で囲んだだけのもの。

でも table を表に使うのなら table を使ってもいいと思いますが
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼おくれてすいません！ありがとうございます！

>CSSをかなり触らないといけませんが

そうなんですよね、、私も力技ですと
どうしても色々触らないといけなくて・・
そうすると壊れちゃうんですよね。。
上の試してみます、さっそく！

通報する
お礼日時：2007/04/04 18:49

No.3

多分・・・


質問者は理解しているけど，発注している人が以下を【理解していない。】

『俗に言うテーブルレイアウト ＝ 悪だと思われている。』
『俗に言うテーブルレイアウト ≠ table要素を使うこと。』
『スタイルシートを使うこと ≠ table要素を使わないこと。』
『table要素も適切に使えばStrictなコードである』

環境で受注しているんでしょう。大方。
で，受注側がそれを説明しても，
発注側が理解してくれず
【table要素は悪だ】
という思考でしかないので無理矢理
>「 dl 関連要素で実現したい 」
をやらざるを得なくなる，と。

>すでに組んであるcssはあまり崩して欲しくないんだそうです。
ここなんか見ると尚更そんな気がする。意味不明だもん。多分質問者もその意図を掴めず言っていると予想しているけど。

こんなのしか思いつかなかった。XHTML側をかなり弄ってますので注意。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
dl#LOGIN-FORM{
width:80%;
background-color:green;
margin:auto;
padding:0;
overflow:auto;
}

dl#LOGIN-FORM dt.loginFormLabel{
/* display:block; */
width:20%;
float:left;
clear:left;
overflow:auto;
background-color:yellow;
margin:0;
padding:0;
}
dl#LOGIN-FORM dd.loginFormText{
width:70%;
float:left;
overflow:auto;
background-color:red;
margin:0;
padding:0;
}
dl#LOGIN-FORM dd.loginFormText input{
overflow:auto;
width:80%;
margin:0;
padding:0;
}

</style>
<title>サンプル</title>
</head>
<body>
<dl id="LOGIN-FORM">
<dt class="loginFormLabel" id="USER-NAME-LABEL">
<label for="USER-NAME">ユーザ名</label>
</dt>
<dd class="loginFormText">
<input type="text" name="username" size="24" value="" id="USER-NAME" class="inputText" />
</dd>
<dt class="loginFormLabel" id="USER-PASSWORD-LABEL">
<label for="USER-PASSWORD">パスワード</label>
</dt>
<dd class="loginFormText">
<input type="password" name="password" size="24" value="" onmousedown="" onkeydown="if (event.keyCode == 13) {enter.click();return false;}" id="USER-PASSWORD" class="inputText" />
</dd>

<dt class="loginFormLabel" id="USER-INFO-SUBMIT-LABEL">
<label for="USER-INFO-SUBMIT">アクション</label>
</dt>
<dd class="loginFormText" id="USER-INFO-SUBMIT-TEXT">
<input type="submit" value="ログイン" id="USER-INFO-SUBMIT" class="submit" />
</dd>
</dl>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

わーん、ありがとうございます！！
色々やっていただいて感謝です！まだ試していませんが。
月曜からまた再開なので、それからさっそく・・

>『俗に言うテーブルレイアウト ＝ 悪だと思われている。』
↑悪とまで発注者が思っているかは知りませんが「会社の方針」なんだそうです、できるだけcssなのは。なんかいろいろうちは最先端な感じよ！という意味で、なんでしょうか。。

>『スタイルシートを使うこと ≠ table要素を使わないこと。』
↑そうそう、そう思っていそう！！

>『table要素も適切に使えばStrictなコードである』
↑そうそう、ねー！！

で、参考にして欲しいサイトを見せてもらって、こんな感じでね、
といわれたんですが、そこはバリバリtable使ってるじゃんか！
というと、
「そうなんですよねー・・何か実現できる方法ありませんかね？
スタイルシートで」
「私にゃ無理っす」

トホホ

通報する
お礼日時：2007/03/31 19:13

No.2

  • 回答者： mazimekko3
  • 回答日時：

以下CSS(display)によるtable表現を説明しています。



http://msugai.fc2web.com/web/CSS/table.html

この回答への補足

ありがとうございます！

どれを参考にしたらいいのでしょうか。
このページすべてがtable表現の説明ですか？

補足日時：2007/03/29 19:19
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： quads
  • 回答日時：

> これと同等のものを、スタイルシートだけで作成できますか？



> テーブルでやればいいのに・・・と思いますが、
> スタイルシートで頼むといわれて、困ってます。

少し観点がおかしいです。
スタイルシートはあくまで視覚表現に関する指定を行うものです。

「 table 関連要素よりも適切なマークアップはあるのか」「 dl 関連要素で実現したい 」
というのであれば回答が可能です。

より適切な回答を求められるのであれば、文書型定義や想定しているレイアウトをもう少し具体的に示してください。

この回答への補足

すばやいご回答ありがとうございます！

せっかくご回答いただいたのですが、
文章の意味がちょっとわかりませんでした（もちろん私が知ろうと過ぎるのです・・・・）

えっと。。

今のレイアウトは、
■ＩＤというテキストのすぐ横にＩＤを入力するテキストボックスが並でいる
■同じくパスワードというテキストのすぐ横にＩＤを入力するテキストボックスが並でいる
■その下にログインボタンが配置されている

という状態です。
上記３つが、loginFormというclassでくくられています。

ＩＤというテキストとパスワードというテキストは、文字数が違いますよね、パスワードのほうが長い。

そのため、ＩＤのすぐ横のテキストボックスの始まりが
縦でみると、飛び出して見えます（わかります？）。
ログインボタンもなんかセンターではない。

テーブルでしたら、これをきれいに簡単に調節できると思うのですが、
これをcssだけでやれというのです。

divで囲った枠にfloat: left;などして見るのか？
と思ったのですが、すでに組んであるcssはあまり崩して欲しくないんだそうです。
もうお手上げです。

補足日時：2007/03/29 19:08
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報