スタイルシートを一から勉強したい

タイトルのとおりです。

サイトを手書きで作っています。
基礎的なHTMLは読めますし書けます。
HTMLの勉強は、辞書※（株）アンク　HTMLタグ辞典　とHTMLの基礎サイトで、独学です。

しかし、スタイルシートを勉強したいんです。
HTMLチェッカーでもスタイルシートを使え、のオンパレードになってしまいます（得点は80点から95点くらいまでとれています）。
アクセシビリティの悪さ（？）も理解しているつもりですが、きちんと一から勉強してスタイルシートを使ってみたいと思っています。

しかし『どのスタイルシート解説サイトを見ても、さっぱりわからない』のが現状です。
おすすめサイトか、おすすめ辞書、あるいは別の学習方法があれば教えていただけたらと思います。
※お金がないので、教室に通え、は勘弁してください。

No.7 ベストアンサー 回答者： UKY 回答日時： 2005/04/13 21:34

...前の回答からの続きです。

ちょっと検索してみましたが、スタイルシートの ID・クラスに関する解説はあっても HTML の ID・クラスに関するいい解説はなかなか見つかりませんね。ということで今 私がここで書くことにします。

例えば、こういう日付のリストがあったとします。

<ul>
<li>4月10日</li>
<li>4月13日</li>
<li>4月14日</li>
<li>4月16日</li>
<li>4月20日</li>
</ul>

これだけだと、ただ ul 要素の中に五つ li 要素があるというだけで、それぞれの li 要素を区別することができません。(あ、さすがに「要素」という言葉は大丈夫ですよね?)
ということで、各要素に名前をつけることにします。それが、id 属性です。

<ul id="Date-list">
<li id="April10">4月10日</li>
<li id="April13">4月13日</li>
<li id="April14">4月14日</li>
<li id="April16">4月16日</li>
<li id="April20">4月20日</li>
</ul>

こういう風に id 属性をつけておくと、スクリプトやスタイルシートで名前を直接指名して内容を書き換えたり色を変えたりできるわけです。
id は要素につける固有の名前なので、一つの文書の中で同じ名前を 2 回以上使うことはできません。

名前とは別に、要素の特徴・性質を表すのが class 属性です。日付なら、「休日 (Holiday)」とか「水曜日 (Wednesday)」みたいなクラスが指定できますね。

<ul id="Date-list">
<li id="April10" class="Holiday Sunday">4月10日</li>
<li id="April13" class="Weekday Wednesday">4月13日</li>
<li id="April14" class="Weekday Thursday">4月14日</li>
<li id="April16" class="Holiday Saturday">4月16日</li>
<li id="April20" class="Weekday Wednesday">4月20日</li>
</ul>

id は一つの要素に 1 個でしたが、class は一つの要素にいくつでも指定できます。(上のようにスペースで区切ります) 上に書いたほかにも、「誕生日 (Birthday)」や「行事あり (Event)」などのクラスがあってもいいですね。
同じ特徴・性質の要素は、同じ名前の class を指定するのがミソです。こうしておくと、例えばスタイルシートで、休日 (Holiday) は赤、平日 (Weekday) は黒で表示、というような一括指定ができるのです。

id/class 属性は、HTML のほとんどの要素に付けることができます。もちろん付けなくても何も問題はないのですが、付けておくとスクリプトやスタイルシートを使うときに何かと便利だというわけです。

以上が HTML の ID とクラスについての簡単な説明です。

で、肝心の解説サイトですが、やはりちょっと検索したくらいではなかなかいい解説は見つかりませんね。私の知る限り、ここ↓はなかなか取っ付きやすいと思うのですがどうでしょうか?
http://www6.plala.or.jp/go_west/beginner/css/
flowermaze さんが紹介されている『「初めてのホームページ講座」の「CSS 初心者向け講座」』もだいぶよく出来ていると思います。

CSS は覚えることは多いですが文法はとても単純なので、基礎文法を覚えたら後は自力でリファレンス (辞典) を見ながら勉強できます。
中級レベルになったらリファレンスとしてここ↓がお勧めです。
http://hp.vector.co.jp/authors/VA022006/

この回答へのお礼

私はこのご説明を、今から何回も理解できるまで、読みます。丁寧なご説明、ありがとうございます。

id属性・class属性については、なんとなくわかりました。
もう少し、読み続けないといけないのですが。

>id/class 属性は、HTML のほとんどの要素に付けることができます。

こういう状況に今まで迫られていませんでした。
スタイルシートならいっぺんに変更が利くのは、class属性のせい（？）なのでしょうが、そういうページでない場合は、class属性を付けていくのも大変な気がしてきました。

