最近のテーマの見出しって昔みたいに枠付けたりとか華美な枠が付かないものが多くなってきました。
記事メインってことだからそりゃそうだと思うんだけど、それでもシンプルな枠を付けたくなります。

でも、画像使ったりとかせずにちょこちょこっとしたシンプルで簡単な css で書きたいなっと。

それでいくつか書いてみました。

css で作るシンプルな見出し枠 inline 型

ソース
<h2 class="midashi">単なる枠</h2><br /><style><br />h2.midashi{<br />border:1px solid #ccc;<br />padding:10px;<br />}<br /></style><br />



ソース
<h2 class="midashi"><div>よくある枠</div></h2><br /><style><br />h2.midashi{<br />border:1px solid #ccc;<br />padding:10px;<br />}<br />h2.midashi div{<br />border-left:8px solid #000;<br />padding:5px 10px;<br />font-size:20px;<br />}<br /></style><br />

以外にわからない css のセレクタの話をひとつ。

h2.midashi div{

h2.midashiの部分を翻訳すると
h2.midashi は、「h2 にくっついてる class midashi 」
空白をおいて div 。

つまり、「midashi クラスを持った h2 以降の div の属性」

さらにこれを
h2.midashi div , p{

などと、カンマで区切って書くと、
「midashi クラスを持った h2 以降の div の属性」
と
「midashi クラスを持った h2 以降の p の属性」
となります。

カンマではなく、空白で区切ると
h2.midashi div p{

「midashi クラスを持った h2 以降の div 以降の pの属性」
となります。

セレクタ 空白区切りとカンマ区切り

カンマ区切り

<div class="a1">DIV クラスa1 に囲まれたもの<div>DIV に囲まれたもの<p> Pタグに囲まれたもの</p></div></div><br /><style><br />div.a1{<br />color:#f00;<br />}<br />div.a1 div{<br />color:#00f;<br />}<br />div.a1 div , p{<br />color:#f60;<br />}<br /></style><br />

空白区切り

<div class="a1">DIV クラスa1 に囲まれたもの<div>DIV に囲まれたもの<p> Pタグに囲まれたもの</p></div></div><br /><style><br />div.a1{<br />color:#f00;<br />}<br />div.a1 div{<br />color:#00f;<br />}<br />div.a1 div p{<br />color:#f60;<br />}<br /></style><br />