特定の見出しのみ前後の空白を消したい。

質問

CSSに書き込んで、h1～6までそれぞれに設定を割り振れる事は分かったのですが、h2～6のどれかで囲った見出しが複数あり、その中の一つだけにclass、idを設定して装飾などの設定を変えることは可能ですか？

h2タグを使って見出しをいくつか作成しました。
ですが最初の1つだけ前後の改行が邪魔で消したいです。
試しにHTMLを
<span class="name"><h2>見出し</h2></span>
CSSを
.name { margin: 0px; }
としたのですが、変わりません…。

HTML初心者なので、とんでもないレベルのミスをしてしまっているかもしれませんが、教えてくださると嬉しいです。

回答No.1

DrFell · ベストアンサー

●間違いについて
<span class="name"><h2>見出し</h2></span>
これ間違いです。spanの中にはh2は入れられません。入れられたとしても、spanの指定がh2に反映されることなく、h2への指定はそのまま残るのでなんら変わらないと思います。

【勉強すべき事】
内包できる要素は、要素により決まっています。親になる要素も決まっています。
文書宣言によるのですが、html4までなら、「インライン要素に、ブロックレベル要素は入れられません」と単純なルールですが、html5はそうも言いきれません。がしかし、spanの中にはh2はhtml5でも入れられません。
このあたりのことは、きちっと入門書を前から順番に習得する場合には最初のうちにでてくるのですが、つまみ食い的な学習方法だと知らないままの方が躓く所です。

h2にはspanは入れられます。がしかし、h2の中にspanを入れた所で、結果は新しいspanのmarginが0になるだけなので、なんら、変わらないでしょう。

●提案
では、どうするかというと、特定の見出しのみ<h2 class="name">とされてはいかがでしょうか？
classを付ける為だけにspanやidを入れるのは、つまみ食い的に学習をするかたによく見られる間違いです。

【勉強すべき事】
spanやdivにだけidやclassが付けられると思っている方がおられますが、全てのタグに付けられます。

●エスパー提案
さらに、最初の１つだけとのことですので、なにの最初かわからないのですが、
<h1>見出し</h1>
<h2>今回の見出し</h2>
h1とすぐ後に続くh2への指定は、
h1+h2{margin-top:0;}
で、対応可能です。この場合、ことさらに、class="name"を入れる必要はありません。

【勉強すべき事】
セレクタの文法
前述ののセレクタは「隣接兄弟セレクタ」と呼ばれる物です。

また、最初の子要素を示す、「first-child疑似クラス」というセレクタを利用しても、class="name"を付ける必要はありません。

回答No.2

ORUKA1951

・class名はデザインのためじゃない!!
　　あくまで、その文書を構成している要素をタグを使ってマークアップする。
　　その中で複数の【文書の構造上】複数で構成されるグループはclassで、
　　唯一のものは、idで分類する。

　　　<h2 class="plant Name" id="Camellia_japonica">椿</h2>
　　　<p><span class="plant Name">椿</span>はツバキ科の・・・</p>
　　　<h2 class="animal Name" id="Nyctereutes_procyonoides">タヌキ</h2>
　　　<p><span class="animal Name">タヌキ</span>はイヌ科タヌキ属の・・・</p>

・スタイルシートで、HTML文書中のある要素にスタイルを指定するときには、その文書構造を元に指定していきます。
　段落(p要素)は、マージンを消して一文字インデントさせるなら
　　p{margin:0;text-indent:1em;}
　見出し(h2)で植物名が書かれているものは赤字にしたいのでしたら、
　　h2.plant{color:red;}
　植物・動物の名前は太字でしたら
　　*.Name{font-weight:bold;}
　段落中の名前はアンダーライン引きたければ
　　p span.Name{text-decoration:underline;}
　最初の段落だけ先頭の文字を

　CSS(カスケーディングスタイルシート)のカスケードの仕組みを理解していないと、複雑怪奇でメンテナンスができなくなるHTML、CSSを書くことになります。
　そのため、CSSの命といえるカスケード
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
　をまず身につけましょう。仕様書でもプロパティより前に説明がある。