とにかくご説明を、完全に理解できるまで読みます。

お付き合いいただき、本当にありがとうございました。
お挙げになったサイトも拝見します。
お世話になりました。

お礼日時：2005/04/13 22:54

No.6 回答者： UKY 回答日時： 2005/04/13 18:51

> 少なくとも、挙げていただいたサイトのチェックでは100点を取りました。

それはよかった。HTML に関する基礎はちゃんと正しく覚えられているということです。

> 現にHTMLチェッカーで満点を取っていません。

「HTMLチェッカー」というのはおそらく Another HTML-lint (AHL) のことだと思いますが、AHL は採点がかなり厳しいので、別に 100 点にこだわることはありません。もちろん高得点が取れればそれはそれでよいことですが、満点を目指して意地になる必要はありませんよ。

私が「正しい HTML」といったのは、文法的に正しいというよりも、思想的に正しいということです。要するに、文法 (使い方) が正しくても目的 (使い道) が間違っているとうまくいかないということなんですが、前の回答で紹介した10問テストも思想的正しさに関するテストです。逆に AHL は主に文法をテストするものです (多少は思想的正しさに関するチェックもしますが)。
まあ、文法とか思想とかいってもよく分からないと思うので、あまり気にしないで下さい。

> セレクタ？ID?クラス？

どうやらあまり解説がうまくないところに当たってしまったみたいですね。用語の説明をろくにしないというのは (悪い意味で) ありがちといえばありがちですが。

ただ、ID とクラスに関してはスタイルシートではなくHTMLに関する知識なので、今ここで覚えてしまいましょう。(もちろんスタイルシートでも ID やクラスの話は出てくるんですが、それを理解するにはまず HTML に出てくる ID とクラスを理解しておかないといけないので)

...以下、次の回答に続きます

この回答へのお礼

>私が「正しい HTML」といったのは、文法的に正しいというよりも、思想的に正しいということです。

例えばの話ですが、レイアウトのためにテーブルを使ってしまう（現在、やむを得ずそうしている）、HTML文書の「体裁」をよくしたいがために、表を作るわけではないのに、そういう風にしてしまっている。
こういうのが「思想的に正しくない」ということなのでしょうか。
あまり気にしないで、とおっしゃっておられますので、理解力がない私のことです、お見捨て置きください。

>どうやらあまり解説がうまくないところに当たってしまったみたいですね。

いえいえ。これは私の理解力がないゆえのことですので。

お礼日時：2005/04/13 22:21

No.5 回答者： flowermaze 回答日時： 2005/04/13 09:43

人によって解説との相性があると思うので、タグ手書きの人対象の、初心者向けスタイルシート講座をいろいろ集めてみました。

「初めてのホームページ講座」の「CSS 初心者向け講座」
http://www.hajimeteno.ne.jp/stylesheet/beginner/ …

「とほほのWWW入門」の「とほほのスタイルシート入門（基礎知識）」
http://www.tohoho-web.com/css/basic.htm

「TAG INDEX」の「スタイルシートの基本」
http://www.tagindex.com/stylesheet/index.html

「Webページ作りのお勉強」の「スタイルシート」
http://masaboo.cside.com/new_css1/cs_menu.html

「超初心者のためのホームページ講座」の「超初心者のためのスタイルシート講座」
http://park16.wakwak.com/~html-css/css/index.html

HTMLも同じですが、基本的な概念や書き方を理解したら、あとは実践あるのみです。

この回答へのお礼

回答ありがとうございます。
挙げていただいたサイトを、見ていきたいと思います。
実は、とほほさんのところはお邪魔しております。

>HTMLも同じですが、基本的な概念や書き方を理解したら、あとは実践あるのみです。

なるほど。自分では概念はわかっているような気がする（気…）のですが、書き方においては皆目わかっていません。

しかし「実践あるのみ」ですね、頑張って勉強します。

お礼日時：2005/04/13 22:11

No.4 回答者： UKY 回答日時： 2005/04/12 21:48

回答というよりはアドバイスですが

