Spaces:
Sleeping
Sleeping
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>セクション背景色テスト</title> | |
| <style> | |
| /* common-css.tsからコピーしたスタイル */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| background-color: #f5f5f5; | |
| } | |
| .container { | |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| overflow-x: hidden; | |
| } | |
| /* セクション背景色を順番に応じて設定 */ | |
| /* 重要: .container直下のsectionタグのみを対象とする */ | |
| /* 1番目、4番目、7番目... - 白背景 */ | |
| .container > section:nth-of-type(3n+1) { | |
| background: white ; | |
| padding: 80px 40px; | |
| color: #333; | |
| } | |
| /* 2番目、5番目、8番目... - グレー背景 */ | |
| .container > section:nth-of-type(3n+2) { | |
| background: #f8f9fa ; | |
| padding: 80px 40px; | |
| color: #333; | |
| } | |
| /* 3番目、6番目、9番目... - 黒背景 */ | |
| .container > section:nth-of-type(3n) { | |
| background: #222222 ; | |
| padding: 80px 40px; | |
| color: white; | |
| } | |
| /* セクション背景色ごとのテキスト色設定 */ | |
| /* 白背景セクション（1番目、4番目、7番目...）のテキスト色 */ | |
| .container > section:nth-of-type(3n+1) * { | |
| color: inherit; | |
| } | |
| /* グレー背景セクション（2番目、5番目、8番目...）のテキスト色 */ | |
| .container > section:nth-of-type(3n+2) * { | |
| color: inherit; | |
| } | |
| /* 黒背景セクション（3番目、6番目、9番目...）のテキスト色 */ | |
| .container > section:nth-of-type(3n) * { | |
| color: white ; | |
| } | |
| /* 白・グレー背景セクションのタイトル色を明示的に設定 */ | |
| .container > section:nth-of-type(3n+1) h1, | |
| .container > section:nth-of-type(3n+1) h2, | |
| .container > section:nth-of-type(3n+1) h3, | |
| .container > section:nth-of-type(3n+2) h1, | |
| .container > section:nth-of-type(3n+2) h2, | |
| .container > section:nth-of-type(3n+2) h3 { | |
| color: #222222 ; | |
| } | |
| /* デバッグ用スタイル */ | |
| .debug-info { | |
| position: fixed; | |
| top: 10px; | |
| right: 10px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| padding: 10px; | |
| font-size: 12px; | |
| z-index: 1000; | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="debug-info"> | |
| 背景色パターン:<br> | |
| 1,4,7番目: 白 (#fff)<br> | |
| 2,5,8番目: グレー (#f8f9fa)<br> | |
| 3,6,9番目: 黒 (#222222) | |
| </div> | |
| <div class="container"> | |
| <!-- セクション1: 白背景になるはず --> | |
| <section> | |
| <h2>セクション1（白背景）</h2> | |
| <p>このセクションは白背景で、文字色は黒（#333）になるはずです。</p> | |
| <p>nth-of-type(3n+1) セレクタが適用されます。</p> | |
| </section> | |
| <!-- セクション2: グレー背景になるはず --> | |
| <section> | |
| <h2>セクション2（グレー背景）</h2> | |
| <p>このセクションはグレー背景（#f8f9fa）で、文字色は黒（#333）になるはずです。</p> | |
| <p>nth-of-type(3n+2) セレクタが適用されます。</p> | |
| </section> | |
| <!-- セクション3: 黒背景になるはず --> | |
| <section> | |
| <h2>セクション3（黒背景）</h2> | |
| <p>このセクションは黒背景（#222222）で、文字色は白になるはずです。</p> | |
| <p>nth-of-type(3n) セレクタが適用されます。</p> | |
| </section> | |
| <!-- セクション4: 白背景になるはず --> | |
| <section> | |
| <h2>セクション4（白背景）</h2> | |
| <p>このセクションは再び白背景で、文字色は黒（#333）になるはずです。</p> | |
| <p>パターンが繰り返されています。</p> | |
| </section> | |
| <!-- セクション5: グレー背景になるはず --> | |
| <section> | |
| <h2>セクション5（グレー背景）</h2> | |
| <p>このセクションは再びグレー背景（#f8f9fa）で、文字色は黒（#333）になるはずです。</p> | |
| <p>パターンが正しく繰り返されています。</p> | |
| </section> | |
| <!-- セクション6: 黒背景になるはず --> | |
| <section> | |
| <h2>セクション6（黒背景）</h2> | |
| <p>このセクションは再び黒背景（#222222）で、文字色は白になるはずです。</p> | |
| <p>3の倍数番目は常に黒背景です。</p> | |
| </section> | |
| <!-- セクション7: 白背景になるはず --> | |
| <section> | |
| <h2>セクション7（白背景）</h2> | |
| <p>このセクションは3回目の白背景です。</p> | |
| <p>パターンが正常に動作していることを確認できます。</p> | |
| </section> | |
| <!-- セクション8: グレー背景になるはず --> | |
| <section> | |
| <h2>セクション8（グレー背景）</h2> | |
| <p>このセクションは3回目のグレー背景です。</p> | |
| <p>グレー背景でも文字がはっきり読めることを確認します。</p> | |
| </section> | |
| <!-- セクション9: 黒背景になるはず --> | |
| <section> | |
| <h2>セクション9（黒背景）</h2> | |
| <p>このセクションは3回目の黒背景です。</p> | |
| <p>白文字がはっきり表示されていることを確認します。</p> | |
| </section> | |
| </div> | |
| </body> | |
| </html> |