前回記事、CSSで隣接セレクタを使い、見出しタグ(h1)タグとpタグの間を設定するのHTML5的なバージョンを書いていきたいと思います。8月17日記事
イメージ
目次
articleタグでmargin-topなどとすると、最初のarticleタグのほうも上側が空いてしまいます。 2番目にくるもの以降、間隔を設定したい場合はarticle同士で隣接セレクターを使います。
二番目にくるもの以降間隔をあけていきたい場合CSSに次のように記述していきます。
article.Column + article.Column{ margin-top: 25px; }
などと書いていきます。
HTML部
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>隣接セレクタの使い方</title> </head> <body> <div id="wrapper"> <div id="main"> <article class="Column"> <h1>見出し1</h1> <p>見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章</p> </article> <article class="Column"> <h1>見出し2</h1> <p>見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章</p> </article> <article class="Column"> <h1>見出し3</h1> <p>見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章見出し3の文章</p> </article> </div> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ #wrapper{ margin: 10px auto; width: 600px; min-height:500px; background: #FFC; border:solid 1px #000;/*margin-topが効かない現象がおこるのでborder追加*/ } #main{ margin-top: 50px; width:400px; min-height:300px; background: #FCF; border:solid 1px #000;/*margin-topが効かない現象がおこるのでborder追加*/ } article.Column h1{ color: #00F; } article.Column p{ color: #F00; } article.Column h1 + p{ margin-top:50px; } article.Column + article.Column{ margin-top:25px; /*margin-bottom: 25px;ちなみにこれを書くと、50pxの幅にはならず、25pxの高さのままで一番下のarticleだけ25px空く。*/ }
articleタグと隣接セレクターを使った方法もHTML5的で非常に表記がシンプルになると思います。
追記:構造をシンプルにするためにpadding使わなかったけど、paddingを使った方が綺麗なイメージになったなぁ・・・。
以上