CSS大きさの違う2行の見出しで、なおかつ前に装飾

質問

CSSで大きさの違う2行の見出しで、なおかつ前に2行にまたがる装飾をつけたいのですが、可能でしょうか？よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

HTML5の仕様を考慮して考えると
<section>
　<hgroup>
　　<h1>見だしレベル1</h2>
　　<h2>見だしレベル2</h2>
　</hgroup>
</section>
でなければなりません。ひとつのセクションに二つの見出しはつけられない。つける場合は<hgroup>で囲む。
→4.4.7 The hgroup element ( http://www.w3.org/TR/html5/the-hgroup-element.html#the-hgroup-element )
　理屈からはそうなるでしょう。本来は
<section>
　<h1>見だしレベル1</h1>
　<section>
　　<h2>見だしレベル</h2>
ないし
<section><!-- セクショニングコンテンツレベル1 -->
　<h1>見だしレベル１1</h1>
　<section><!-- セクショニングコンテンツレベル1 -->
　　<h1>見だしレベル２</h1>
→4.4.2 The section element ( http://www.w3.org/TR/html5/the-section-element.html#the-section-element )
→4.4.11 Headings and sections ( http://www.w3.org/TR/html5/headings-and-sections.html#headings-and-sections )

　これをHTML4.01,XHTML1.0,XHTML1.1で記述すると
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
ですから・・下のようになっているはずです。
<div class="section">
　<div class="hgroup">
　　<h1>見だしレベル1</h2>
　　<h2>見だしレベル2</h2>
　</div>
</div>

<div class="section">
　<h1>見だしレベル1</h1>
　<div class="section">
　　<h2>見だしレベル</h2>
ないし
<div class="section">
　<h1>見だしレベル１1</h1>
　<div class="section">
　　<h1>見だしレベル２</h1>

となりますね。
　あとはスタイルシートで
div.section h1,div.section h2{
margin:0 auto;line-height:1.8em;
border-left:green solid 4px;
}
/* 念のため */
div.section{margin:0 auto;}

　でいずれのHTMLでも期待されたようになるはずです。
　HTMLが文書構造を示すきちんとしたものでしたら、スタイルシートでいかようにもデザインできます。この場合本文(section)の見出し1と2は、スキマをつめて前側に緑で4px幅のソリッドのborderをつけると書いてあります。

お礼

詳しいご説明ありがとうございます。
実際にご説明どおりやってみて「出来た！ありがとうございます。」と言いたいのですが
web初心者ゆえ時間がかかってしまいますので、先にお礼をさせて頂きます。
本当にありがとうございました。

回答No.3

ORUKA1951

補足です。先に来るほうがレベル自体は高いはずですので、表示サイズを変えるには
div.section h1{font-size:1.3em;}
div.section h2,div.section div.section h1{font-size:2em;}
を追加してくださいね。

お礼

重ね重ね、ありがとうございます。

回答No.1

DrFell

大きなタイトルと小さなタイトルをのタイトルの意味によってソースは違ってきますが、可能です。

例えば、大きな見出しの副題として、小さな見出しなら

<h1 style="border-left:10px solid #999;padding-left:5px;">大きな見出し<br><span style="font-size:small">小さな見出し</span></h1>

別々の見出しをまとめるなら
<div style="border-left:10px solid #999;padding-left:5px;"><h1 style="margin-bottom:5px;">大きな見出し</h1>
<h2 style="font-size:small;margin-top:0px;">小さな見出し</h2></div>

等、他にもいろいろ文章構造によって正しいソースは変わってきますが、可能です。

お礼

早々のご回答ありがとうございました。
ごのような質問サイトを利用するのは初めてなので
回答レスポンスの早さ、ご親切にびっくりしました。
また、このようなサイトを運営されている方々にも感謝します。
本当にありがとうございました。