■--HTMLとスタイルシート
 >>>ひろ   -- 2002/02/21-09:36..No.[3799]
    はじめまして。
私は初心者なので、HTMLの本を買ってホームページを作り始めました。
その本に書いてある通りに、リンクの色とかを”LINK”や”VLINK”で指定していました。
ところがある人から最近はそういうのはスタイルシートで指定することになっているから私のやり方では駄目だと言われてしまいました。
その一方で、お友達からはスタイルシートはまだまだ対応していない機械もあるからなるべく使わない方がいいと言われました。
どちらも私なんかよりホームページやインターネットのことに詳しい人たちなのでどうしたらいいのか分からなくなってしまいました。
本当にHTMLで指定するやり方は駄目なのでしょうか。




>>> モーニング狼。   -- 2002/02/21-10:12..No.[3800]
 
    わかりやすく例えるならば、「理想」と「現実」のようなものです。

HTMLの仕様を決める機関が、
「タグは文章構成を定義するのに使用して、デザイン等はスタイルシートで指示しよう」
と提唱しています。
そういった意味では、
>ところがある人から最近はそういうのはスタイルシートで
>指定することになっているから私のやり方では駄目だと言われてしまいました。
は理想論として正しいことです。
この方の意見からすると、<font>や<marquee>タグは使用しないようにするべきで、文章も段落毎に<p>タグをつけるべきです。

ところが現実では、スタイルシートによる指示はブラウザを作る開発側の解釈にまかせているので、結果がまちまちになります。
ヘタをすると反映されなかったり表示が狂ったり、スタイルシートをフォローしてなかったりします。
結果としてはタグの中にデザインの指示をいれた方が比較的ちゃんと反映されたりします。
よって、
>その一方で、お友達からはスタイルシートはまだまだ対応していない
>機械もあるからなるべく使わない方がいいと言われました。
は現実論として正しいことです。
 

>>> モーニング狼。   -- 2002/02/21-10:12..No.[3801]
 
    サンプルとして、表題と文章、リストを表現するにあたって比較するソースを紹介します。
(作者としては、表現したい事は同じと言う意味ですが、理想と現実ではソースが変わるという例えです)
-----------------------------
---理想論---(意訳的表現)
<DTD宣言>
<html>
<head>
<meta宣言>
<title>タイトル</title>
<各タグやクラスのstyle定義>
</head>
<body>
<h1>表題</h1>
<p>文章段落</p>
<ol>
<li>リスト要素</li>
</ol>
</body>
</html>

---現実論---(意訳的表現)
<html>
<head>
<meta宣言>
<title>タイトル</title>
</head>
<body>
<font size="大きい数字"><b>表題</b></font><br>
<font size="小さい数字">文章段落</font><br>
<br>
<font size="小さい数字">1.リスト要素</font><br>
</body>
</html>
---------------------------
私の場合は、比較的理想論に近い形でHTMLを記述します。
理由としては、後になってHTMLを加工する場合に(特にperl等人力以外で加工する場合)、「表題」は「表題として」解釈させて加工した方がやりやすいからです。
例えば「文字が大きい」=「表題」と考えるのは当の「作者」のみかもしれません。
他の人にとっては「文字が斜めで太い文字」=「表題」かもしれません。
デザインによって「表題」の仕様が変わるのでは、プログラムを組むときには大変手間がかかります。
二つの異なるデザインのページの「表題を削除する」というプログラムを組むのに、現実論の方のHTMLでは、二つのタグの表現があった場合、
・<font size="大きい文字">というタグでくくっている文字
・<font size="中くらいの文字"><b><i>というタグでくくっている文字
といった二つのタグの表現を同時に解釈して処理しなくてはならず、
作者はそのつもりでなくとも、<font size="中ぐらい"><b><i>は全て「表題」として処理されてしまい、プログラム上では削除される恐れがあります。
理想論の場合は
・<h1>というタグでくくっている文字
を削除して終わります。(<h1>は「表題」を表すタグで「論理マークアップ」と呼ばれます)

また、いざデザインを変更する場合も、スタイルの定義を変更するだけでデザインが変わるので、理想論の方が利便性が高いです。
後々の事を考えるならば、理想論を取り入れておき、どうしようもない所だけ現実論を取り入れるというスタンスが私にとっては一番現実的なやりかただと思っています。
 

>>> モーニング狼。   -- 2002/02/21-10:45..No.[3802]
 
    >また、いざデザインを変更する場合も、スタイルの定義を変更するだけで
>デザインが変わるので、理想論の方が利便性が高いです。
の補足です。

一例をあげます。

---理想論のファイル構成---

index.html--───┐
document01.html ─┼─style.css
....02〜98....      │
document99.html─┘

として、すべてのhtmlをデザインを設定するファイルstyle.cssにリンクします。

各html内には
<link rel="stylesheet" href="style.css">
と<head>〜</head>のタグ内に記述し、

style.cssで
<body>で背景の画像は〜〜.gifにしてね
<h1>は4の大きさで表現してね
<p>は1の大きさで表現してね
とか指示します。

ある日、ページを見ている人から
「文字が小さいよ!もっと大きくして!」
とクレームがあったとします。

現実論でhtmlを組んでいた人は、
index.htmlとdocument01〜99.htmlの計100個の.htmlファイルを修正しなくてはなりません。
(各htmlファイルに30個の<font>タグがあった場合は、3000の修正個所になります。一つ修正するのに10秒かかるならば8時間20分かかります)
理想論でhtmlを組んでいた人は、
style.cssの中の
<p>は1の大きさで表現してね

