CSSとHTMLのフォント指定の混在について

[新着] Webテンプレートを仮オープンしました



0   名前: りある : 2006/01/07 14:53
スタイルシートによるフォント指定とHTMLによるフォント指定が混在するのは好ましくないのでしょうか?
混在する状態とは、例えば、フォントとサイズはスタイルシートでhead内で定義しておき、
色だけ直接HTMLのタグで指定するなどの状態です。
環境による違い・今後の動向など細かいことがよく分かっていないので、どうかご教授の程よろしくお願いします。

1   名前: とうりすがり : 2006/01/07 14:53
>色だけ直接HTMLのタグで指定するなど
具体的にはどういうタグを書こうとしているのでしょう?

2   名前: Z : 2006/01/07 14:53
 FONT要素がなぜ”非推奨”になっているかは、資料が色々とあります。

http://nekoshiki.poke1.jp/guidline/text.html
http://bakera.jp/html/opinion/font.html

 どちらにしても、色の違い”だけ”で情報を伝達しようとするのは問題があるでしょう。

http://nekoshiki.poke1.jp/guidline/color.html#depend-on-color
http://www.zspc.com/documents/wcag10/#gl-color

参考)スタイルシートの理念
http://members.jcom.home.ne.jp/pctips/www/cssintro.html

3   名前: りある : 2006/01/07 14:53
>とうりすがりさん
head内で、

<STYLE TYPE="text/css">
<!--
span#s2{ font-size: 10pt; font-family: "MS ゴシック",sans-serif; }
-->
</STYLE>

としておき、BODY内で、

<span id="s2">
〜〜ということです。<font color="red"><b>ですが、例外もありますので注意が必要です。</b></font>例えば、〜〜
</span>

のような使い方をしようとしています。


>Zさん
情報ありがとうございます。
FONT非対応のブラウザってのが存在するようですね。
「FONTタグはあまりオススメできない」みたいな表記は何度か見ていたのですが、
メジャーなブラウザ4種試して正常に表示されたので、なぜオススメできないのか理解していませんでした。
極力CSSに移行した方がよさそうな感じですね。

4   名前: Z : 2006/01/07 14:53
>>メジャーなブラウザ4種試して正常に表示されたので
 現在どれだけ使用されているかは不明ですが、

http://www.cyanworks.net/archives/browsers/

ブラウザといってもこれだけのものがあります。

 WWWというシステムの上で公開する以上、「メジャーなブラウザ」で見られればよい、ということはアクセシビリティ上おすすめできません。
 もちろんどこまで突き詰めるかは自由ですが、HTMLというものが「どんな環境でも見られるために」考えられたマークアップ言語である以上、まるっきり無視はできない訳です。

http://members.jcom.home.ne.jp/pctips/www/Compatibility.html

 なお、CSSを使ったサイトデザインについて、下記のサイトが参考になるかと思います。

http://deztec.jp/lecture/rn/index.html

5   名前: りある : 2006/01/07 14:53
>Zさん
回答ありがとうございます。
ブラウザって非常に多くの種類があるのですね。

自分のHTMLの存在意義に対する認識が甘かったと思いました。
確かに、「どんな環境でも見られるために」を無視できるならば、
極端な話ですが例えばパワーポイントのデータを使っても同じです。
今まで、単に「サイトを作るための形式」などという認識しかありませんでした。
CSSへ移行するとともに、HTMLに対する認識を改めようと思います。

6   名前: Z : 2006/01/07 14:53
 かならずしもCSS(カスケーティングスタイルシート)デザインでなければいけない、というものではありません。
 CSSも、かならずしもサイト製作者が用意しなければならないものでもないのです。

 きちんとしたマークアップをHTML(XHTML)により行うならば、見栄えについてはブラウザのデフォルトスタイルシート任せでもいいでしょう。

http://deztec.jp/design/05/02/20_css.html
http://deztec.jp/design/04/08/000451.html

 特に2つ目の資料は後半部分にご注目ください。タイトルに惑わされないように。

