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タグと隣接セレクターを使って間隔を調整で書いていきたいと思います。
以上
