/* ===================================================== ここからCSS（見た目のデザイン）です。 初心者の方でも追いやすいように、 「何のための設定か」を1行ずつコメントで説明しています。 ===================================================== */ /* ---- 全体の共通設定（リセットCSS） ---- */ * { /* 全ての要素の余白計算をわかりやすくする設定 */ box-sizing: border-box; } html { position: relative; /* ★修正★ 背景をぼかすための、位置の基準をbodyからhtmlに変更した */ overflow-x: hidden; /* 横方向にはみ出しても、横スクロールバーを出さないようにする */ overflow-y: auto; /* スクロールの主役はhtml側だけにする(理由は下記) */ } /* ========================================================== ★修正メモ(2回目)★ -------------------------------------------------------------- スマホで見たときに、ページの下の方に「左右に動く横スクロール バー」が出てしまう不具合があった。 原因:このすぐ下にあった「ぼかし背景(body::before)」が、 top/left/right に -20px を指定していたため、body の横幅より 20px×2(左右)ぶん広がっていた。それを覆い隠す担当のはずの overflow-x: hidden が html にしか付いておらず、bodyには 付けていなかったため(1つ上の修正メモ参照)、はみ出した分が 隠しきれず、横スクロールできてしまっていた。 直し方:ぼかし背景を「body::before」ではなく「html::before」に 変更した(detail.htmlのdetail.cssと同じ方式)。こうすることで、 はみ出す相手が body ではなく html 自身になるので、html に 付けてある overflow-x: hidden だけで、はみ出した分をきちんと 隠せるようになる。bodyの方に overflow-x: hidden を追加する 必要が無くなったので、スクロールバーが2本になる古い不具合も 再発しない。 ========================================================== */ /* 背景専用のぼかしレイヤー(オープニング画面・他ページと同じ仕組み) */ html::before { content: ""; position: absolute; top: -20px; /* ★修正★ ここを -20px にしていたことが、スマホで横スクロール バーが出てしまう原因だった(overflow-x: hidden を付けていても、 html自身の疑似要素がはみ出す場合はうまく隠しきれないことがある)。 左右はどうせ画面いっぱいに背景を敷いているので、0にしても 見た目はほとんど変わらない。 */ left: 0; right: 0; bottom: 0; /* ★修正★ ここが-20pxだと、ページの一番下からさらに 20px分はみ出してしまい、フッターの下に余計な余白が 出来てしまっていた。下方向だけ、はみ出させないようにした */ background-image: url("images/opening-washi-bg.jpg"); background-size: cover; background-position: center; filter: blur(6px); /* 数値を大きくすると、もっとぼやける */ z-index: 0; /* 中身より、必ず奥に表示する */ } body { /* サイト全体のベースになるフォントを指定 */ font-family: "Shippori Mincho", serif; /* html::before(ぼかし背景)より手前に表示するために必要 */ position: relative; z-index: 1; /* 万が一、画像が読み込めなかったときの保険の色(温かみのあるオフホワイト) */ background-color: #FAF7F1; /* 文字の基本色：濃い紺色（インクのようなイメージ） */ color: #2B2B2B; margin: 0; padding: 0; line-height: 1.7; } /* 中身(見出し・記事一覧など)を、ぼかしレイヤーより手前に表示する */ body > * { position: relative; z-index: 1; } /* ---- ページ全体を中央寄せするコンテナ ---- PCで2列に並べるため、以前より横幅を広めに設定しています。 ★修正★ パンくずリストをposition: absoluteに変更したことで、 本文がヘッダー・パンくずリストの下に隠れてしまうため、 上の余白を広げた(スマホ:124px)。PC用は下の @media (min-width: 768px) でさらに広げている。 */ .container { max-width: 1080px; margin: 0 auto; padding: 124px 24px 60px; } @media (min-width: 768px) { .container { padding-top: 146px; } } /* ===================================================== パンくずリスト専用の「外側の入れ物」（ラッパー） ----------------------------------------------------- ＜これまでの問題点1（最初の修正前）＞ 以前は