<span>タグのクラス指定

質問

お世話になります。
なにぶん素人に毛が生えた程度の人間なので、質問が拙いことはご容赦ください。

現在、HPの作成をしており、ホームページビルダーを使い、XHTML1.0Strict＋外部CSSで記述しています。

そこで問題が一つあり、ご教授願えればと思いました。

CSSにて<span>タグのスタイルを下記のように指定しました。

span {color:#C93;}

すると、本文内で<span></span>で囲んだ範囲の色が上記指定色に変わりました。

ところが、下記のようにクラス名を入れて指定したところ、ホームページビルダー上では色がちゃんと変わるのに、実際にブラウザプレビューで確認すると、色が変わっていませんでした。

CSS　 ／　.01 {color:#C93;}　または　span.01 {color:#C93;}
本文中　／ <span class="01"></span>

私にはさっぱり分からないのですが、なぜこうなるのか分かる方いらっしゃいましたらご教授ください。

なお、クラス名を変えても同様でした。

宜しくお願い致します。

回答No.1

t_ohta · ベストアンサー

クラス名の1文字目に数字は使用できませんが、その制限に引っかかってブラウザが認識してくれないのではないでしょうか。

お礼

まさしくその通りでした。
あまりに単純でお恥ずかしい限りです・・・。
ありがとうございました。

回答No.2

ORUKA1951

IDには使用できる文字の制限があります。
HTMLの仕様上は、class名は、CDATA( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-cdata )ですから、特に制限はないはずです。
しかし、CSSの仕様では、クラスセレクタに数字から始まる文字は使えません。

しかし、クラスセレクタと同値であるはずの属性セレクタでは指定できます。

★HTML的には正しく、それが文書構造上必要なら、属性セレクタで指定します。
span[class~="01"]{color:red;}

★通常はそのようにclass名は不要のはずです。なぜなら、divやspanについては
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　であって、デザインのためにつけるものではないからです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　適当な要素がないか
EM:
強調を示す。
STRONG:
より強い強調を示す。
CITE:
引用か、他のリソースへの参照であることを示す。
DFN:
囲われた用語が定義を行っているものであることを示す。
CODE:
コンピュータのコード片であることを示す。
SAMP:
プログラムやスクリプトなどの出力例であることを示す。
KBD:
ユーザから入力されるべきテキストであることを示す。
VAR:
変数またはプログラム引数のインスタンスを示す。
ABBR:
省略形であることを示す。例えば、WWW、HTTP、URI、Mass.、等。
　それが重要なものでしたら<strong></strong>や<em></em>でマークアップして、スタイルシートで指定すべきですし、これらに適当なものがないときに、最後の手段としてclass名で区別すべきです。例えば<span class="mark">、あるいは言語が変わるのでしたら<span class="en-us">です。

　class名は、デザインのためにつけるものじゃないです。数年後、あなたが手を入れようとして<span class="01">じゃ意味が分からないですよ。もちろん検索エンジンも・・・
★これはspanだけじゃなく、特にDIVについては、もっと重要です。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

お礼

細かくご指摘いただきありがとうございました。
もうちょっと分かりやすくするよう努力します。