CSS {font-size:数値px}の指定について

2023/10/14 03:24

このQ&Aのポイント

CSS {font-size:数値px}の指定について規定のフォントサイズを設定する方法について質問です。
IE6とNN7では問題なく動作するが、IE7、NN7、Firefox1.5では指定したフォントサイズが反映されない現象が発生しています。
規定のフォントサイズを数値指定して表示させたい場合、どのような指定方法が適切なのか教えてください。

ベストアンサー

CSS {font-size:数値px}の指定について

2006/08/28 11:29

こんにちわ。外部CSSにて、以下のような記述を読み込んでいます。 .12 {font-size:12px} 参考書を見た所、IE6とNN7は対応と書いてありました。 WindowsXPSP2にて、IE7で閲覧した所問題ありません。同環境にて、NN7とFirefox1.5では文字が指定しない場合と同じ大きさで表示されてしまいました。指定箇所は、様々でDivやFontに入れても、TableやTDに指定を行っても表示が全く変わりませんでした。例：<td class="12">のように私の指定や記述が間違いなのでしょうか。％でのフォントサイズは、環境によって拡大縮小が異なると思い、出来るだけ数値指定で表示をさせたいです。ご存知の方おりましたら、ご教授頂けると幸いです。

ele_ele
お礼率92% (47/51)

HTML
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

skybluecloud
ベストアンサー率42% (6/14)

2006/08/28 12:18 回答No.1

どの程度の範囲をそのpxフォントで表示したいのかが、わかりませんが、例えば全体のフォントサイズを12pxで固定したい場合は、<body></body>のBODYに対してCSSを定義すればそのフォントサイズになります。 CSSのソースは、 body { 　　　font-size: 12px; } こうなります。質問者様が使われている<td class="12">のようなものは、クラスと言って、繰り返し使うであろう、特定のタグに対してのサイズ指定となります。前述した<body>に対してのCSS設定は全てに対してのフォントサイズ固定ですが、<body></body>内にある他の要素のフォントサイズを変更したい場合は質問者様の方法で指定できます。参考URLにお勧めCSS学習サイトを記載致します。ご参考になりますと幸いです。

参考URL：: http://www.stylish-style.com/index.html

その他の回答 (3)

noname#20377

2006/08/28 13:00 回答No.4

あと、原則小文字で統一すべきとされるXHTMLですが id属性だけは大文字の方が良いと思いますこの辺は色々あるらしいんですが、以下の文書のリンク先、リンク切れてましてorz http://www.akatsukinishisu.net/itazuragaki/id/id_attr_in_HTML

質問者

お礼 2006/08/28 15:20

まとめてこちらにお礼をさせて頂きます。原因は、ご指摘の数字での開始でした。１２からｔ１２へと変えてみました所、多種のブラウザで動作確認ができました。技術的に非常に分かりやすいご回答を頂きまして誠にありがとうございました。

noname#20377

2006/08/28 12:52 回答No.3

相変わらす自信なし。以下全部引用だけで済ませるけど http://www.kanzaki.com/docs/html/htminfo17.html#selector-chars >セレクタで使用できる文字 CSSのセレクタ名で使える文字は、HTMLでの名前文字より制約が厳しく、「使用できる文字は大小アルファベットと数字 [A-Za-z0-9] 、ASCII以外のUnicode文字、およびハイフン（-）とアンダースコア（_）に限る。識別名は数字もしくはハイフンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない」とされています。HTMLではコロン( : )、ピリオド( . )も2文字目以降の名前文字として認められているので注意してください。〔補足〕 CSS 2.0の定義では「アルファベットで始まり、アルファベット、数字、ハイフン（およびUnicodeの一部）のみで構成される、ただし最初の文字には数字/ハイフンは使えない」とされていたため、この仕様に従えば（正しくないとされていた例） p.test_paragraph {color: red} と記述したクラスセレクタは誤りということになり、事実いくつかのブラウザではスタイルが反映されませんでした。アンダースコア( _ )が使えないという制約は、CSS2仕様書の正誤表(Errata in REC-CSS2-19980512)およびCSS 2.1で削除されています。なお、ピリオド( . )などの文字は、「\」でエスケープすればセレクタに用いることができます。 ====================== 参考 http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-identifier Section 4.1.1 (and D2) * All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML. * In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]). * In CSS2, a backslash (\) character indicates three types of character escapes. First, inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline). Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning. Third, backslash escapes allow authors to refer to characters they can't easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number. If a digit or letter follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that: 1. with a space (or other whitespace character): "\26 B" ("&B") 2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B") In fact, these two methods may be combined. Only one whitespace character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must itself either be escaped or doubled. * Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not). http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html * The "nmchar" token should also allow the range "A-Z". * In the rule for "any" (in the core syntax), change "FUNCTION" to "FUNCTION any* ')'". [2001-04-03] The underscore character ("_") should be allowed in identifiers. The definitions of the lexical macros "nmstart" and "nmchar" should include it and become, respectively: nmstart [a-zA-Z_]|{nonascii}|{escape} nmchar [a-zA-Z0-9-_]|{nonascii}|{escape} 4.1.3 Characters and case In the third bullet, add to point 1.: 1.with a space (or other whitespace character): "\26 B" ("&B") the following text: "In this case, user agents should treat a "CR/LF" pair (13/10) as a single whitespace character." [2001-07-30] The underscore should be allowed in identifiers. Change "In CSS2, identifiers [...] can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-)" to: In CSS2, identifiers [...] contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-) and the underscore (_)

noname#20377

2006/08/28 12:24 回答No.2

Firefox 3.0a 再現しました。class名が数字で始まっているためのようです以下テストケースです。hoge.htmlとして保存しました>以後の回答者様 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>実験</title> <style> .a12 {font-size:12px;} .a15 {font-size:15px;} .12 {font-size:12px;} .15 {font-size:15px;} td.16 {font-size:16px;} td.17 {font-size:17px;} </style> </head> <body> <table> <caption>実験テーブル1</caption> <tbody> <tr><td class="a12">あ</td><td class="a15">い</td></tr> </tbody> </table> <table> <caption>実験テーブル2</caption> <tbody> <tr><td class="12">あ</td><td class="15">い</td></tr> </tbody> </table> <table> <caption>実験テーブル3</caption> <tbody> <tr><td class="16">あ</td><td class="17">い</td></tr> </tbody> </table> </body> </html> http://web.xii.jp/iec/html/memo/id-class 当たり見るとclass名はアルファベットで始められるようですねぇ・・・他のいくつかのサイトではid、class共にアルファベット始まりだという記述も見るのですが・・・ W3Cの文書を読んでいないので正確なことはわかりませんから、調べてみる価値はあるかも。もし上記文書が正しいなら、bugzilla.mozilla.orgを漁ることになりそうですね