前回記事、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を使った方が綺麗なイメージになったなぁ・・・。
以上
