過去ログ表示


過去ログ 211 を表示

トピック内全 10 記事中の 1 〜 10 番目を表示
[ 最新記事及び返信フォームをトピックトップへ ]
このトピックの全ページ / [0]

フォームINPUTのフォント変更方法
(#33393) このトピック中1番目の投稿
(環境: WinXP SP2/Firefox1.5)

ばぐじらでバグではなくユーザー設定の問題とされたので、こちらで質問します。

ClearType表示に対応したフォントを、フォント設定で指定すると大部分は
ClearTypeで表示します。しかしフォームのINPUTやSELECTでは
OSのデフォルトフォント MS UI Gothicが適用されます。forms.cssで
font: -moz-field;が適用されているからです。しかしMSのInternetExplolerでは
INPUTやSELECTは指定したフォントでCrearType表示されています。それで
Firefoxのバグであると報告しました。

-moz-fieldで適用されるCSS設定を行えば、CrearType表示ができると思います。
どのように設定すれば良いでしょうか?

Firefoxのフォント設定でCrearType対応フォントを設定します
input {
font: medium -moz-field;
または
font: "メイリオ”;
として記述するとCrearType表示になりますが、入力ボックスのレイアウトが崩れてしまいました。

Bug 5310 - フォームINPUTでClearType表示できない
http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=5310

Re[1]: フォームINPUTのフォント変更方法
(#33394) このトピック中2番目の投稿
(環境: WinXP SP2/Firefox1.5)

> font: "メイリオ”;

まず、メイリオ の次は ” ではなくて " にしないといけないと思いますが…

それはさておき、font: -moz-field の場合、
font-family だけでなく、font-size とかその他もまとめて設定されますので、

> font: medium -moz-field;
だとサイズの指定が重複してしまう、

> font: "メイリオ”;
ではサイズの指定がされていないのではないかと思いますが…
手元にメイリオがないので、試せないので良くわかりません。

手元には HG明朝E があって、これで ClearType 表示ができるようなので、
userContent.css に
input, select {
font-family: "HG明朝E";
}
と書いてみたところ、input select 共に ClearType になっているように見えます。

RE:Inputのボックス表示が幅広になる問題
(#33399) このトピック中3番目の投稿
(環境: WinXP SP2/Firefox1.5)

2006/08/18(Fri) 13:38:56 編集(投稿者)
2006/08/18(Fri) 13:38:50 編集(投稿者)

すみません、問題の整理ができていませんでした。
input,select {
font-family: "メイリオ" !important;
font-size: 13px !important;
}
UserContent.cssに記述すると、ClearType表示になります。しかし
SELECTは良い結果になりますが、INPUTのボックスが通常の2倍ぐらい
幅広く表示されてしまいます。

Google.comでそのように表示されます。IEで表示させると異常はありません。
IE Google.com 正常
FX Google.com 2倍ちょっと大きい
フォントの特性が原因であればIEで再現するはずです。INPUTの表示幅を決定する
CSS定義があれば教えてください。XPのCrearTypeを有効にして、既定のFONTへ
セットした場合です。

試しに
input,select {
font-family: "メイリオ" !important;
font-size: 13px !important;
width: 50%;
}
このように幅を設定すると、Google.comの検索ボタンにも影響して
レイアウトが崩れてしまいました。入力窓だけに特定して幅を調整すればいいので
しょうが、サンプル例が見つかりません。

CrearType対応フォントはMS OFFICEに付属するHG系が小さいPTに対応します。
OpenOfficeに乗り換えた時にフォントを持ち運ばなかったので、今使ってるPCで
はメイリオ以外で検証できません。

Re[3]: RE:Inputのボックス表示が幅広になる問題
(#33400) このトピック中4番目の投稿
(環境: WinXP SP2/Firefox1.5)

> 試しに
> input,select {
> font-family: "メイリオ" !important;
> font-size: 13px !important;
> width: 50%;
> }
> このように幅を設定すると、Google.comの検索ボタンにも影響して
> レイアウトが崩れてしまいました。入力窓だけに特定して幅を調整すればいいので
> しょうが、サンプル例が見つかりません。

「input[type="text"]{〜}」のようにすると入力覧のみを指定できるのですが、Google の入力覧はtype属性が省略されています。
代わりに「input[size]{〜}]として、size属性をもっているinputのみ幅を指定してはいかがでしょうか。

Re[3]: RE:Inputのボックス表示が幅広になる問題
(#33407) このトピック中5番目の投稿
(環境: WinXP SP2/Firefox1.5)

> input,select {
> font-family: "メイリオ" !important;
> font-size: 13px !important;
> }
> UserContent.cssに記述すると、ClearType表示になります。しかし
> SELECTは良い結果になりますが、INPUTのボックスが通常の2倍ぐらい
> 幅広く表示されてしまいます。

メイリオは手元にないので、
input,select {
font-family: "HG明朝E" !important;
font-size: 13px !important;
}
で試してみましたが、INPUT のボックスは、
文字の横幅が増えるのに応じて大きくなりましたが
2倍と言うほどには大きくなりませんでした。
デフォルトでも、上記のように記述した場合でも、ボックスに
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふ
と入れると、どちらもちょうどいっぱいになりますので、
文字数換算ではどちらも同じ大きさということになります。
しかも、ClearType 表示もできているように見えますので、
仮に何らかのバグがあるとしても、おそらく ClearType は関係がないのでしょう。

> フォントの特性が原因であればIEで再現するはずです。

そうとも限りません。
フォントの特性の使い方が、アプリによって異なっている可能性もあります。

> 入力窓だけに特定して幅を調整すればいいので
> しょうが、サンプル例が見つかりません。

Google だけで良いのであれば、例えば name=q とかで特定するとか、
もっと汎用にするのであれば、
type=submit 等が指定されている場合とそうでない場合でスタイルを分けるとか、
でどうでしょうか。


ところで全然関係ない話ですが^^;
Easy Extension Editor の進捗状況はどんな感じでしょう?

「メイリオ」 オプトピック
(#33412) このトピック中6番目の投稿
(環境: その他/Mozilla1.7)

ご商売関係? のWebアプリ開発などで早急の対策が必要とは思いますが....(^^)

メイリオ 和欧文字間の比較サイズ、黒み、並び具合、字間スペースなどを調整
http://internet.watch.impress.co.jp/cda/news/2005/07/29/8621.html

昔からinput要素のsize属性の値がブラウザ種別で、画面上に確保される幅の違い、見栄えを何とかサーバ側CGIやSSIで吸収しようと言う試みは多くありました、販売予定の新しいOSが採用すると混乱が更なる混乱を呼ぶ状態に成るのではと思います。
サーバ側だけでなくクライアント側に任せるとしてもJavaScriptで稼働状態を把握し書き出すとか、能動的に切り替えられたcssを読み込むとかが必要かも知れません。
正しい詳細情報を公開してないメイリオとVista固有問題かも知れません。

Re[4]: まとめて返事
(#33421) このトピック中7番目の投稿
(環境: WinXP SP2/Firefox1.5)

>「input[type="text"]{〜}」のようにすると入力覧のみを指定できるのですが、Google の入力覧はtype属性が省略されています。
>代わりに「input[size]{〜}]として、size属性をもっているinputのみ幅を指定してはいかがでしょうか。
ありがとうございます。色々試してみます。

> 2倍と言うほどには大きくなりませんでした。
> type=submit 等が指定されている場合とそうでない場合でスタイルを分けるとか、
ありがとうございます。メイリオがVer0.99なのはそういう事なのかな?製品版だと直るとか?

> Easy Extension Editor の進捗状況はどんな感じでしょう?
ぐさ・・!
Firefox2が出るまでに何とかβにする(携帯FOXと同じスタートを切りたいため)
HPで告知してるように止まってます。(あの理由は真実ではなく、単なるジョーク)
真実はテキスト編集が長時間できない眼精疲労状態が再発したため、ネトゲーは
できるのに・・・開発が中断してます。鍼灸治療で良くなってきたので来週ぐらいから
再開します。応援メッセージありがとうございます :-D

>正しい詳細情報を公開してないメイリオとVista固有問題かも知れません。
WEBデザイナーの知人に、メイリオの情報を把握してるかどうか聞くと、知らない
と返ってきます。Vistaで見栄え良く表示させるための依頼が増える見通しなので
なるべく情報公開して欲しいですね。

Re: もう少しヒントをおねがいします
(#33425) このトピック中8番目の投稿
(環境: WinXP SP2/Firefox1.5)

input,select {
font-family: "メイリオ" !important;
font-size: 13px !important;
}
input + size {
width: 60%;
}

input,select {
font-family: "メイリオ" !important;
font-size: 13px !important;
}
input size {
width: 60%;
}
どちらも無効です。

セレクタ
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#id-selectors
これを読みながらやっています。(CSSの本を買うお金が無いので、汗)

CSSファイル形式でINPUTの個別記述してる解説サイトが見つかりません。
もう少しヒントがあればできそうです。教えてください。

Re[6]: Re: もう少しヒントをおねがいします
(#33430) このトピック中9番目の投稿
(環境: その他/Mozilla1.7)

2006/08/20(Sun) 11:23:18 編集(投稿者)

> CSSファイル形式でINPUTの個別記述してる解説サイトが見つかりません。

# 捜している所が偏っていませんか? WWW上には有益、無意味な情報もヒットしますし、
意図して検索エンジンを制御、コントロールしているサイトも多いです。

width: 123px !important;

など123pxは数値の単位系列を参照してください。
cssの場合はCLASS等で関連づけし、SIZE=nnは意識してディホルト(20)を使わせても
表現可能なコンテンツ設計を行うなどでは....(^^)

cssでは無くブラウザのchromeに書きたい時の表現ではコンテンツ側が仮に
<INPUT SIZE="56" MAXLENGTH=.... の様に成っている場合は

input[SIZE="56"] { width: 123px !important; }

コンテンツ側が仮に
<INPUT CLASS="INP_B" MAXLENGTH=.... の様に成っている場合は

input[CLASS="INP_B"] { width: 123px !important; }

他....色々な表現が可能です。

Re[6]: Re: もう少しヒントをおねがいします
(#33451) このトピック中10番目の投稿
(環境: WinXP SP2/Firefox1.5)

> input size {
> width: 60%;
> }

この部分は、おそらく私が書いた「size属性を」のことだと思いますが、この記述では要素を箱に例えると「inputという箱の中にあるsizeという箱の幅を指定」した事になってしまいます。
また、引用は前後しますが

> input + size {
> width: 60%;
> }

これも意図した表示にはならず、「inputという箱の“すぐ隣”にあるsizeという箱の幅」という意味になってしまいます。
この場合は次のように記述します。

input[size]{
width: 60%;
}

Google に特化するのであれば「あさん」が言われているようにname属性を指定する方が良いと思います (あとからソースを見直して気づきました‥‥)
「name属性値がqのもの」を指定するのであれば次のようになります。

input[name="q"]{
width: 60%;
}

css のセレクタに関するサイトは沢山ありますので、じっくり調べてみてください。


このトピックの全ページ / [0]

返信不可


- Child Tree -