/*全体*/ :root{ --bg-color: #fffef2; --text-color: #111827; --card-color: #f3f4f6; --accent-color: #00752b; --hover-color: #353535; --header-bg: rgba(255, 254, 242, 0.65); /* ★ブラウザに「今どちらのテーマか」を伝える。 入力欄のカーソル、選択中の文字の背景、スクロールバーなどは ブラウザが描くので、CSSの色指定だけでは追従しない。 これを書いておくと、それらもテーマに合わせて描かれる。 */ color-scheme: light; /* ★入力欄の枠の色。 入力欄の背景(--card-color #f3f4f6)とページの背景(--bg-color #fffef2)は ライトモードだとほとんど同じ明るさで、枠が無いとどこが入力欄か分からない。 背景だけに頼らず、はっきりした線を引くための色。 */ --field-border: #d1d5db; /* ★ダーク/ライト切り替えのフェード時間。 テーマ色を持つ要素は必ずこの変数を使う。 ばらばらの時間を書くと、切り替えたときに要素ごとに 遅れて色が変わって見えてしまう。 */ --theme-fade: 0.15s ease; } a, a:visited{ text-decoration: none; } /* Menuの項目(#about など同じページ内へのリンク)を押したとき、 いきなり飛ばずにスクロールしながら移動する。 ★html に書くこと。 ページ全体のスクロールを担当しているのは html なので、 body に書いても効かない。 */ html { scroll-behavior: smooth; /* ★スクロールバーの場所を常に空けておく。 ポップアップを開くと下の modal-open でスクロールを止めるが、 そのときスクロールバーが消える。場所を空けていないと、 その幅のぶん中身が横にずれて画面がガタッと動く。 */ scrollbar-gutter: stable; } /* ★ポップアップ()が開いている間、後ろのページのスクロールを止める。 は「後ろを押せなくする」「後ろを薄暗くする」まではやってくれるが、 スクロールだけは止まらない。付け外しは contact.js。 ★html と body の両方に書く。 どちらがページ全体のスクロールを担当するかはブラウザによって違う。 */ html.modal-open, html.modal-open body { overflow: hidden; } /* ★OSで「視差効果を減らす」を有効にしている人には動かさない。 大きく動く画面は、めまいや乗り物酔いの原因になることがある。 この場合は今までどおり一瞬で移動する。 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ★ページを開いた直後だけ、フェードを止めるための保険。 テーマはJS(script.js)が localStorage を読んでから決めるので、 何もしないとダークモードの人は毎回「白→黒」のフェードが見えてしまう。 bodyに theme-loading を付けた状態でHTMLが届き、 テーマを決め終わった時点で script.js が外す。 ★止まるのは transition だけ。 フォント待ちのふわっと(font-fade・このファイルの下のほう)は animation なので、ここには巻き込まれない。 */ body.theme-loading, body.theme-loading *{ transition: none !important; } body.dark{ color-scheme: dark; --bg-color: #111827; --text-color: #f9fafb; --card-color: #1f2937; --header-bg: rgba(17,24,39,0.65); --field-border: #4b5563; } body{ margin: 0; background-color: var(--bg-color); color: var(--text-color); /* ★テーマ切り替えを一瞬ではなくフェードにする。 footerは自前の背景を持たずbodyの背景が透けているので、 ここに時間を付けるとfooterも一緒にフェードする。 ★header・#about・#products・nav a なども自前の色を持っているので、 そちらにも同じ var(--theme-fade) を付けてある。 付け忘れるとその要素だけ先に切り替わって見える。 */ transition: background-color var(--theme-fade), color var(--theme-fade); /* ★Adobe Fonts の Source Han Sans JP(可変フォント)。 読み込みは base.html の (use.typekit.net のスクリプト)。 ★最後の sans-serif は保険。 読み込みに失敗したときや、読み込みが終わるまでの間はこちらが使われる。 */ font-family: "source-han-sans-jp-variable", sans-serif; /* ★可変フォントなので、太さを数値で細かく指定できる。 ★Adobeのサンプルにある font-variation-settings は使わない。 あちらは font-weight より優先されるうえ全体に受け継がれるので、 見出しの bold が効かなくなり、どこも同じ太さになってしまう。 font-weight なら見出し側の指定がそのまま勝つ。 */ font-weight: 600; font-style: normal; } /* フッターのアイコンのみfooter.cssに独立させている。 */ .external-link-icon { font-size: 0.75rem; } /* =========================================================================== flash = 「送信しました」などのお知らせ =========================================================================== 出し方は2通りあるが、見た目はここで一括して決めている。 Go側 … middleware.Flash(c, "success", "…") → base.html が描く JS側 … showMessage("…", "success") → main.js が差し込む ▼ ★画面に固定して出す理由 このサイトは1枚もので縦に長い。ページの上端に置くと、 問い合わせフォーム(いちばん下)で送信した人にはメッセージが見えない。 =========================================================================== */ .flash-list { /* fixed = 画面に貼り付ける(スクロールしても付いてくる)。 */ position: fixed; /* ヘッダーの下に出す。 */ top: 90px; left: 50%; transform: translateX(-50%); /* ★ヘッダー(z-index: 100)より前に出す。 でないとヘッダーの下に潜って読めない。 */ z-index: 200; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; /* 画面が狭いときにはみ出さないようにする。 */ width: max-content; max-width: 90%; } .flash { padding: 0.9rem 1.5rem; border-radius: 8px; color: #f9fafb; font-size: 0.95rem; /* 背景の上に浮いて見えるように影を付ける。 */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); animation: flash-in 0.25s ease; } @keyframes flash-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* 種類ごとの色。main.js の showMessage(text, category) の category がそのままクラス名の後ろに付く。 */ .flash-success { background-color: var(--accent-color); } .flash-error { background-color: #b91c1c; } .flash-warning { background-color: #b45309; } .flash-message { background-color: #374151; } /* =========================================================================== font-fade = フォントの読み込みを待ってから、上から順に出す =========================================================================== ▼ 何のためか Adobe Fonts は読み込みに時間がかかる。その間は保険の sans-serif で 文字が表示され、読み込みが終わった瞬間に別のフォントに入れ替わるので、 文字の形も幅も変わってガクッとちらつく。 そこで待っている間は隠しておき、読み込みが終わってから ハンバーガーメニューと同じ「上から順にふわっと」で出す。 ▼ 使い方(HTML側)

404

出る順番はそのページのCSSで決める。数字が大きいほど後に出る。 #error h1 { --fade-delay: 0s; } .error-name { --fade-delay: 0.07s; } ▼ ★ に付く目印(base.html の Adobe Fonts のスクリプトが付ける) wf-loading … 読み込み中 wf-active … 読み込めた wf-inactive … 3秒待っても読み込めなかった 出す条件を「wf-loading が付いていない」にしてあるのが要点。 ★ここを wf-active にすると、フォントを読み込めなかった人や JavaScriptが動かない人の画面から文字が永久に消える。 ▼ ★transition ではなく animation を使っている(重要) transition は「途中で値が変わったとき」にしか動かない。 ところがフォントが読み込み済み(2回目以降の表示)のときは、 を読むより先に wf-loading が外れることがあり、 その場合 .font-fade は最初から表示された状態で作られる。 変化が起きていないので transition は走らず、 「たまにフェードせず最初から文字が出ている」状態になる。 animation は「その指定が付いた状態で要素が現れたら再生する」ので、 wf-loading が外れるのが早くても遅くても必ず動く。 ▼ ★条件が2つある理由(wf-loading と fade-hold) wf-loading … フォントの読み込みが終わったか fade-hold … この画面が実際に映ったか(base.html のが外す) ブラウザは「たぶん次に開く」ページを裏で先に完成させることがあり、 アドレスバーにURLを入力したときが分かりやすい例。 fade-hold が無いと、その「裏で作っていた間」に動きが終わってしまい、 画面に出たときには文字が表示済みになる。 =========================================================================== */ /* ★「濃さ」と「動き」で長さが違うので、2つに分けてある。 1つにまとめると、どちらかの長さに揃えるしかなくなる。 */ @keyframes font-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes font-slide-in { from { transform: translateY(20px); } to { transform: translateY(0); } } /* フォントを待っている間は隠しておく。 */ .font-fade { opacity: 0; } html:not(.wf-loading):not(.fade-hold) .font-fade { /* ★最後の both は「再生前と再生後の見た目を保つ」指定。 これが無いと、待ち時間(animation-delay)の間だけ .font-fade の opacity: 0 が効かず、一瞬文字が見えてしまう。 */ animation: font-fade-in 0.5s ease both, font-slide-in 0.4s ease both; /* 出る順番。指定が無ければ0.3秒。2つの動きに同じ待ち時間が入る。 */ animation-delay: var(--fade-delay, 0.3s); } /* ★OSで「視差効果を減らす」を有効にしている人には動かさない。 スクロールと同じ考え方(このファイルの上のほうを参照)。 動かさないだけで、文字はちゃんと表示される。 ★opacity: 1 を忘れると、animation を消したぶん 文字が隠れたままになる。 */ @media (prefers-reduced-motion: reduce) { html:not(.wf-loading):not(.fade-hold) .font-fade { animation: none; opacity: 1; } }