- - PR -
文字のサイズをクライアントに変えさせないようにしたい！
| 投稿者 | 投稿内容 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
|
投稿日時: 2003-11-06 14:45
久しぶりに、質問させて頂きます。
aspの画面で、GridLayoutとFrowLayoutを多用したために、微妙なフォントや各コントロールのサイズで画面を構成しております。 で、このときに、文字のサイズを中で作成したため、ブラウザで他のサイズにすると、文字が醜くなったりするようになりました。 そこで、クライアント側で文字のサイズを変えられないようにしようとしました。 調べたところ、スタイルシートにて、文字のサイズを決めておけばよいと書いてありました。 そこで、スタイルシートにて BODY { background-color : #FFFFCC; margin : 0px; font-size :medium; } としました。 でも各ページとも反映されず、クライアント側にて文字のサイズを変更できてしまいます。 やりといことは、 ・各ページの文字のサイズはクライアント側でいう中にしたい。 ・クライアントのブラウザで文字のサイズを変更できないようにしたい。 以上です。 また、スタイルシートにて設定した項目でも、おのおので再度スタイルを書き加えた場合はスタイルシートで設定した部分は上書きされるという認識でいいのでしょうか？ 上記項目について教えていただけますよう宜しくお願いします。 | ||||||||
|
投稿日時: 2003-11-06 15:15
font-size :medium;
が元凶です。ここをピクセル単位で font-size :18px; などとしてみてください。 なお、このように指定しても、設計側が意図したフォントがクライアント側に存在しなければ代替フォントが使用される為、文字幅などが異なってやはり画面が崩れます。 なるべく一般的なフォント(WindowsならMS Pゴシックなど)を使うようにしましょう。 [ メッセージ編集済み 編集者: Gordie 編集日時 2003-11-06 15:18 ] | ||||||||
|
投稿日時: 2003-11-06 15:48
font-size:medium の指定は、VS.NET（の何らかの外部ツール）が勝手に追加するfontタグで打ち消されます  。がんばって消してください。また、スタイルシートへの参照はデフォルトでは入っていませんから・・・って、そっちは大丈夫ですよね。
後半が、よく意味がわからないのですが、上記理由により、使用者がスタイルシートを作成していれば、それが有効になります。もっとも、!important属性をつけて、優先順位を変えることはできます。が、ユーザ側でも指定していると、ユーザ側が優先されます。 うがぁ〜〜！私が参照してる参考書が違っているようでした。Gordieさんの言うとおり、ポイント(pt)、パイカ(pc)、センチメートル(cm)、ミリメートル(mm)、インチ(in)単位で指定すると固定されます。ピクセル(px)、Em、Ex単位は相対単位です。xx-smallなどのキーワードは、ブラウザによって不定です。 [ メッセージ編集済み 編集者: Jitta 編集日時 2003-11-06 15:56 ] 同じページをIE6、NC7、Operaで試したところ、IE6では固定されますが、他は可変でした。 [ メッセージ編集済み 編集者: Jitta 編集日時 2003-11-06 16:06 ] | ||||||||
|
投稿日時: 2003-11-06 16:27
早速の書込みありがとうございます。
早速やってみます。 つまりこの二点を注意すべきなんですね。 ・font-sizeはきちんと数値で記入する(small等はブラウザによって変わる) ・一般的なフォントにする で、画面全部のフォントを固定したい場合は 例えば スタイルシート側で .BODY { font-size :11px; } などとして、 画面側で <body class="BODY"> ---ソース--- </body> とすれば、body内すべのフォントサイズが11pxに固定されるということで良いのでしょうか。 もちろん、ヘッダーで <LINK href="../css/common.css" type="text/css" rel="stylesheet"> などと書くことも大丈夫です。 で、このときにスタイルシートでフォントサイズは指定されたが、 各テーブル内などのstyleでフォントサイズを新たに指定すれば(15pxに指定)、新たに指定したほうが優先されると言うことでよいのでしょうか？ また、このようにスタイルシートを設定することにより ブラウザで文字のサイズを変更しても、反映されないんでしょうか？ また、Jittaさんの言われるユーザー側が優先されるというのは ユーザー補助のスタイルシート設定のことでしょうか？ | ||||||||
|
投稿日時: 2003-11-06 16:28
ども、ほむらです。
基本的にフォントサイズの指定はemの使用が一般的です。(推奨事項) .NETがわからない僕とくしてはどういう風に崩れてしまうのか想像できないのですが HTMLならばdivを使用しての white-space:nowrapとか%指定のwidthで対応できると思うのですが。。。 ＃まぁ、たしかにいちばん簡単なのはfont-size:??ptなんですけどね。 ＃TABLEを使用したレイアウトをしないほうが良いという程度の制限ですれどね^^;;; ＃ピクセル単位の指定はユーザーの画面解像度でかわる恐れがあります。 [ メッセージ編集済み 編集者: ほむら 編集日時 2003-11-06 16:32 ] | ||||||||
|
投稿日時: 2003-11-06 17:46
emを使うのは、emがフォントの高さを基準とし、ほぼ文字数として使えるからですよね。この事例では、「クライアント側で表示メニューから文字サイズを変えても、表示中の文字の大きさが変わらないこと」なので、emで指定すると変わってしまいます。 また、pxはピクセル単位ですが、画面のプロパティの設定タブ→詳細設定ボタン→全般タブ→DPI設定（XPの場合）を変更すると、変わってしまうらしいです。 #なぜ画素数が変わる？センチメートルとかの方が変わるような気がするが… #あ、１インチを表すのに何ピクセル必要か、か。 #で、１インチの長さは変わらないから画素数が変わる、と。
body {font-size :11px} の、 <body></body> でOK。クラス化する必要はないと思います。 >各テーブル内などのstyleでフォントサイズを新たに指定すれば(15pxに指定)、 >新たに指定したほうが優先されると言うことでよいのでしょうか？ はい。ただし、bodyタグはファイルの先頭で宣言してください。後から定義したものが有効、ですので。 >また、このようにスタイルシートを設定することにより >ブラウザで文字のサイズを変更しても、反映されないんでしょうか？ IEで、メニューの「表示→文字のサイズ」では変更されませんでした。ただし、他のブラウザでは「表示倍率」となっており、変更されます。 >また、Jittaさんの言われるユーザー側が優先されるというのは >ユーザー補助のスタイルシート設定のことでしょうか？ そうです。ページ作成者のスタイルは最優先されますが、「ユーザ補助」の「書式設定」でチェックされたり、ユーザスタイルシート中で「!important」指定をしていたり、他のブラウザでユーザスタイルシートを優先などのオプションをつけたりすると、そちらが優先されます。 Opera使ってユーザスタイルシート優先にすると、かなりおもしろいです。 | ||||||||
|
投稿日時: 2003-11-06 18:34
ども、ほむらです。
良く考えたら僕の言っていることはたけくん氏の言っていることは 僕の意図と全然関係なかったですね。。 僕の都合だけで終わってしまっているようです。。。失礼しました。。 ---------- Jitta氏へ
emを使用する効果はjitta氏の言うとおりですが推奨されている理由はべつです。 ユーザーの指定したフォントサイズを元にするということは ユーザーの文字サイズに関係なく作者の意図した文字構成を作れることをさします。 (大きく表示したい部分は大きく表示するなど) 固定のフォントサイズでも可能なのですがこの場合ですと 目が悪いとか、見易くしたいからと文字を大きくしたいとおもっても 不可能なものになってしまいます。(または解像度による文字サイズの違い) HTMLは製作者側の意図で作るのでなくて、あくまで見る側対してにやさしくつくるのが 理想なので環境依存的な書き方はやめたほうが良い。 と最近言われているみたいです。(またぎきですが。。) スタイル属性が相対的に指定できるものが多くあるのも そのためじゃないかなと僕としても解釈し始めてきました。。。 なので、.NETでは無理なのかもしれませんが･･・HTML的に言えば ユーザーの指定した文字サイズ程度でレイアウトが壊れてしまうまたは 見づらくなってしまう作り方を考え直したほうがいいんじゃないかなと。。。 そういうわけでemの使用を提案した次第です。。。 まぁ、、、なんかつぶやいてる程度に覚えておいていただければ幸いです。 | ||||||||
|
投稿日時: 2003-11-06 18:46
色々書込みくださってありがとうございます。
自分でもやってみやたのですが、疑問に残ることがありまして書込みしました。 スタイルシートは別途作成してあります -成功した場合のソース------------------------------------------------------------ <%@ Page language="c#" Codebehind="Title.aspx.cs" AutoEventWireup="false" Inherits="SS_RampWeb.Title.Title" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>Title</title> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema"content="http://schemas.microsoft.com/intellisense/ie5"> <LINK href="../css/common.css" type="text/css" rel="stylesheet"> </HEAD> <body style="FONT-SIZE: 12px" class="body"> <form id="Title" method="post" runat="server"> <P> <FONT face="MS UI Gothic">aaa</FONT> </P> </form> </body> </HTML> -------------------------------------------------------------------------------- -失敗した場合のソース------------------------------------------------------------ <%@ Page language="c#" Codebehind="Title.aspx.cs" AutoEventWireup="false" Inherits="SS_RampWeb.Title.Title" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>Title</title> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <LINK href="../css/common.css" type="text/css" rel="stylesheet"> </HEAD> <body style="FONT-SIZE: 12px" class="body"> <form id="Title" method="post" runat="server"> <P> <TABLE id="Table1" style="WIDTH: 100%; HEIGHT: 100%" cellSpacing="1" cellPadding="1" width="100%" border="1"> <TR> <TD><FONT face="MS UI Gothic">aa</FONT></TD> </TR> </TABLE> </P> </form> </body> </HTML> -------------------------------------------------------------------------------- -このようにしたら成功した-------------------------------------------------------- <body style="FONT-SIZE: 12px" class="body"> <form id="Title" method="post" runat="server"> <P> <TABLE id="Table1" style="WIDTH: 100%; HEIGHT: 100%" cellSpacing="1" cellPadding="1" width="100%" border="1" class="body"> <TR> <TD><FONT face="MS UI Gothic">aa</FONT></TD> </TR> </TABLE> </P> </form> </body> -------------------------------------------------------------------------------- このようになりました。 body.tableの両方にclass=bodyといれてあるほうは、文字のサイズ変更がきかなく成功です。 しかし、bodyだけのほうは、tableの中は、スタイルシートが反映されず、サイズ変更が可能でした。 なんでこのようになるのか不思議です。 | ||||||||
スキルアップ／キャリアアップ（JOB@IT）
Copyright © ITmedia, Inc. All Rights Reserved.
著作権はアイティメディア株式会社またはその記事の筆者に属します。
当サイトに掲載されている記事や画像などの無断転載を禁止します。
著作権はアイティメディア株式会社またはその記事の筆者に属します。
当サイトに掲載されている記事や画像などの無断転載を禁止します。