スタイルシートについて（２）

0   名前： たかぴ ： 2005/06/25 15:22
＜先ほど、スレ書き込み中に作成されてしまったので、追記します。＞

初歩的な質問ですみません。

説明文の使用例等でスタイルシートに
<!-- ○○○○○　-->
と、よく見かけますが、使用法と意味・使用上の注意点などあれば教えて下さい。

また、class属性を入れ子で使用する場合・・・
例えば
<p class="1">ＴＡＧ</p>
の<p>タグの中にさらに<p>タグを使用し、その<p>タグにclass="2"のような属性は付けれるのでしょうか？

<p class="1">ＴＡＧ
<p class="2">ＨＴＭＬ
</p></p>
のような感じです。
1   名前： モノ ： 2005/06/25 15:22
<!-- ○○○○○ -->

HTMLにおけるコメントを示します。
このサイト内にも説明があります。


＜見当違いだったため削除。＞
2   名前： カヅサツ ： 2005/06/25 15:22  ［URL］
> <p>タグの中にさらに<p>タグを使用

できないです。

p要素の内容に、p要素（を含むブロック系要素）を置くことはできません。だからこそ、p要素は終了タグが省略可能なのです。

<p class="1">ＴＡＧ
（-- ブラウザはここに </p> があるものとして解釈する --）
<p class="2">ＨＴＭＬ
</p>
</p>（←そしてこの終了タグが余る）

div要素ならばp要素（を含むブロック系要素）を置くことができます。
3   名前： び ： 2005/06/25 15:22
CSS2では、クラス名の先頭に数字やハイフン(-)を
直接用いることはできません。
バックスラッシュ(\)でエスケープするなどの(※)必要があります。
.\1{ property: value; }
しかし、ユーザ・エージェントのこのエスケープへの対応状況は
あまり良くないので、使わないほうが無難です。

※なんか、いろいろあるんですよ。
私の理解が十分ではないので書きませんが。
4   名前： たかぴ ： 2005/06/25 15:22

レスありがとうございます。

ガヅサツさんのコメントですが、ｐ要素内にｐタグは置けないとの事ですが、divタグ要素内にdivタグ要素や、div要素内にtable要素ならどうでしょう？
（tableタグにもclass属性付けれますよね？）
と、言うのも、例で出した
<p class="1">ＴＡＧ
<p class="2">ＨＴＭＬ
</p></p>
と、言うソースで、「ＨＴＭＬ」と言う文字を表す場合に継続してcalss="1"のスタイルを適用したいのです。
p要素内にp要素を置けない、と言うのは理解できましたが・・・。

最近ですが、

<div class="3">ＴＡＧ
<table class="4">
<tr><td>ＨＴＭＬ</td></tr>
</table></div>

のようなソースで上手くtableにclass=3"のスタイルが適用されませんでした。

また、同じように、div要素のスタイルを継続して次のdiv要素のスタイルにも適用させたいのですが、可能でしょうか？



5   名前： たかぴ ： 2005/06/25 15:22
引き続き、コメントします。

<!-- ○○○○○ -->
についてですが、サイト内に説明があるのは分かっていたのですが、よくサイト内のタグやスタイルシートの使用例のソースに使われているので、特別な使用法があるのかと思っていました。
サイト内の「クラスを使ったスタイル指定」の説明のソース例で

<STYLE TYPE="text/css">
<!--

P.color1 { color: red; }
.color2 { color: blue; }
.size { font-size: 10pt; }

-->
</STYLE>

と、<!-- -->が使われているのは、<body>内に<!-- -->があり、それでプラウザに書かれないようにしてるだけで、<!-- -->内に書かれているスタイルは、それ以下のタグに適用されると思っていいのでしょうか？


6   名前： カヅサツ ： 2005/06/25 15:22  ［URL］
> ガヅサツさんのコメントですが、

カヅサツです。

> ｐ要素内にｐタグは置けないとの事ですが、
> divタグ要素内にdivタグ要素や、div要素内にtable要素ならどうでしょう？

div要素内にはどんな要素も置けます（もちろん、titleなど、head要素内にしか置けない要素を除く）。
蛇足ですが、「タグ要素」とは普通言いません。

> <div class="3">ＴＡＧ
> <table class="4">
> <tr><td>ＨＴＭＬ</td></tr>
> </table></div>

> のようなソースで上手くtableにclass=3"のスタイルが適用されませんでした。

CSSには継承するプロパティとしないプロパティがあります。
例えば、color と font-size などは継承されますが、borderやmargin、paddingなどは継承されません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
.test3{
color: red;
font-size: x-large;
border-width: 1px;
border-style: solid;
border-color: black;
}
</style>
</head>
<body>
<p>テスト</p>
<div class="test3">ＴＡＧ
<table class="test4">
<tr><td>ＨＴＭＬ</td></tr>
</table>
</div>
</body>
</html>
7   名前： カヅサツ ： 2005/06/25 15:22  ［URL］
> <body>内に<!-- -->があり、それでプラウザに書かれないようにしてるだけで、
> <!-- -->内に書かれているスタイルは、
> それ以下のタグに適用されると思っていいのでしょうか？

はい。
style要素内に <!-- --> を書くのは、古いブラウザが style要素を解釈せず、そのまま表示してしまうことへの配慮です。

しかしながら、style要素が（予約語として）HTMLのルールに導入されたのは HTML 3.2 の 1997年です。もはや、それ以前のブラウザは「古すぎる」と一蹴してかまわないと思います。また、1997年以後に登場したブラウザが対応していないなら、それはバグですので、少なくとも初心者が心配することではないと思います。
8   名前： たかぴ ： 2005/06/25 15:22
カヅサツさん、名前間違って書いてしまってましたね。すみません。
しかも、丁寧なコメントありがとうございます。

div要素内にtableタグを置いた場合に上手くスタイルが適用されなかったのは、継承されるプロパティかどうかの問題だったのですね。
丁寧にソースまで書いて頂いて、ありがとうございました。
<!-- -->も理解できました。
また、何か分からない事があったらスレ立てると思いますが、宜しくお願いします。
一覧へ戻る