プルダウンメニューの横に文字表示

[新着] Webテンプレートを仮オープンしました



0   名前: TUNE : 2006/07/31(月) 18:16  ID:33WYuWCl
"TEST1"・"TEST2"がプルダウンメニューで
横に文字を表示させたいのですが、
どのようにやればよいのか検討がつきません。
どうしても"▼TEST1"と"Moji1"は上下になってしまいます。
何か良いやり方はないでしょうか?
お願いします。


※やりたい事
_______________________________
|▼TEST1  Moji1 |
-------------------------------
|▼TEST2  Moji2 |
-------------------------------

※現状
_______________________________
|▼TEST1 |
-------------------------------
| Moji1 |
-------------------------------
|▼TEST2 |
-------------------------------
| Moji2 |
-------------------------------

1   名前: かふぇおれ : 2006/07/31(月) 18:16  ID:Ji0blfRq
どの様に表記した結果、その現状となったのでしょうか。
「良いやり方」と言われましても、以下の表記ではどの様に表示されますか?
<select name="TEST1">
<option selected>0000</option>
<option>1111</option>
<option>2222</option>
</select>
Moji1<br>
<select name="TEST2">
<option selected>aaaa</option>
<option>bbbb</option>
<option>cccc</option>
</select>
Moji2


# おそらくこの質問は「HTML質問板」の方が良い回答を貰えると思いますよ。

2   名前: TUNE : 2006/07/31(月) 18:16  ID:33WYuWCl
かふぇおれ様、回答有難う御座います。

>1のやり方で横に表示はできました。
でも周りを線(テーブル?)で囲みたいのです。

>どの様に表記した結果、その現状となったのでしょうか。
申し訳御座いません。
下記に作成ソースを記載します。

<html>
<select name="TEST1">
<option selected>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>

<script language="JavaScript"><!--
document.write("<table border='1' cellspacing='1' ");
document.write("<tr><td align='center' colspan='5'>");
document.write("<strong>Moji1</strong>");
document.write("</td>");
document.write("</tr>");
document.write("</table>");
// --></script>

<select name="TEST2">
<option selected>ddd</option>
<option>eee</option>
<option>fff</option>
</select>

<script language="JavaScript"><!--
document.write("<table border='1' cellspacing='1' ");
document.write("<tr><td align='center' colspan='5'>");
document.write("<strong>Moji2</strong>");
document.write("</td>");
document.write("</tr>");
document.write("</table>");
// --></script>
</html>

これだとやはり"TEST1"と"Moji1"が上下になってしまいます。

初心者の為(言い訳になってしまいますね)、
やりたい事と全く異なるソースを書いているかもしれません。

何かご指摘願いします。

3   名前: TUNE : 2006/07/31(月) 18:16  ID:33WYuWCl
疑問に思ったのですが、
枠を作成するのに"document.write("<table border='1' cellspacing='1' ");"
を使用しているのがおかしいのでしょうかね。

もう少し調べてみます。

4   名前: かふぇおれ : 2006/07/31(月) 18:16  ID:Ji0blfRq
document.write は必須なのでしょうか?
枠も表示したいだけなら、<table>にしない方が良いかと思います。
<html>
<head>
<title>テスト</title>
<style type="text/css">
<!--
.waku {  font-weight: bold; border: thin #999999 outset}
-->
</style>
</head>
<body>
<select name="TEST1">
<option selected>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
<script language="JavaScript"><!--
document.write("<span class='waku'>");
document.write("Moji1");
document.write("</span>");
document.write("<br>");
// --></script>
<select name="TEST2">
<option selected>ddd</option>
<option>eee</option>
<option>fff</option>
</select>
<script language="JavaScript"><!--
document.write("<span class='waku'>");
document.write("Moji2");
document.write("</span>");
document.write("<br>");
// --></script>
</body>
</html>

これではダメなのでしょうか。

5   名前: Pid : 2006/07/31(月) 18:16  ID:wWksRioT
>>2
書き出される HTML が変なので,

・まず普通の HTML を書き,文法チェックする
・それでうまくいったら,document.write で置き換える

という順序でやってみて下さい(文法チェッカへのリンクは過去ログ・現行ログにたくさんありますので,探してみて下さい)。



----

なお,細かい注意点ですが,

・HTML 4.01 の場合,原則として文書型宣言と title 要素が必須。逆に,html,head,body 要素の開始タグと終了タグは条件次第で省略可です。ですから,最小の HTML 4.01 文書は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>これでも完全文書</title>


となります。「絶対必要なもの」と「後で覚えれば良いもの」を区別しながら覚えると,後々楽になるでしょう。


・HTML 文書にスクリプトを埋め込む場合,

document.write("</td>");


のように終了タグを書いてはいけません(SGML の短縮タグ機構により,</ が現れた時点で script 要素の終了タグ開始と見なされます)。

document.write("<\/td>");
document.write("<" + "/td>");


のように,「 </ 」という文字列を分離して下さい。script 要素の中身のコメントアウトなんか忘れて結構ですが,こちらのルールは確実に覚えて下さい。

なお,外部スクリプトの場合は必要ありません。

一覧へ戻る