buttonタグの長さが、ばらばらになるので長さを統一したいのですが、
IEだと、width=30% などの記述をすると揃うのですが、
netscape(4.75)だとうまくいきません。

例えば、buttonのvalueに「あああ」とするのと「いいいいい」とする
2つのボタンがあったとします。
何も指定しなければ、長さはばらばらになります。
そこでwidth="30%"と指定をしてみたのですが、IEでしかききませんでした。
空白文字を間に入れると言うことは、したくないので、
困っています。
何か、良い案があればご教示いただけるとありがたいです。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

NN4.xではうまく行きませんが、NN6.0ではうまく表示できる方法があります。


これはスタイルシートを使えばできます。
スタイルシートに関して説明するのは骨が折れるし、ここにとても書ききれるものではないので、ボタンの幅指定だけ書きます。
<input>の中に次の属性とその値を入れてください。
style="width:XXpx;"
このXXのところに自分の好みの数値を入れてください。
これはピクセル単位での指定なので、パーセンテージで幅を決めるには、px を % に変えればOKです。
NN4.xではこのスタイルシートの属性に対応していないので表示されません。
↓こんな具合に。
例: <input style="width:100px;">
    • good
    • 0
この回答へのお礼

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

>NN4.xではうまく行きませんが、NN6.0ではうまく表示できる方法があります。
やっぱり、4.75ではだめですか。。。。

>NN4.xではこのスタイルシートの属性に対応していないので表示されません。
ですよね。スタイルシートには対応してませんよね。
やはり、4.75では、限界かもしれません。
一応、4.75で駄目もとでstyleシート使ってみましたが、ぜんぜんだめでした。
(当たり前か。。。)
もう少しがんばってみて、駄目なら諦めるしかなさそうですね。
ありがとうございました。

お礼日時:2001/05/22 20:29

一応あの、補足として。


あまり誉められたものではありませんが一応NN4.*でも
スタイルシートは採用されています。ボタンのwidth指定には
対応していないというだけで…。あ、そういう意味でおっしゃって
いたのかな?

で、本来の問題ですが、うーん、フォントを変更するとまた
変わっちゃいそうですしねえ。私なら、ボタンのラベルは固定の
「実行」などにして、DBから読んできた文字列をその脇に説明と
して付け加えて逃げるかな。
あと、ボタンがずらーっとたくさん並ぶのも変に並べると
でこぼこして気持ちが悪いから、アンカーにしちゃうとかなんとか。
とにかく、その問題には直面しないようにしてます。…回答になってない。

この回答への補足

たくさんの方にアドバイスをいただいて
とても助かりました。
ありがとうございました。

補足日時:2001/06/06 17:15
    • good
    • 0
この回答へのお礼

ありがとうございます。

そうですね!NN4.75でもスタイルシートは採用されてますね!
私も考えとしてボタンと説明を混ぜて逃げようかと思っていました。
同じ考えの人がいて安心しました。ありがとうございました。

お礼日時:2001/06/06 17:14

統一できません。


空白文字で調整したとしても、必ず微妙にずれます。
(文字によって幅が違うため。Pフォント指定はできないはずです)

合わせるなら、画像ボタンしかないでしょう。
    • good
    • 0
この回答へのお礼

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

>空白文字で調整したとしても、必ず微妙にずれます。
空白文字でも微妙にずれるのですか。。。
知りませんでした。

>合わせるなら、画像ボタンしかないでしょう。
今回やりたいことなんですが、DBからデータを取得してそれを
ボタン名に使用したいので、画像ボタンは使えないのです^^;;
もう少し、がんばってみます。

お礼日時:2001/05/22 20:23

きちんと長さを揃えたいのならば、画像でボタンを作成した方がいいと思います。


今ちょっとだけ調べてみたのですが、ボタンの大きさ指定はないようです。
ただ調べたのが古い本なので、最新では何か方法があるかも知れません。
    • good
    • 0
この回答へのお礼

わざわざ調べていただいてありがとうございます。
やっぱり、ボタンタグには、大きさの指定は無いですよね^^;;
私も今、調べていますのでもう少しがんばってみます。
ありがとうございました。

お礼日時:2001/05/22 20:07

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルの「WIDTH指定」と「%指定」

どうも。どなたかご教授お願いします。
テーブルの幅を「%指定」した場合、ブラウザの大きさによって自動的に伸縮すると思いますが、「%指定」と「WIDTH指定」双方のメリット、デメリットはなんでしょうか?

「楽天市場」なんかは自由に伸縮されるようになっていますし、大方の企業紹介ページは「width」指定でかっちりきまっているように見受けられますが。

ご面倒ですがお願いします・・・。

Aベストアンサー

<ピクセルで指定する場合>
ユーザーのブラウザの表示サイズに関係なく一定の幅で
表が表示されます。企業サイトの場合、画面の見栄えを
良くするため、ナビゲートボタンを画像ファイルで作っ
て配置するので表の伸縮でレイアウトが崩れないように
ピクセル指定で表で外枠を作ってその中に文章を置いて
いくことが多いので、中に置く表もピクセル指定するこ
とが多いようです。また、文字サイズはスタイルシート
を使って固定してしまいます。