7   名前: りある : 2006/01/07 14:53
度々の返信、ありがとうございます。
教えていただいた資料、読ませていただきましたが、

HTMLによるマークアップを用いた構造→柔軟性が高い(ただし、柔軟性を前提としたデザインが必要)
CSSによってフォントのピクセル数等を指定→制作者の意図通りのデザインで見せる(ただし、柔軟性はない)

という理解の仕方でいいのでしょうか?
このような理解の仕方でいいのならば、私はできる限りは前者を取りたいですね。
当初、私もWebページ作成ソフトみたいなのを購入したのですが、
スタイルシートによってサイトの縦横のサイズまで固定することを前提とした、
柔軟性の全くない制作方式に違和感といらだちを感じ、結局自分で学び、タグを打つことにした過程があります。

でも、前者を取りたいとは思うものの、前者を取るのであればフォントに関してはやはり考えさせられますね。
改行位置などもうっかり中サイズ前提でやっていたりしますから。

8   名前: Z : 2006/01/07 14:53
>>HTMLによるマークアップを用いた構造→柔軟性が高い(ただし、柔軟性を前提としたデザインが必要)
>>CSSによってフォントのピクセル数等を指定→制作者の意図通りのデザインで見せる(ただし、柔軟性はない)
 そういうわけでもありません。
 見栄えにこだわったでたらめなHTML文書→柔軟性が低い
 見栄えと構造を完全に分離し、HTML文書でもCSSでも文字サイズなど環境依存の属性は避ける→柔軟性が高い

ともいえます。

>>4で示した資料にもあるとおり「"表示結果"ではなく"文章の内容"に即したマークアップに修正します。そうすれば、適切なCSSと組み合わせることで、その文書にふさわしい様々な表示結果を無理なく実現できるようになる」というところにCSS活用の意義があると思います。
 昨今のはやりでいうならばブログツールのスタイルシートと記事内容が分化しているのに似ていますね(もっとも、ブログはHTML文書として文法違反が多々あるそうなのでそのまま転用することはお奨めできませんが)。

資料)
http://nekoshiki.poke1.jp/guidline/markup.html

>>3でほかに問題となるのは、フォント指定をしているところでしょうね。
 フォントは基本的にインストールしてあるコンピュータでしか有効となりませんので指定する意味があまりないと思われます。
 また、色のみによる情報伝達もアクセシビリティ上お奨めできません。

資料)
http://nekoshiki.poke1.jp/guidline/text.html
http://nekoshiki.poke1.jp/guidline/color.html

余談)よい「Webページ製作ガイド」を見つけるにはコツがいります。
http://members.jcom.home.ne.jp/pctips/Tondemo/

9   名前: りある : 2006/01/07 14:53
再びの返信ありがとうございます。

なんとなく、「正しいマークアップ」の意義が分かった気がします。
「重要なので大きく表示したい」ではなく、
「重要だが、閲覧者が重要な要素をどう表示するかは閲覧者の自由」意味でしょうか?

フォント指定に関しては、「デザイン上、できればMS ゴシックで見て欲しい」程度の意図なので、
そのフォントが使えない人にとって無駄となっても問題はないつもりなのですが、
「MS ゴシック」というフォントを表示可能な閲覧者に対しても制作者側のエゴでしかないのかもしれませんね。
もうしばらく検討し、今後どうするのか決めていきたいと思います。

10   名前: Z : 2006/01/07 14:53
>>「重要だが、閲覧者が重要な要素をどう表示するかは閲覧者の自由」意味でしょうか?
 そういうことです。
 FONT要素が”非推奨”なのは、文字の大きさを認識できない環境では意味が伝わらないからです。EM要素とSTRONG要素の方が「強調」という意味が伝わりやすいのです。

 まとめると、下記資料のようなことでしょうね。

http://deztec.jp/lecture/css/css_why.html

11   名前: りある : 2006/01/07 14:53
おかげさまで結構理解が深まったと思います。
色々とありがとうございました。

一覧へ戻る