diff --git a/fff/09_yohou/style.css b/fff/09_yohou/style.css index 647ed9b..c340245 100644 --- a/fff/09_yohou/style.css +++ b/fff/09_yohou/style.css @@ -1,141 +1,98 @@ - - /* 背景 */ - body { margin: 0; padding: 0; - /* - 和風っぽさを出したかったので明朝系。 - Webフォントは使っていない。 - 環境によって多少違って見えるが、それも良いと思った。 - */ font-family: - "Hiragino Mincho ProN", - "Yu Mincho", - "Noto Serif JP", - serif; + "Yu Gothic UI", + "Hiragino Sans", + "Noto Sans JP", + sans-serif; - line-height: 1.7; - - /* background-color と color は JS で設定 */ + line-height: 1.8; } /* カード */ - .card { max-width: 420px; - margin: 40px auto; - padding: 24px; + margin: 32px auto; + padding: 28px 24px; - /* - 背景は少しだけ透過。 - 和紙っぽい感じを狙っているが、 - やりすぎると読みにくくなるので控えめ。 - */ - background: rgba(255, 255, 255, 0.85); + background: rgba(255, 255, 255, 0.9); - border-radius: 8px; + border-radius: 20px; - /* - 影をつけるか迷ったが、 - 天気予報アプリっぽさを優先して弱めにした。 - */ - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } /* タイトル */ - h1 { - margin-top: 0; - margin-bottom: 8px; - font-size: 1.4rem; + margin: 0 0 6px 0; + font-size: 1.6rem; text-align: center; - - /* - 少しだけ文字間をあける。 - 和文は詰めすぎない方が読みやすい気がする。 - */ - letter-spacing: 0.05em; + font-weight: 700; } -/* ---------------------------- - date - ---------------------------- */ - +/* 日にち */ #date { text-align: center; - font-size: 0.9rem; + font-size: 1rem; opacity: 0.8; - margin-bottom: 12px; + margin-bottom: 14px; } /* 天気 */ - .weather { display: flex; justify-content: center; align-items: center; - gap: 8px; + gap: 10px; - font-size: 1rem; - margin-bottom: 16px; + font-size: 1.2rem; + margin-bottom: 18px; } #weatherIcon { - font-size: 1.4rem; + font-size: 1.8rem; } -/* 魚 */ - +/* fish area */ .fish { text-align: center; - margin: 20px 0 16px 0; + margin: 22px 0 18px 0; } .fish .label { - font-size: 0.85rem; - opacity: 0.7; - margin-bottom: 4px; -} - -#fishName { - font-size: 1.8rem; - font-weight: bold; - - /* - 一番目立たせたいので行間を詰める。 - */ - line-height: 1.3; -} - -/* 理由 */ - -#reason { - padding-left: 1.2em; - margin: 0; - - /* - 箇条書きが強くなりすぎないように。 - */ - font-size: 0.95rem; -} - -#reason li { + font-size: 1rem; + opacity: 0.75; margin-bottom: 6px; } -/* 答え */ +#fishName { + font-size: 2.4rem; + font-weight: 800; + letter-spacing: 0.04em; +} +/* 理由 */ +#reason { + padding-left: 1.2em; + margin: 0; + font-size: 1.05rem; +} + +#reason li { + margin-bottom: 10px; +} + +/* スマホ対応 */ @media (max-width: 480px) { .card { - margin: 20px 12px; - padding: 20px; + margin: 20px 14px; + padding: 24px 20px; } #fishName { - font-size: 1.6rem; + font-size: 2.1rem; } } -