<パーセントで指定する場合>
・・とは言っても、ユーザーはやっぱり自分の読みやす
い幅でブラウザを表示させたいし、小さい字だと読みに
くいですよね。
と、言うわけで、このページを含めて文字主体のコンテ
ンツの場合、%サイズ指定して自由に変更可能にするこ
とが多いようです。

つまり、見栄えと使い勝手のどちらを優先するか・・・
ということだと思います。

Qwidth="100%" で指定した場合のブラウザでちじめられた時の対処

タイトルが意味不明になってしまってすいません。

<table width="100%"><tr><td>

HTMLコード

</tr></td></table>

とするとブラウザにいっぱいに表示されます。しかしこの場合、ブラウザの大きさを小さくすると自動的に文字が動きブラウザの大きさ内に収まろうとしレイアウトが崩れてしまいます。

ブラウザのサイズが小さくなったときにレイアウトを崩さず、尚且つ100%で指定するにはどうすればいいのでしょうか?

よろしくお願いします。

Aベストアンサー

width指定の値を%指定ではなく、ピクセル指定にすれば良いです。

<table width="500"><tr>

とか。
この場合、500ピクセル分のサイズでtableが表示されますが、ブラウザの横幅が500ピクセル以下となった場合、横スクロールされるようになります。

QTDタグのwidth属性と文字の長さ

下記のような行があるとします。
<TD width="100">ここ</TD>
「ここ」と書かれた部分には、改行なしで表示させることの出来るMAXの文字数は、半角英数で何文字でしょうか?

Aベストアンサー

フォントサイズにもよりますが、例えばIEの場合 文字のサイズ「中」で 半角英数 11文字位です。
また、<td width="100" style="font-size:12px;">というように文字サイズを12pxに固定にしてしまうと15文字位入ります。

半角英数はスペース無しで記述すると改行されずに延びてしまうので注意が必要です。

Qwidth 100% で縦に3段のレイアウト

上から top, middle, bottom の3つの段があって、
横に100%伸びるものを作ろうとしてます。

middle の中には width=700 で center 寄せの middle_inside があり、
さらにその中に section1 と section2 があります。

ややこしくて申し訳ないのですが、以下のようなコードでして
グレーと黄色の背景を うまく表示させる方法ありますでしょうか?

IE6 では希望通りに表示されるのですが
Firefox 2.0 では背景が真っ白になってしまいます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>[ css ]</title>
<style type="text/css">
<!--
* {
margin: 0; padding: 0; font-family: "Times New Roman", Times, serif; font-size: 24px;
}
#top {
height: 100px; margin: 0 auto; background: blue;
}
#middle {
margin: 0 auto; background: yellow;
}
#middle_inside {
width: 700px; margin: 0 auto; background: gray;
}
#bottom {
height: 100px; margin: 0 auto; background: red; clear: both;
}
#section01 {
float: left; background: green; width: 300px;
}
#section02 {
float: left; background: brown; width: 300px;
}
-->
</style>
</head>

<body>

<div id="top">top</div>

<div id="middle">
<div id="middle_inside">
middle_inside

<div id="section01">
section01<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="section02">
section02<br><br><br><br><br><br><br><br><br><br><br><br>
</div>

</div><!-- #middle_inside -->
</div><!-- #middle -->

<div id="bottom">bottom</div>

</body></html>

上から top, middle, bottom の3つの段があって、
横に100%伸びるものを作ろうとしてます。

middle の中には width=700 で center 寄せの middle_inside があり、
さらにその中に section1 と section2 があります。

ややこしくて申し訳ないのですが、以下のようなコードでして
グレーと黄色の背景を うまく表示させる方法ありますでしょうか?

IE6 では希望通りに表示されるのですが
Firefox 2.0 では背景が真っ白になってしまいます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans...続きを読む

Aベストアンサー

floatしているので高さが決まらないのでは?
以下のようにして、floatをクリアしてあげてください

<div id="section02">
section02<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="clear:both"></div>

Qwidthの% or ピクセルを指定した場合の違いについて

お世話になっております。

下記のソースは、2つのテーブルをくっつけたソースなのですが、
(1)はwidthに「%」を指定しており、(2)は「ピクセル」を指定しています。
(1)の%だとちょうど合っていますが、(2)のピクセルを指定した場合では、値を合わせているにも関わらずずれてしまっています。
「ピクセル」指定をした場合でも合わせるにはどうすればよいのでしょうか?

(1)widthに「%」を指定
</head>
<body>
<div style="width:330;height:20;overflow:hidden">
<table cellpadding="0" width="300" border="1" align="left">
<tr>
<td width="20%">列1</td>
<td width="20%">列2</td>
<td width="20%">列3</td>
<td width="20%">列4</td>
<td width="20%">列5</td>
</table>
</div>
<div style="width:330;height:50;overflow:auto">
<table cellpadding="0" width="300" border="1" align="left">
<tr>
<td width="20%">ああああああああああああああああああああああ</td>
<td width="20%">2</td>
<td width="20%">3</td>
<td width="20%">4</td>
<td width="20%">5</td>
</tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>7</td>
<td>8</td>
<td>いいいいいいいいいいいいいいいいいいいいいい</td>
<td>10</td>
<td>11</td>
</tr>
</table>
</div>

