CSSを書いていると、見出しタグ(h1タグなど)の下にpを書きたい場合、または、pを書いた後に再び見出しタグに戻りたいときはよくあると思います。 そんな中で、隣り合うタグで、それぞれの間隔を指定したい場合どうすればよいのか隣接セレクタ、兄弟セレクタ(+)を使った記述をしていきたいと思います。8月16日記事

イメージ



目次


^

隣同士になった場合にのみ適用させる方法

例えば、上のようレイアウトの場合見出しタグh1の次にpが来ます。この隣同士になった場合兄弟セレクタ(+)を使ってh1の次にpが来る場合の時にpに適用させる方法は次の通りです。

h1 + p{
   /*pの要素に適用される*/
   margin-top: 25px;など
}

このように書けばh1のあとにきた pの要素に適用することができます。

コード

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">
       <h1>見出し1</h1>
       <p>見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章見出し1の文章</p>
       <h1>見出し2</h1>
       <p>見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章見出し2の文章</p>
    </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追加*/
}
#main h1{
	color: #00F;
}
#main p{
	color: #F00;
}
/*#main h1 + #main p{ こういう表記はだめ*/
h1 + p{/*こういう記述か以下のような記述*/
	margin-top: 50px;
}
#main p + h1{/*こういう表記もいい*/
	margin-top: 25px;
}

CSSでmarginプロパティが効かない時の対策も参考にしてください。

まとめ

h1とpと順番に表記していく場合には有効です。別方法だと、sectionタグやarticleタグを使ってもHTML5的でよさそうですね。またCSS3のarticleタグと隣接セレクターを使って間隔を調整で書いていきたいと思います。

以上

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