1. <body id="sample2">
  2. <h1>Lopan cafe</h1>
  3. <p>これは「<code>~</code><span>(間接セレクタ)</span>」のサンプルです。<br>
  4. <span>※所々に入るパンの話はダミー文として読み流してください。<br>
  5. ※各テキストの要素名が分かるように<code>::before</code>疑似要素と<code>::after</code>疑似要素を使って、タグを表示してます。</span></p>
  6. <article>
  7. <h2>Lopan cafeのご紹介</h2>
  8. <p>「<code>~</code><span>(チルダ)</span>」<span>(間接セレクタ)</span>を使って、以下のふたつのスタイルを用意しました。</p>
  9. <ul>
  10. <li>「<code>h3 ~ p</code><span>(<code><h3></code>より下に書かれた同じ階層の<code><p></code>)</span>」には赤い枠線をつける</li>
  11. <li>「<code>blockquote ~ p</code><span>(<code><blockquote></code>より下に書かれた同じ階層の<code><p></code>)</span>」にはグレーの背景色をつける</li>
  12. </ul>
  13. <p>それぞれ、どのように反映されるか見てみましょう。</p>
  14. <section>
  15. <p>このテキストは、<code><h3></code>より上にあるので、赤い枠線はつきません。</p>
  16. <h3>Lopanのパン</h3>
  17. <p>このテキストのように「<code><h3></code>より下に書かれた<code><p></code>」には、赤い枠線がつきます。<br>
  18. 下の<code><ol></code>の中の<code><li></code>の中にも<code><p></code>がありますが、<em>同じ階層</em>ではないので、赤い枠線はつきません。</p>
  19. <ul>
  20. <li><p>カンパーニュ</p></li>
  21. <li><p>ポンデケージョ</p></li>
  22. <li><p>クロワッサン</p></li>
  23. <li><p>チョココロネ</p></li>
  24. <li><p>マフィン</p></li>
  25. </ul>
  26. <p>このテキストは、<code><h3></code>と<em>同じ階層</em>にあるので、赤い枠線がつきます。</p>
  27. <section>
  28. <h4>パン</h4>
  29. <p>このテキストは、<code><h3></code>と<em>同じ階層</em>じゃないので、赤い枠線はつきません。下の<code><blockquote></code>の中の<code><p></code>も同じく。</p>
  30. <blockquote cite="http://ja.wikipedia.org/wiki/パン">
  31. <p>1718年発行の『御前菓子秘伝抄』には、酵母菌を使ったパンの製法が記載されている。酵母菌の種として甘酒を使うという本格的なものであるが、実際に製造されたという記録はない。最初にパン(堅パン)を焼いた日本人は江戸時代の末の江川英龍とされ、彼を日本のパン祖と呼ぶ。<cite>パン - Wikipedia</cite></p>
  32. </blockquote>
  33. <p>2つめのスタイル「<code><blockquote></code>より下に書かれた同じ階層の<code><p></code>」は、背景色がグレーになります。</p>
  34. </section>
  35. <p>このテキストは<code><h3></code>と<em>同じ階層</em>。</p>
  36. </section>
  37. <section>
  38. <p>このテキストは、上の<code><h3></code>と同じアウトラインレベルですが、セクションが違うので、赤い枠線はつきません。</p>
  39. <h3>店舗について</h3>
  40. <p>Lopan cafeは架空の店舗です。</p>
  41. <blockquote cite="http://cafe.lopan.jp/pan/">
  42. <p>手作りパンの香りがほっこりやさしい気持ちにしてくれる、あなたの街のパンカフェです。<br>
  43. おいしいパンとあったかカフェで、心やすらぐ特別なひとときをご提供いたします。<cite>Lopanのパン | カフェ&ベーカリー「Lopan cafe」</cite></p>
  44. </blockquote>
  45. <p>美味しそうなパンがめくるめくよりどりみどり。</p>
  46. </section>
  47. </article>
  48. </body>
  1. /* :::::: sample2 :::::: */
  2. #sample2 {
  3. padding: 10px;
  4. }
  5. #sample2 h2,
  6. #sample2 h3,
  7. #sample2 h4,
  8. #sample2 p {
  9. margin: 0 0 10px;
  10. }
  11. #sample2 p span,
  12. #sample2 li span {
  13. font-size: 0.8em;
  14. }
  15. #sample2 li p {
  16. margin: 0;
  17. }
  18. #sample2 code,
  19. #sample2 em {
  20. margin: 0 2px;
  21. }
  22. #sample2 article,
  23. #sample2 section {
  24. padding: 10px;
  25. border: 1px #ccc solid;
  26. }
  27. #sample2 section {
  28. margin-bottom: 10px;
  29. }
  30. #sample2 blockquote cite {
  31. font-size: 80%;
  32. font-style: normal;
  33. }
  34. #sample2 h3 ~ p {
  35. border: #e34556 2px solid;
  36. }
  37. #sample2 blockquote ~ p {
  38. background: #eee url(../img/bg_amiten.gif);
  39. }
  40. #sample2 section::before,
  41. #sample2 h1::after,
  42. #sample2 h2::after,
  43. #sample2 h3::after,
  44. #sample2 h4::after,
  45. #sample2 p::after,
  46. #sample2 ul::before,
  47. #sample2 li::before,
  48. #sample2 blockquote::before {
  49. padding: 0 3px;
  50. background: white;
  51. color: #999;
  52. font: 10px/1 "lucida grande",Arial,sans-serif;
  53. font-size: 10px;
  54. font-weight: normal;
  55. vertical-align: text-top;
  56. }
  57. #sample2 section::before { content: "<section>"; }
  58. #sample2 h1::after { content: "<h1>"; }
  59. #sample2 h2::after { content: "<h2>"; }
  60. #sample2 h3::after { content: "<h3>"; }
  61. #sample2 h4::after { content: "<h4>"; }
  62. #sample2 p::after { content: "<p>"; }
  63. #sample2 ul::before { content: "<ul>"; }
  64. #sample2 li::before { content: "<li>"; float: left; }
  65. #sample2 blockquote::before { content: "<blockquote>"; }

