「CSSで隣接セレクタを使い、見出しタグ(h1)タグとpタグの間を設定する」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
CSSを書いていると、見出しタグ（h1タグなど）の下にpを書きたい場合、または、pを書いた後に再び見出しタグに戻りたいときはよくあると思います。
そんな中で、隣り合うタグで、それぞれの間隔を指定したい場合どうすればよいのか隣接セレクタ、兄弟セレクタ（＋）を使った記述をしていきたいと思います。8月16日記事
~
~
イメージ
#image(brother.png,width=500)
~
~
目次
#contents
~
^
*隣同士になった場合にのみ適用させる方法
例えば、上のようレイアウトの場合見出しタグh1の次にpが来ます。この隣同士になった場合兄弟セレクタ(+)を使ってh1の次にpが来る場合の時にpに適用させる方法は次の通りです。
h1 + p{
/*pの要素に適用される*/
margin-top: 25px;など
}
このように書けばh1のあとにきた&color(red){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タグと隣接セレクターを使って間隔を調整]]で書いていきたいと思います。
~
~
以上
CSSを書いていると、見出しタグ（h1タグなど）の下にpを書きたい場合、または、pを書いた後に再び見出しタグに戻りたいときはよくあると思います。
そんな中で、隣り合うタグで、それぞれの間隔を指定したい場合どうすればよいのか隣接セレクタ、兄弟セレクタ（＋）を使った記述をしていきたいと思います。8月16日記事
~
~
イメージ
#image(brother.png,width=500)
~
~
目次
#contents
~
^
*隣同士になった場合にのみ適用させる方法
例えば、上のようレイアウトの場合見出しタグh1の次にpが来ます。この隣同士になった場合兄弟セレクタ(+)を使ってh1の次にpが来る場合の時にpに適用させる方法は次の通りです。
h1 + p{
/*pの要素に適用される*/
margin-top: 25px;など
}
このように書けばh1のあとにきた&color(red){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タグと隣接セレクターを使って間隔を調整]]で書いていきたいと思います。
~
~
以上
