前回記事、CSSで隣接セレクタを使い、見出しタグ(h1)タグとpタグの間を設定するのHTML5的なバージョンを書いていきたいと思います。8月17日記事
イメージ

目次



2つ目以降のarticleタグにmargin-top:25pxを適用したい

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を使った方が綺麗なイメージになったなぁ・・・。

以上

最終更新:2015年08月17日 08:57
添付ファイル