(2)widthに「ピクセル」を指定
</head>
<body>
<div style="width:330;height:20;overflow:hidden">
<table cellpadding="0" width="300" border="1" align="left">
<tr>
<td width="60">列1</td>
<td width="60">列2</td>
<td width="60">列3</td>
<td width="60">列4</td>
<td width="60">列5</td>
</table>
</div>
<div style="width:330;height:50;overflow:auto">
<table cellpadding="0" width="300" border="1" align="left">
<tr>
<td width="60">ああああああああああああああああああああああ</td>
<td width="60">2</td>
<td width="60">3</td>
<td width="60">4</td>
<td width="60">5</td>
</tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>7</td>
<td>8</td>
<td>いいいいいいいいいいいいいいいいいいいいいい</td>
<td>10</td>
<td>11</td>
</tr>
</table>
</div>

お世話になっております。

下記のソースは、2つのテーブルをくっつけたソースなのですが、
(1)はwidthに「%」を指定しており、(2)は「ピクセル」を指定しています。
(1)の%だとちょうど合っていますが、(2)のピクセルを指定した場合では、値を合わせているにも関わらずずれてしまっています。
「ピクセル」指定をした場合でも合わせるにはどうすればよいのでしょうか?

(1)widthに「%」を指定
</head>
<body>
<div style="width:330;height:20;overflow:hidden">
<table cellpadding="0" width="...続きを読む

Aベストアンサー

こんにちは

(1)widthに「%」を指定
<div style="width:330px;height:20px;overflow:hidden;">
<table cellpadding="0" border="1" style="width:300px;text-align:left;">
<tr>
<td style="width:20%;">列1</td>
<td style="width:20%;">列2</td>
<td style="width:20%;">列3</td>
<td style="width:20%;">列4</td>
<td style="width:20%;">列5</td>
</tr>
</table>
</div>
<div style="width:330px;height:50px;overflow:auto">
<table cellpadding="0" border="1" style="width:300px;text-align:left;">
<tr>
<td style="width:20%;">ああああああああああああああああああああああ</td>
<td style="width:20%;">2</td>
<td style="width:20%;">3</td>
<td style="width:20%;">4</td>
<td style="width:20%;">5</td>
</tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>7</td>
<td>8</td>
<td>いいいいいいいいいいいいいいいいいいいいいい</td>
<td>10</td>
<td>11</td>
</tr>
</table>
</div>


(2)widthに「ピクセル」を指定

<div style="width:330px;height:20px;overflow:hidden;">
<table cellpadding="0" border="1" style="width:300px;text-align:left;">
<tr>
<td style="width:55px">列1</td>
<td style="width:55px">列2</td>
<td style="width:55px">列3</td>
<td style="width:55px">列4</td>
<td style="width:55px">列5</td>
</tr>
</table>
</div>
<div style="width:330px;height:50px;overflow:auto">
<table cellpadding="0" border="1" style="width:300px;text-align:left;">
<tr>
<td style="width:55px">ああああああああああああああああああああああ</td>
<td style="width:55px">2</td>
<td style="width:55px">3</td>
<td style="width:55px">4</td>
<td style="width:55px">5</td>
</tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>7</td>
<td>8</td>
<td>いいいいいいいいいいいいいいいいいいいいいい</td>
<td>10</td>
<td>11</td>
</tr>
</table>
</div>

列名のテーブル</tr>抜け
styleを使用するときは**pxとした方がいいと思います
table width:300px = td width:60px*5(300px)
と考えがちですが実際にはボーダー分のpx数table内の幅が減りますのでtdのpx数を少し減らす必要があります(border="1"のボーダー1つで約4px)
<td width="55"><td style="width:55px;">おそらくどちらでもいいと思いますがwidth="55"は非推奨属性なのでstyleの方がいいかな?(<table>の方は非推奨ではありません)
あれでしたら<table>にstyle="table-layout:fixed;"を追加してもいいですし・・・
ただ55pxを超える半角英数字の連続を使用した場合、レイアウトは崩れます(><)(table-layout:fixed;未指定)
指定の場合はIEは超えた分は見えなくなり他のでは隣のセルにはみ出ます(tdにoverflow指定する必要有り?)
(word-breakなどの手もありますがIE専用になります)
http://www.htmq.com/style/word-break.shtml

こんにちは

(1)widthに「%」を指定
<div style="width:330px;height:20px;overflow:hidden;">
<table cellpadding="0" border="1" style="width:300px;text-align:left;">
<tr>
<td style="width:20%;">列1</td>
<td style="width:20%;">列2</td>
<td style="width:20%;">列3</td>
<td style="width:20%;">列4</td>
<td style="width:20%;">列5</td>
</tr>
</table>
</div>
<div style="width:330px;height:50px;overflow:auto">
<table cellpadding="0" border="1" style="width:300px;text-ali...続きを読む


人気Q&Aランキング

おすすめ情報