@charset "UTF-8"; /* ========================================================================== itte-base.css ／ サイト共通CSS・全画面共通部分 ■ 方針：このCSSには色を一切書きません 色・壁紙にあたる値はすべて変数（--◯◯）にしてあり、中身はHTML側で決めます。 こうしておくと、ページごとに配色を変えても、直すのはHTMLの数行だけで済み、 CSSファイルは全ページで共通のまま一度も触らずに使い回せます。 ■ 使い方（各ページのHTMLに書くこと） の中でCSSを3枚読み込み、そのあとに配色の CSS3枚は各レポートのフォルダより1つ上の階層に置く前提です。 たとえば /itte-base.css に対して /itte_uttou/uttou.html という配置。 さらに深い階層にページを作る場合は ../../itte-base.css のように増やします。 配色ブロックの雛形は uttou.html の にあります。 新しいページを作るときは、あれをそのまま貼り付けて色だけ書き換えてください。 【重要】配色ブロックは1つでも項目が欠けると、その箇所の色が失われます。 行を消すのではなく、値を書き換える形で使ってください。 ■ HTML側で決める色の一覧（＝配色ブロックに必要な項目） 壁紙 --bg-color / --bg-image / --bg-repeat / --bg-size 基調色 --accent（見出し枠・帯・ボタン・リンク） --on-accent（基調色の上に載る文字の色） 面の色 --paper（本文パネル） --cream（解説ボックス） --btn-bg（ボタン地） 文字 --text（本文） --muted（下部の補足・区切り記号） 線と影 --rule（区切り線） --shadow-color（影の色） 予告ボックス --next-bg / --next-bar / --next-text 基調色の派生 --accent-line / --accent-hairline / --accent-tint / --accent-border （--accent から自動計算。ふつうは触らなくて構いません） ■ 壁紙のパスに注意（重要） --bg-image に書く url() のパスは、それをHTML側で宣言していても、 「実際にその変数を使っているCSSファイル」から見た位置として解釈されます。 つまり基準はHTMLではなく、このCSSの置き場所（各ページより1つ上の階層）です。 CSS /itte-base.css ページ /itte_uttou/uttou.html 壁紙 /itte_uttou/bg095_01.gif 書き方 --bg-image: url(itte_uttou/bg095_01.gif); HTMLと同じフォルダにある壁紙でも、フォルダ名から書く必要があります。 ファイル名だけを書くと読み込まれず、背景が出ません。 ■ HTMLに必要なclass（新しいページを作るときの目印） .page … 全体を囲む箱 .head … 見出しを囲む枠 （中に .site-title / .page-title / .page-sub。いずれも省略可） .note … 解説ボックス（中に .inner を1枚はさむ） .photos … 写真を並べる箱（中に img を1〜2枚） .split … 写真＋解説の横並び（中に .photo と .note） .next … 「次回は～」の予告ボックス .pager … 「１／２／３」。今のページだけ にする .nextlink … 「第○回へ」のボタン .foot … ページ下部の左寄せ範囲（中に .meta と .links） .section-title … 「＝時刻表＝」のような節の見出し .table-wrap … 表を包む箱（狭い画面ではこの中だけ横スクロール） ■ ファイルの分担 このファイル … 形（余白・角丸・枠の太さ・並び）と、色の「使い道」の定義 itte-wide … 481px以上のときの幅と段組み（PC） itte-narrow … 480px以下のときの幅と段組み（スマホ） 色はどのCSSにも書かないこと。書くとページごとの差し替えが効かなくなります。 ========================================================================== */ /* ========================================================================== ★ 寸法・書体の設定（色以外） 色はここには書きません。HTML側の配色ブロックで指定します。 ========================================================================== */ :root{ --page-width: 800px; /* PC版の版面幅（元HTMLの width="800"） */ --content-width: 710px; /* 本文ブロックの幅（元HTMLの width="710"） */ --side-width: 310px; /* 写真の横に置く解説の幅（元HTMLの width="310"） */ --gap: 12px; /* 写真どうしのすき間 */ --radius: 12px; /* 箱の角丸。0にすると全体が角張った印象になります */ --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", "游ゴシック体", Meiryo, sans-serif; --line-height: 1.9; /* 行間 */ } /* ページごとに版面を変えたいときも、HTML側の配色ブロックに :root{ --page-width: 900px; --content-width: 800px; } のように足せば上書きできます。 */ /* -------------------------------------------------------------------------- 1. 土台 -------------------------------------------------------------------------- */ html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body{ margin: 0; background-color: var(--bg-color); background-image: var(--bg-image); background-repeat: var(--bg-repeat); background-size: var(--bg-size); color: var(--text); font-family: var(--font); line-height: var(--line-height); letter-spacing: .02em; /* 和文の約物（「」や、。）のアキを詰める指定。 これが入ると一気に「今風の組版」に見えます。強すぎるなら削除を。 */ font-feature-settings: "palt"; } ::selection{ background: var(--accent-hairline); } /* 本文パネル。壁紙の上に紙を1枚置くイメージ。 幅と余白は itte-wide / itte-narrow 側にあります。 */ .page{ margin: 0 auto; text-align: center; background: var(--paper); box-shadow: 0 1px 3px var(--shadow-color), 0 12px 40px var(--shadow-color); } img{ max-width: 100%; height: auto; vertical-align: bottom; } /* 区切り線。中央が濃く両端が消える線にして、直線的すぎない印象に。 */ hr{ border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent); margin: 2em auto; } /* -------------------------------------------------------------------------- 2. 見出し（元サイトの文字を、四角い枠で囲んだもの） 文字の色・太さは基調色そのまま。囲み枠だけを足しています。 文字サイズは画面幅で変えるので itte-wide / itte-narrow 側です。 ・枠をやめて文字だけにしたい → border と background の行を消す ・角を丸くしたい → border-radius: var(--radius); を足す ・内側の細い線が不要 → .head::before のブロックごと削除 -------------------------------------------------------------------------- */ .head{ position: relative; border: 2px solid var(--accent-line); /* ←囲み枠 */ background: var(--accent-tint); /* ごく薄い面。白のままにするなら削除 */ } /* 枠の内側にもう一本、細い線を入れた二重枠。不要ならこの節ごと削除。 */ .head::before{ content: ""; position: absolute; inset: 6px; border: 1px solid var(--accent-hairline); pointer-events: none; } .site-title{ /* シリーズ名（小さい方） */ margin: 0; color: var(--accent); font-weight: bold; line-height: 1.3; letter-spacing: .06em; } .page-title{ /* そのページの題（大きい方） */ margin: 0; color: var(--accent); font-weight: bold; line-height: 1.2; letter-spacing: .03em; } /* 題の下に添える小見出し（「その２」など）。 字間を広めに取って、題と competing しない添え物として見せています。 不要なページでは、HTML側に .page-sub を書かなければ何も出ません。 */ .page-sub{ margin: 0; color: var(--accent); font-weight: bold; line-height: 1.3; letter-spacing: .28em; text-indent: .28em; /* 字間のぶん右にずれるのを打ち消して中央に見せる */ } /* -------------------------------------------------------------------------- 3. クリーム色の解説ボックス 左に基調色の帯を立てて、読み物の引用ブロックらしく見せています。 【注意】.note と .note .inner はセットで働きます。 「短い文はかたまりごと中央、長い文は折り返して左揃え」という 元ページ独特の見え方は、この二重構造で再現しているので片方だけ触らないこと。 -------------------------------------------------------------------------- */ .note{ background: var(--cream); border-left: 4px solid var(--accent-line); /* ←左の帯 */ border-radius: 4px var(--radius) var(--radius) 4px; /* 帯側は角を立てる */ box-shadow: 0 2px 10px var(--shadow-color); text-align: center; } .note .inner{ display: inline-block; text-align: left; } .note p{ margin: 0 0 1em; } .note p:last-child{ margin-bottom: 0; } .note .sep{ /* 「－－－－－」のような区切り行 */ text-align: center; color: var(--muted); letter-spacing: .2em; } /* -------------------------------------------------------------------------- 4. 写真 角丸と影のみ。カーソルを乗せても動きません。 -------------------------------------------------------------------------- */ .photos{ display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); } .photos img, .split .photo img{ min-width: 0; /* 【重要】消すと写真が枠からはみ出します */ border-radius: calc(var(--radius) - 2px); box-shadow: 0 2px 10px var(--shadow-color); } /* -------------------------------------------------------------------------- 5. 予告ボックス（「次回は～」） 原色の黄色は今の画面ではまぶしいので、淡い面＋左に濃い帯にしています。 元の黄色に戻すなら、HTML側の --next-bg を #FFFF00 に。 -------------------------------------------------------------------------- */ .next{ background: var(--next-bg); border-left: 5px solid var(--next-bar); border-radius: 4px var(--radius) var(--radius) 4px; box-shadow: 0 2px 10px var(--shadow-color); font-weight: 700; color: var(--next-text); } /* -------------------------------------------------------------------------- 6. ページ送り「１／２／３」 丸いボタン（ピル）にしています。 【仕組み】HTMLの数字の間の「／」は文字として直接書かれていてCSSからは 消せません。そこで .pager 全体を font-size:0 にして「／」を見えなくし、 中のリンクと数字にだけ大きさを指定し直しています。 ボタンをやめて文字だけに戻すときは、この font-size:0 の行も必ず消すこと。 （消し忘れると数字まで見えなくなります） -------------------------------------------------------------------------- */ .pager{ font-size: 0; } .pager a, .pager strong{ display: inline-block; margin: 4px 5px; padding: .3em 1.1em; border-radius: 999px; font-weight: 700; letter-spacing: .05em; text-decoration: none; } .pager strong{ /* 今いるページ。塗りつぶし */ background: var(--accent); color: var(--on-accent); } .pager a{ /* 他のページ。輪郭だけ */ color: var(--accent); border: 1px solid var(--accent-border); background: var(--btn-bg); transition: background .2s ease, color .2s ease; } .pager a:hover{ background: var(--accent); color: var(--on-accent); } /* 「第○回へ」。次に進む導線なので少し目立つボタンに。 */ .nextlink{ margin: 1.4em 0; } .nextlink a{ display: inline-block; padding: .6em 2em; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; letter-spacing: .08em; text-decoration: none; box-shadow: 0 2px 10px var(--shadow-color); } /* -------------------------------------------------------------------------- 7. 節見出しと表（時刻表など） ※ 潟上市マイタウンバス編で表が必要になったため、あとから追加した節です。 既存の指定は何も変えていないので、他のページの見え方は変わりません。 .section-title … 「＝時刻表＝」「＝運賃＝」のような節の見出し .table-wrap … 表を包む箱。狭い画面では、この箱の中だけ横スクロールします （表だけは縦積みに崩せないため、この方式にしています） -------------------------------------------------------------------------- */ .section-title{ margin: 0 auto; color: var(--accent); font-weight: bold; letter-spacing: .14em; text-indent: .14em; /* 字間のぶん右にずれるのを打ち消して中央に見せる */ } .table-wrap{ overflow-x: auto; /* はみ出したら横スクロール */ -webkit-overflow-scrolling: touch; } .table-wrap table{ border-collapse: collapse; width: 100%; background: var(--paper); font-variant-numeric: tabular-nums; /* 時刻の数字の幅をそろえる */ } .table-wrap th, .table-wrap td{ border: 1px solid var(--accent-border); text-align: center; white-space: nowrap; /* 時刻が途中で折り返さないように */ } .table-wrap th{ /* 停留所名の行 */ background: var(--cream); font-weight: bold; } .table-wrap .group th{ /* 「（上り）」「（下り）」の見出し行 */ background: var(--accent); color: var(--on-accent); letter-spacing: .08em; } .table-wrap .table-note td{ /* 表の下の注記 */ text-align: left; white-space: normal; } /* -------------------------------------------------------------------------- 8. ページ下部（