あなたの学んだHTMLは正しいHTMLですか? というのも、世の中には(このサイトにも)間違ったHTMLがいろいろと流布しているので、独学でもそうでなくても、間違ったHTMLを覚えている人が非常に多いのです。ところがスタイルシート(特にCSS)は正しいHTMLと一緒に使わないとその力を100%発揮できません。また、正しいHTMLを書くことはアクセシビリティ向上への第一歩でもあります。(むしろスタイルシートを使うこと自体はアクセシビリティと関係ない)
ということで、スタイルシートについて学ぶ前にHTMLについて見直してみることをお勧めします。少なくともここ↓のクイズで100点取れないならまだスタイルシートに手を付けない方が賢明だと思います。(スタイルシートを使う意味がない)
http://www.parkcity.ne.jp/~chaichan/src/yoihtml. …
もう既に正しいHTMLを理解しているというのであれば、これまでのことは聞き流してください。

さて、「どのサイトを見ても分からない」とのことですが、具体的にどのサイトを見たのでしょうか? こちらとしてはあなたが既に見たサイトを紹介してもあまり意味がないので、どこがどう分からなかったのか教えていただきたいのですが……。

この回答へのお礼

アドバイスありがとうございます。

少なくとも、挙げていただいたサイトのチェックでは100点を取りました。
（というか、これらの項目、どれもチェックすべきじゃないと思うんだけど、チェックしないと100点取れないのか？という風に悩んだんです、結局1個もチェックしなかった）
だからといって、正しいHTMLの知識があるのかと突っ込まれてしまえば、それは否だと思います。
現にHTMLチェッカーで満点を取っていません。

>ところがスタイルシート(特にCSS)は正しいHTMLと一緒に使わないとその力を100%発揮できません。

そうですか。
つまり、HTMLチェッカーで満点を取るようでなければ、使ってはいけない、ようなものなのでしょうか。

アクセシビリティと書いたのは、もちろん音声読み上げや画像非表示にしてあるユーザあるいはブラウザ、というのが念頭にあるのですが、どちらかといえば、スタイルシートが、全ブラウザには対応していない、ということに重きをおいて書いたものです。
（そんな大したサイトじゃないですから、全ユーザに対応しますなんて大それたことは申しませんが、たとえば、画像非表示のブラウザでも一応内容はわかる、そういうサイトでありたいとは思っています。あくまで希望ですが。）
言葉が足りずに失礼いたしました。

>さて、「どのサイトを見ても分からない」とのことですが、具体的にどのサイトを見たのでしょうか?

Googleで上位に上がった、スタイルシート講座を、5件ほど廻ったのですが、やはり基礎知識が全くないため、書いてあることが理解できない、そう思ったんです。
（セレクタ？ID?クラス？どこも同じようなことしか書いてないので仕方ないといえば仕方ないんですが。）

だからこそ、今のままではダメだなと思ったんです。

お礼日時：2005/04/12 23:12

No.3 回答者： kuls1999 回答日時： 2005/04/12 21:41

こちらはいかがでしょうか？

CSSに限らず、重宝してます。
関連リンクも多いですよ。

参考URL：http://allabout.co.jp/computer/hpcreate/

この回答へのお礼

回答ありがとうございます。
行ってみました。関連リンクから探していかないと、いけないみたいですね、今日はちょっとダメですが、時間のあるときにゆっくり探してみようと思います。

お礼日時：2005/04/12 22:59

No.2 回答者： naoki_s 回答日時： 2005/04/12 21:37

私もpoke1さんと同じく、手書き（全部ではないけど）でサイトを作成しています。

最近ようやくスタイルシートを導入し、独学で勉強しました。
そのときに参考にした本を紹介します。
「HTMLとスタイルシートによる最新Webサイト作成術」
　・HTMLとスタイルシートの基礎をコンパクトにまとめてあります。

「スタイルシート スタイルブック」
　・スタイルシートを使うとこんなに便利だ！というのを理解できます。実用性ではやや劣りますが、スタイルシートの概念をつかむには最適だと思います。

「スタイルシートサンプルブック」
　・リファレンスとして使っています。

あと、作成時に「HTML Project2」というフリーソフトを使っています（下記URL）。

参考URL：http://www1.ttcn.ne.jp/~kaneto/hproj2/htmlprojec …

この回答へのお礼

回答ありがとうございます。
挙げていただいた3冊の本を検索してみたいと思います。

フリーソフトのサイトも少しだけですが拝見しました。
しかしこれを使いこなすためには、スタイルシートの正確な知識が必要となりそうですね。

お礼日時：2005/04/12 22:57

No.1 回答者： ponponponponpon3 回答日時： 2005/04/12 21:36

参考になれば・・・

参考URL：http://hotwired.goo.ne.jp/webmonkey/authoring/st …

この回答へのお礼

回答ありがとうございます。
混んでいるのか、なかなか開けなかったので、時間を置いてから行ってみます。

お礼日時：2005/04/12 22:54