textareaとinputでフォントが変わる

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

0   名前： ミルキー ： 2005/06/26 10:18
突然の書き込みすみません。
フォームを作っているのですが、「名前」の欄をINPUTで作り、「本文」の欄をTEXTAREAで作ると、
ブラウザで表示された時に二つの入力欄で文字のフォントが変わってしまいます。
これを統一するにはどうすればよいでしょうか？

<FORM action="mailto:***@***" method="post">
name<BR>
<INPUT type="text" name="name" size="10" maxlength="20"><BR>
message<BR>
<TEXTAREA rows="5" cols="40" name="message"></TEXTAREA><BR>
<INPUT type="submit" value="submit">
</FORM>

という風に書いてます。
だれかおしえてください！
1   名前： ミルキー ： 2005/06/26 10:18
すいません、もう一つ追加で教えてください・・・。

http://www.tagindex.com/javascript/window/open1b.html
このページを参考にサブウィンドウで"clap.html"のページを開くように設定したのですが、ブラウザでそのサブウィンドウを表示するとIEだと一部文字化けしています。

ソースは

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<HEAD>
　<META HTTP-EQUIV="Content-Type"
　CONTENT="text/html; charset=JIS">

　<TITLE>moralist walking : clapping</TITLE>
　<STYLE type="text/css">
　<!--
　.margin{
　margin-top:30px;
　margin-bottom:30px;
　margin-left:30px;
　margin-right:30px;
　}
　.padding{
　padding-top:20px;
　padding-bottom:20px;
　padding-left:20px;
　padding-right:20px;
　}
2   名前： ミルキー ： 2005/06/26 10:18
つづきです。

　html {
　scrollbar-face-color: #FFFFFF;
　scrollbar-arrow-color: #BBBBBB;
　scrollbar-highlight-color: #FFFFFF;
　scrollbar-shadow-color: #BBBBBB;
　scrollbar-base-color: #FFFFFF;
　scrollbar-3dlight-color: #FFFFFF;
　scrollbar-darkshadow-color: #FFFFFF;
　}
　body {
　color: #666666;
　background-color: #FFFFFF;
　background-image: url("background/dot01.gif");
　background-repeat: repeat;
　background-attachment: fixed;
　font-family: Verdana, Osaka, "MS　Pゴシック", sans-serif;
　font-size: 80%;
　line-height: 1.6;
　text-align: left;
　text-decoration: none;
　}
　A:link {color:#666666; text-decoration:none; }
　A:visited {color:#999999; text-decoration:none;}
　-->
　</STYLE>

</HEAD>

<BODY>
　<P class="margin padding">
　　Thank you for your clapping!!
　</P>
　<P class="margin">
　　ここの文章が文字化けします。
　</P>

</BODY>
</HTML>

です。
おねがいします・・・
3   名前： カヅサツ ： 2005/06/26 10:18  ［URL］
> これを統一するにはどうすればよいでしょうか？

CSS の font-family プロパティを使うと良いと思います。

蛇足ですが、

> <FORM action="mailto:***@***"

form要素の action属性値に maitoスキームの URL を指定したときの動作は、HTMLのルールで規定されていません。ので、あるブラウザではメーラが立ち上がるかもしれませんが、あるブラウザではそうでないかもしれません。

# もちろん、HTMLのルールが将来的に改訂されるかもしれません（このケースはあり得るとオレは睨んでいます）。

> IEだと一部文字化けしています。

文字化けの問題は該当のウェブページを拝見してみないと、ちょっと検証が難しいです。
4   名前： ミルキー ： 2005/06/26 10:18
カヅサツさん、レスどうもありがとうございますー！

フォントの統一のことですが、一応CSSのfont-familyで規定はしているのですが…。

<STYLE type="text/css">
<!--
…

body {
…
font-family : Verdana, "ＭＳ Ｐゴシック", sans-serif;
…
}
-->
</STYLE>

という形で設定しています。
他に何か特殊な設定が必要なんでしょうか？

フォームのactionについてですが、私も自分で試してみて気づきました。
自分のＰＣのメールソフトを起動して送る形になってるんですね。
やっぱりちゃんとしたcgiを設置しないとだめなんですねー。
私は無料サーバーを利用しているのでcgiは設置できないのですが…。

それから、文字化けの件はいろいろしてるうちに解決しました！
ありがとうございます！！
5   名前： カヅサツ ： 2005/06/26 10:18  ［URL］
> body {
> font-family : Verdana, "ＭＳ Ｐゴシック", sans-serif;
> }

font-family は継承されるプロパティですが、ブラウザ内部のスタイルシートによって上書きされます。
個別に指定してあげると良いでしょう。

input,
textarea{
font-family : "ＭＳ ゴシック", monospace;
}
6   名前： ミルキー ： 2005/06/26 10:18
カズサツさん、ありがとうございました！
個別に指定するとちゃんと同じフォントになりました。
助かりました−。

もう一つ質問させていただきたいのですが、画像ではなく普通のテキストにalt属性みたいなものをつけることはできないのでしょうか？
テキストにリンクを貼って、そのテキストにマウスをあわせると軽い説明がでてくるようにしたいのですが・・・。

普通にaltで指定しても無理のようですね。
何か他に方法はないのでしょうか・・・。
7   名前： び ： 2005/06/26 10:18
altは画像が見れない環境で表示するための代替テキストで
説明を出すためのものではありません。
ですから、たとえばA要素にalt属性というのはおかしいのです。

マウスのカーソルを乗せたときにポップアップが出るようなことを
期待したいのであれば、title属性を指定すると良いと思います。

<p>
<a href="foo" title="わくわくの秘宝館なのですヨ。">わくわく秘宝館</a>
</p>

<p><abbr title="ザ掲示板">座板</abbr>は楽しいところです。</p>

・title属性はほとんどの要素に指定することができます。
・title属性をどのように利用するかは、特に決まっていないと思います。
　利用しないユーザ・エージェントもありますので、
　title属性はあくまでも無くても困らないように補助的に使ってください。
8   名前： ミルキー ： 2005/06/26 10:18
びさん、ありがとうございました！できましたー！
アドバイスいただいた通り、補助的に使いたいと思います。
ほんとにありがとうございました！
一覧へ戻る