HTML CSSを勉強中です <li class=

質問

勉強中といっても他の人が作ったWebページの意味を読み解くことをやっています

CSSファイルには　.kugiri {border-bottom:2px dotted #cccccc;}
.naka {text-align:center; list-style-type:none; background-color:#990000; color:#ffffcc; } という設定がありまして
HTMLには　<li class="kugiri naka">トップページ</li> という記述があります

こういう記述の仕方について　解説があるサイトをご存知の方アドバイスよろしくお願いします

回答No.3

noname#158634

下の人の長文は初心者が今すぐ理解しなければならない内容ではないので無視してかまいません。安心してください。

＞こういう記述の仕方
別に何らかのテクニックとかではないので、HTMLとCSSの基本をいろいろなサイトや本で勉強してください。
「HTMLタグ」は「タグが書かれた場所にあるものの意味を示しWebブラウザに解釈させる」という道具だから、本来は「他の人が作ったWebページの意味を読み解く」という作業に意味はない。どのタグがどういう場所に使うべきかを知るには講座サイトや基礎の書籍を見るのがまず一番です。
もちろんサイトや本に間違いがないとは言えませんが、今時はXHTMLやらなんやらの兼ね合いによって各講座サイトもだいぶ記述が正確だし、正しい答えが知りたければ下の人が言うように正しい「仕様」というものがあるのでそれを確認すれば分かります。

最後に、繰り返しになりますが、「こういう記述の仕方」とあなたが呼んでいるものはHTMLとCSSの基礎です。特別なことは何もなく、ただ基本を勉強すればいいだけです。

お礼

ありがとうございました

回答No.2

ORUKA1951

追加です。
『<li class="kugiri naka">トップページ</li> という記述があります』
という記述は、望ましくないと書かれています。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
注。 CSSではclass属性が非常に大きな力を持っている。 したがって文書作成者は、体裁に殆ど何の関係も無い要素（HTMLだとDIV要素やSPAN要素など）をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。 しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より

　この場合
<div class="nav">
　<li><a href=""></a></li>
　<li><a href=""></a></li>
</div>
と、文書構造を示すようにHTMLが書かれていれば、　
div.nav li:first-child{border-bottom:2px dotted #cccccc;}
div.nav li{text-align:center; list-style-type:none; background-color:#990000; color:#ffffcc; }
とか、書けるはずです。このnavというclass名は、HTML5で採用される--従来ナビゲーションのセクションを示すブロックのclass名を要素にしたものです。
　そのようなclass名には、section,header,aside,footerなどがあります。kugiriとかnakaももってのほかですが、よく見かけるwrapper,content,leftなども、変です。

　このように、他人のソースやネットでのアドバイスでは、適切でないものを身につけてしまう恐れがあります。

『こういう記述の仕方について　解説があるサイト』は、あくまで仕様書です。

お礼

ありがとうございました

回答No.1

ORUKA1951

知識をつまみ食いしても身につきません。
資料は
★5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
にあります。
　その中の「5.8.3 クラスセレクタ（Class selectors） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )」が説明ですが、読まれたらわかりますが、その情報だけでは不十分です。

　ウエブの情報は、どうしても不完全です。HTMLを学ぶとき、HTML 4.01 仕様書邦訳 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )を読んだように、スタイルシートも「CSS2勧告邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )」をめくりましょう。(ただしCSSは、現在標準と魅されているのはCSS2.1で、すこし変更があります)
　その上で、わからない記述を聞かれたらよいと思います。

お礼

ありがとうございました