ボタンタグを作っているのですが…

質問

<input style="font-size:15; width:150px; height:30px; top: 200px; left: 150px; position: absolute;" type="button" value="Top" style="border-width:4">

上のように書き、topの後ろの値とvalueの中身だけ変えて、ボタンの数だけ並べてみたのですが、もっとすっきりした書き方はありませんか。<div style …と書いてみたりいろいろやってみたのですが、うまくいきません。

また、font-sizeの後ろの15は何でしょうか。ptやpxなら単位が必要だと思うのですが。さらに、値を変えてもフォントの大きさが変わらないのですが、なぜでしょうか。

よろしくお願い致します。

回答No.2

pasocom · ベストアンサー

＃１です。
先の回答で「font-size=15px;」と書いてしまいましたね。これでも正しく表示されるようですが、正しい書式では「font-size:15px；」と書くべきでしょう。失礼しました。
なお、この数値を変えてもフォントサイズが変化しないのは、別の場所で全体のフォントサイズを指定しており、そちらが優先されているのではないでしょうか。またフォントの種類も特殊な物を指定していないか確認下さい。
（質問文から、このHTMLは質問者様が独自に書いたのではなく、どこかのものを流用されている様に見受けますが）。
先の回答で私が書いたHTMLだけをコピーペーストして「test.html」というような名前で保存して表示、確認して下さい。

お礼

再度書き込みありがとうございます。お教えいただいたように、その部分だけコピペして試してみたところ、うまくいきました。どこに問題があるのかひとつひとつ見ていこうと思います。

ご指摘のとおり、他のサイトのソースを参考にして、勉強しながら作っている次第です。

回答No.1

pasocom

ボタン（inputタグ）の体裁として「value」だけが違ってくるだけなら、その他のスタイルは最初に規定してしまえばいいです。
また「position:absolute」はレイヤ（divタグ）だけに指定できるプロパティで、ボタン（inputタグ）には直接指定できません。
よって、一例としては

<style type="text/css">
input {font-size=15px; width:150px; height:50px; border-width:4px}
</style>
<!--ここまででinputのスタイルを指定してしまう-->
<div style="position:absolute; top:100px; left:150px;">
<input type="button" value="Top1">
</div>

<div style="position:absolute; top:300px; left:150px;">
<input type="button" value="Top2">
</div>

<div style="position:absolute; top:500px; left:150px;">
<input type="button" value="Top3">
</div>

なお、「font-sizeの後ろの数値は単位をつけなければ自動的に「px」となり、「pt」をつければ「ポイント」と認識すると思います。
＞値を変えてもフォントの大きさが変わらないのですが・・・。
もう一度、上記の「font-size=15px;」のところを変えてご確認下さい。

お礼

早速のアドバイス、ありがとうございます。おかげざまですっきりした形になりました。こういうふうに指定すればよいのですね。勉強不足ですみません。

文字の大きさについては、単位がなければpxとのこと、了解しました。
文字の大きさなのですが、いろいろな値に変えて再確認したのですが、変わりませんでした。