CSSを切り替えて時代を感じてみるデモ
私の勝手な感覚で、モダンとレトロを表現しています。
特に根拠はないです。主観的な表現を連発します。
同じHTML構造に対して「modern.css」と「retro.css」を切り替えるだけで
ここまで見栄えが変わる、という実例を簡単に解説します。
デモ
ソース
概要：同じHTMLでもCSS次第で“時代感”が変わる
| 観点 | モダン（modern.css） | レトロ（retro.css） |
|---|---|---|
| 配色 | 暗色ベース、彩度を抑えた洗練系 | 明色・原色中心、背景グレー、境界線強め |
| 角丸・影 | 丸み・柔らかい影で立体感 | 角張り・影は矩形で無骨 |
| フォント | system-uiなどモダンフォント | "MS UI Gothic"など基本フォント |
| 枠線 | 細く淡い線・グラデーション少なめ | 太い実線・ダブル線・ダッシュ線 |
| レイアウト | Flex/Grid＋余白多め | グリッドだが余白少なく詰め気味 |
| ボタン | フラット＋アニメーション | 立体＋outset/inset境界線 |
| 背景 | グラデ＋シャドウ・ブラー | 無地または繰り返しパターンGIF |
1. modern.css（モダンデザイン）
設計思想
- ダークテーマを基調に「落ち着き」「余白」「丸み」「影」「彩度低め」を重視。
- すべての色や寸法をCSS変数として定義し、統一感と保守性を確保。
→ CSS変数を使うことで、テーマ変更が容易に。
背景色やフォントを変えるだけで全体の印象を統一的に変更できます。
レイアウトと背景
- radial-gradient を使い、中央から外に向けて暗くなる「深み」ある背景。
- 行間1.6で読みやすさを確保。
- シンプルな構造でも、背景と余白で現代的な印象に。
カードUI
- 薄い枠線、丸い角、柔らかい影で「浮いて見える」カード。
- border-radius + box-shadow + 余白の三点セットでモダン感を演出。
ボタンデザイン
- フラット＋アニメーション反応が現代的。
-
transitionとtransformで自然な動きを付け、影ではなく動きで立体感を表現。
ヘッダーとアコーディオン
- 半透明＋ぼかし効果で奥行きを演出。
-
position: stickyによりスクロールしても上部固定。
2. retro.css（レトロデザイン）
設計思想
- Windows95〜98時代のUIをそれっぽく再現。
- グレー背景、原色強め、角丸なし、立体ボタンで「懐かしいWeb」を演出。
レイアウトと背景
- 明るいグレー背景＋ドット模様風（透過1px GIF）で“ザ・90年代”。
- 小さめのゴシックフォントでレトロ感を再現。
枠線と影
- 角丸ゼロ＋太線＋矩形影＝時代感の象徴。
- ドロップシャドウをぼかさずに「ズレた影」として使うことで、古い立体感を再現。
ボタンデザイン
-
border: outset/insetがWindowsボタンの凹凸を再現。 -
linear-gradientで疑似的な立体感。 - 動きではなく「線」で感触を表現するのがレトロ流。
ヘッダーとフッター
- double線・太線・背景グレーが90年代HTMLサイトっぽさ。
-
border-bottom: doubleなどをあえて採用。