Lopan cafe

これは「~(間接セレクタ)」のサンプルです。
※所々に入るパンの話はダミー文として読み流してください。
※各テキストの要素名が分かるように::before疑似要素と::after疑似要素を使って、タグを表示してます。

Lopan cafeのご紹介

~(チルダ)(間接セレクタ)を使って、以下のふたつのスタイルを用意しました。

  • h3 ~ p<h3>より下に書かれた同じ階層の<p>」には赤い枠線をつける
  • blockquote ~ p<blockquote>より下に書かれた同じ階層の<p>」にはグレーの背景色をつける

それぞれ、どのように反映されるか見てみましょう。

このテキストは、<h3>より上にあるので、赤い枠線はつきません。

Lopanのパン

このテキストのように「<h3>より下に書かれた<p>」には、赤い枠線がつきます。
下の<ol>の中の<li>の中にも<p>がありますが、同じ階層ではないので、赤い枠線はつきません。

  • カンパーニュ

  • ポンデケージョ

  • クロワッサン

  • チョココロネ

  • マフィン

このテキストは、<h3>同じ階層にあるので、赤い枠線がつきます。

パン

このテキストは、<h3>同じ階層じゃないので、赤い枠線はつきません。下の<blockquote>の中の<p>も同じく。

1718年発行の『御前菓子秘伝抄』には、酵母菌を使ったパンの製法が記載されている。酵母菌の種として甘酒を使うという本格的なものであるが、実際に製造されたという記録はない。最初にパン(堅パン)を焼いた日本人は江戸時代の末の江川英龍とされ、彼を日本のパン祖と呼ぶ。パン - Wikipedia

2つめのスタイル「<blockquote>より下に書かれた同じ階層の<p>」は、背景色がグレーになります。

このテキストは<h3>同じ階層

このテキストは、上の<h3>と同じアウトラインレベルですが、セクションが違うので、赤い枠線はつきません。

店舗について

Lopan cafeは架空の店舗です。

手作りパンの香りがほっこりやさしい気持ちにしてくれる、あなたの街のパンカフェです。
おいしいパンとあったかカフェで、心やすらぐ特別なひとときをご提供いたします。Lopanのパン | カフェ&ベーカリー「Lopan cafe」

美味しそうなパンがめくるめくよりどりみどり。