カテゴリー: 知識情報演習II

こんばんは、4年みつゆきです。
今日はよく晴れていて空が非常に綺麗な日で、筑波山がよく見えました。
ただ、かなり寒く半袖にシャツ１枚という格好はかなり堪えました…
微妙に足が出てしまいましたが今日の質問です。
----------------------------------------
Q.
HTMLを作成する課題で、インライン要素に対して背景色を指定したいのだが
IEではできているがfirefoxで反映されていない。
A.
問題のソースコードを見たところ、
<span><font><H1></h1></font></span>
となっていて文法エラーになっていたため、
インライン要素とブロック要素の説明をしました。
----------------------------------------
###以下高みを目指す人向けの薀蓄###
さて、今回の相談のような「ブラウザ間での挙動が違う」という悩みですが、
文字の大きさが微妙に違う(デフォルト値の差)や、
高さや幅が微妙に違う(解釈の違い)ではなく、
「そもそも表示されたりされなかったりする」といった現象は、
文法ミスによるものということが大抵です。
(HTMLはかなり極端な文法エラーでもほとんどの場合で表示はしてくれるので、
そこの実装の仕方が表示の有無というブラウザ間の差に繋がる)
というわけで、ケアレスミスをなくす要因にも繋がるので
さらなる高みを目指したい人は最初の内はバリデータで検証することを
心がけると良いと思います。
http://validator.w3.org/
本家のW3CのHTMLは英語ですが、CSSの方は日本語にも対応しています。
また、日本語に対応したhtmlバリデータも色々とあります。
是非お試しください。
***
今回の質問の技術的な解説
HTML(XHTML)では文書を構成する個々の内容を「要素」と呼んでいますが、
この要素は「ブロック要素」と「インライン要素」の２種類があります。
ブロック要素は見出しや段落など文書の骨格となる部分で、
インライン要素は主に文章の１部分として扱われる部分です。
ブロック要素の中には他のブロック要素やインライン要素を入れることができますが、
インライン要素の中にはインライン要素かデータしか入れることができません。
さらに言うと、全てのインライン要素は何かのブロック要素の中に入っている必要があります。
ここで、相談にあったソースコード中の要素はそれぞれ
font – inline
span – inline
h1 – block
ですので、spanやfontの中にh1を入れるのは間違いとなります。
h1の中にfontやspanを入れるのは問題ありません。
***
さらに言えば、font要素はHTMLでは別にいいのですが
XHTMLにおいては廃止された(=使ってはいけない)要素です。
理由は構造と表示の分離という、CSSの意義そのものになります。
まあHTMLだったら別に使っていても問題はないのですが、
<span>を使って直接background-colorを指定するのであれば、
<span>にまとめて記述してしまいましょう。
例えば
<span style=”background-color:#000;”><font color=”#f00″>hoge<font></span>
という記述の場合は
<span style=”background-color:#000; color:#f00;”>hoge</span>
とまとめることができます。
文責：池田(twitter;@lumely)