<p>は2の大きさで表現してね
と一文字変更するだけで修正は終了します。

理想論の方が現実的ですね(笑)
 

>>> 梨生   -- 2002/02/21-11:07..No.[3803]
 
    ひろさんが心配なさっているように、タグでの指定、スタイルシートで
の指定、どちらかが「ダメ」ということはありません。

助けになるかどうかわからないのですが、私が自分のページを作る場合
は、モーニング狼。さんのおっしゃるところの「理想」と「現実」の妥
協点を自分なりに見つけて、スタイルシートによる指定とタグによる指
定を、各ブラウザでの対応状況を考慮しつつ、おりまぜて使っていま
す。いろいろなブラウザでの対応状況も書いてある「スタイルシート辞
典」や「タグ辞典」といった本を手元において、たとえば「文字を小さ
くしたい」と思ったらまずその方法をタグの本とスタイルシートの本の
両方で調べて、スタイルシートによる指定が多くのブラウザで対応して
いればスタイルシートで、スタイルシートによる指定が一つのブラウザ
でしか対応していないようならタグを使って、というようにしていま
す。なるべくスタイルシートでいけるところは、スタイルシートを使う
ようにはしていますが、なかなか難しいものです。

あとは、どのブラウザまで対応させるか、という問題になりますが、私
はネットスケープの4.75と6.1、それとインターネットエクスプローラ
ーの6と、(一応)Lynxというテキストブラウザでも内容が読めるかど
うかのチェックをしています。本当は他にもたくさんブラウザはある
のですが、なかなか全てには手が回らないです。まあ一般的にはIEと
NNが一番多く使われているブラウザなので、その二つで表示確認がで
きればよいと思います。

#モーニング狼。さんの説明、とてもわかりやすかったです。
 

>>> ひろ   -- 2002/02/21-12:45..No.[3804]
 
    モーニング狼。さん
丁寧に教えてくださってありがとうございました。
梨生さんもおっしゃってますが、モーニング狼。さんの説明は、すごくわかりやすかったです。
モーニング狼。さんの説明をもとにして、自分なりに「理想」と「現実」を考えて作っていこうと思います。
実は今回のことではじめてスタイルシートというものがあるというのを知ったので、まだよくわかっていないのですが、きちんと勉強して見やすくて素敵なページを作れるようにがんばりたいと思います。

梨生さん
いろいろなブラウザでの対応状況も書いてある「スタイルシート辞
典」や「タグ辞典」というものがあるのですね。
今度お小遣いをもらったらさっそく本屋さんに行ってみます。
いろいろとアドバイスありがとうございました。
 

>>> モーニング狼。   -- 2002/02/21-14:18..No.[3808]
 
    >ひろさん
お役にたてれば幸いです。

>梨生さん
私も各ブラウザでの対応状況によって試行錯誤しました。
最近では、見る人のメインブラウザを予測して、他ははしょるとかの楽をする事を考えたりしてますが(笑)
 

>>>   -- 2002/02/21-15:26..No.[3809]
 
    CSSについての説明などがあるサイトです。

HTML鳩丸倶楽部 ☆ 水無月ばけらのHTML蘊蓄サイト
http://www.ne.jp/asahi/minazuki/bakera/html/hatomaru
スタイルなCSSの基礎講座
http://www.parkcity.ne.jp/~chaichan/src/cssmain.htm
ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo.html

CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/index.html
ブラウザごとのHTML/CSSバグ?
 http://dfj.cool.ne.jp/html/html_css_bug.html
バグ・未実装を利用した振り分けについて
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm
IE3,IE4,NN4でのCSSのバグと回避方法
 http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html

W3C CSS 検証サービス
 http://jigsaw.w3.org./css-validator/
 

>>> ひろ   -- 2002/02/21-19:46..No.[3822]
 
    叶さん
サイトのご紹介、ありがとうございました。
ゴーグルとかで調べたら、たくさんありすぎてどこから見てよいのか分からなくて、困っていたところでした。
本当に助かりました。
これから行ってきます。
 

>>> 梨生   -- 2002/02/21-20:16..No.[3823]
 
    >ひろさん

私もお役に立てれば幸いです。がんばってくださいね。

参考までに、私が使っている本はこれです↓
http://www.amazon.co.jp/exec/obidos/ASIN/4798000272/qid=1014290040/sr=1-2/ref=sr_1_2_2/249-2675885-0885961
 

>>>   -- 2002/02/22-07:30..No.[3832]
 
    >ひろさん
折角なのでもう1冊、私のオススメの本を。

詳解 HTML&CSS&JavaScript辞典
http://www.shuwasystem.co.jp/books/wwwsrch/cgi-bin/content/0220/index.htm
秀和システムのサイト
http://www.shuwasystem.co.jp/

これは最近買った本なのですがHTML・CSS・JavaScriptが1冊にまとまっている上、正しい解説なので重宝しています。
フルカラーで分厚いので重いのが難点なのですが(笑)
秀和システムの本はどれも分かりやすく、正しい情報が載っているのでオススメですよ。

頑張って下さいね。

 

>>> ひろ/解決しました。   -- 2002/02/22-18:57..No.[3848]
 
    梨生さん、叶さん
わざわざオススメの本まで教えてくださってありがとうございました。
本当に丁寧に教えてくださる方がたくさん居て、とてもありがたいです。
まだまだ基礎の段階から進めていませんが、頑張ります。

アドバイスをくれた方々、ありがとうございました。
これで解決とさせていただきます。
 

戻る



女の子お絵かき掲示板ナスカiPhone修理