Skip to content

Commit f20374a

Browse files
author
y-yamasaki
committed
Merge branch 'develop'
2 parents 66d097d + ee28213 commit f20374a

9 files changed

Lines changed: 1775 additions & 738 deletions

File tree

‎assets/css/base.css‎

Lines changed: 163 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,218 @@
1-
/* デザイントークン */
1+
/*
2+
* base.css
3+
* 全体的なベーススタイル、デザイントークン、リセット、共通要素
4+
*/
5+
6+
/* ==========================================================================
7+
1. デザイントークン
8+
========================================================================== */
29
:root {
3-
--color-bg: #0f172a; /* ページ背景（濃紺） */
4-
--color-surface: #0b1120; /* ヘッダー背景など */
5-
--color-panel: #0f172a; /* カード背景 */
6-
--color-border: #1e293b;
7-
--color-border-soft: #1f2937;
8-
--color-text: #e5e7eb;
9-
--color-text-muted: #9ca3af;
10-
--color-accent: #4f46e5; /* メインアクセント */
11-
--color-accent-soft: rgba(79, 70, 229, 0.15);
12-
--shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.55);
13-
14-
--radius-lg: 18px;
15-
--radius-md: 12px;
10+
/* カラーパレット */
11+
--color-bg: #0d111c; /* ページ背景（より落ち着いた濃紺） */
12+
--color-surface: #161b22; /* ヘッダー、フッター背景など */
13+
--color-panel: #161b22; /* カード、ブロック背景 */
14+
--color-border: #30363d;
15+
--color-border-soft: #21262d;
16+
17+
--color-text: #e2e8f0; /* 明るいテキスト */
18+
--color-text-muted: #a0aec0; /* 控えめなテキスト */
19+
--color-heading: #e2e8f0; /* 見出し色 */
20+
21+
--color-accent: #6366f1; /* メインアクセント (indigo-500) */
22+
--color-accent-dark: #4f46e5; /* アクセントの暗いバージョン */
23+
--color-accent-soft: rgba(
24+
99,
25+
102,
26+
241,
27+
0.1
28+
); /* アクセントの透明バージョン */
29+
30+
/* シャドウ */
31+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
32+
--shadow-md:
33+
0 4px 6px rgba(0, 0, 0, 0.1),
34+
0 1px 3px rgba(0, 0, 0, 0.08);
35+
--shadow-lg:
36+
0 10px 15px rgba(0, 0, 0, 0.1),
37+
0 4px 6px rgba(0, 0, 0, 0.05);
38+
--shadow-xl:
39+
0 20px 25px rgba(0, 0, 0, 0.1),
40+
0 8px 10px rgba(0, 0, 0, 0.06);
1641

42+
/* 角丸 */
43+
--radius-sm: 4px;
44+
--radius-md: 8px;
45+
--radius-lg: 12px; /* 少し小さめに調整 */
46+
47+
/* フォント */
1748
--font-body:
18-
system-ui, -apple-system, BlinkMacSystemFont,
19-
"Segoe UI", "Hiragino Sans", "Noto Sans JP",
20-
sans-serif;
49+
"Inter", system-ui, -apple-system,
50+
BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
51+
"Noto Sans JP", sans-serif;
52+
--font-heading: var(
53+
--font-body
54+
); /* 見出しも同じフォントで統一感を出す */
2155
}
2256

57+
/* ==========================================================================
58+
2. CSSリセット / ベーススタイル
59+
========================================================================== */
60+
61+
/* 全要素のボックスモデルをborder-boxに設定 */
2362
*,
2463
*::before,
2564
*::after {
2665
box-sizing: border-box;
2766
}
2867

68+
/* HTMLとBodyの基本的なリセットと設定 */
2969
html {
30-
font-size: 16px;
31-
scroll-behavior: smooth;
32-
}
33-
34-
html,
35-
body {
36-
height: 100%;
70+
font-size: 16px; /* 基本フォントサイズ */
71+
scroll-behavior: smooth; /* スムーズスクロール */
72+
-webkit-text-size-adjust: 100%; /* iOSのテキストサイズ調整を無効化 */
73+
text-size-adjust: 100%;
3774
}
3875

3976
body {
40-
overflow-x: hidden;
4177
margin: 0;
78+
padding: 0;
79+
overflow-x: hidden; /* 横スクロールの防止 */
4280
font-family: var(--font-body);
43-
line-height: 1.7;
81+
line-height: 1.6; /* 行間を少し調整して可読性向上 */
4482
color: var(--color-text);
4583
background:
4684
radial-gradient(
4785
circle at top left,
48-
rgba(79, 70, 229, 0.35),
49-
transparent 55%
86+
rgba(99, 102, 241, 0.1),
87+
/* 新しいアクセントカラーの薄いバージョン */
88+
transparent 65%
5089
),
5190
radial-gradient(
5291
circle at bottom right,
53-
rgba(56, 189, 248, 0.25),
54-
transparent 55%
92+
rgba(56, 189, 248, 0.08),
93+
/* 青系の薄いグラデーション */ transparent 65%
5594
),
5695
var(--color-bg);
96+
min-height: 100vh; /* 少なくともビューポートの高さを持つように */
97+
display: flex; /* flexboxを使ってフッターを下に固定しやすくする */
98+
flex-direction: column;
99+
}
100+
101+
/* 見出しのリセット */
102+
h1,
103+
h2,
104+
h3,
105+
h4,
106+
h5,
107+
h6 {
108+
margin-top: 0;
109+
margin-bottom: 0.5em; /* 下マージンを追加 */
110+
line-height: 1.2;
111+
color: var(--color-heading);
112+
font-family: var(--font-heading);
113+
}
114+
115+
/* 段落のリセット */
116+
p {
117+
margin-top: 0;
118+
margin-bottom: 1em; /* 下マージンを追加 */
119+
}
120+
121+
/* リストのリセット */
122+
ul,
123+
ol {
124+
margin-top: 0;
125+
margin-bottom: 1em;
126+
padding-left: 1.5em; /* リストのインデント */
127+
list-style: none; /* デフォルトのリストスタイルを削除 */
128+
}
129+
ul li::before,
130+
ol li::before {
131+
/* 必要に応じてカスタムのリストスタイル（例: ドットや数字）を追加 */
57132
}
58133

59134
/* リンク */
60135
a {
61-
color: inherit;
62-
color: aqua;
136+
color: var(
137+
--color-accent
138+
); /* アクセントカラーをリンク色に */
139+
text-decoration: none; /* デフォルトの下線を削除 */
140+
transition:
141+
color 0.2s ease-in-out,
142+
text-decoration 0.2s ease-in-out;
63143
}
64144
a:hover {
65-
opacity: 0.9;
145+
color: var(
146+
--color-accent-dark
147+
); /* ホバー時に少し濃く */
148+
text-decoration: underline; /* ホバー時に下線を表示 */
66149
}
67150

68-
/* メインコンテナ */
69-
.main-container {
70-
max-width: 1080px;
71-
margin: 0 auto;
72-
padding: 32px 18px 48px;
151+
/* 画像 */
152+
img {
153+
max-width: 100%;
154+
height: auto;
155+
vertical-align: middle; /* 画像のベースライン調整 */
156+
display: block; /* 余分なスペースを削除 */
73157
}
74158

75-
/* フォーム系 */
159+
/* フォーム要素 */
76160
input,
77161
textarea,
78162
select,
79163
button {
80-
font-family: inherit;
164+
font-family: var(
165+
--font-body
166+
); /* 全てのフォーム要素に共通フォント */
167+
font-size: 1rem; /* デフォルトのフォントサイズを統一 */
168+
line-height: 1.5;
169+
color: var(--color-text);
170+
}
171+
172+
button {
173+
cursor: pointer;
174+
border: none;
175+
background: none;
176+
padding: 0;
177+
}
178+
179+
/* ==========================================================================
180+
3. 共通ユーティリティクラス
181+
========================================================================== */
182+
183+
/* メインコンテナ */
184+
.main-container {
185+
max-width: 1120px; /* 少し広げる */
186+
margin: 0 auto;
187+
padding: 2.5rem 1.25rem; /* paddingをrem単位で統一 (40px 20px) */
188+
flex-grow: 1; /* コンテンツが少ないページでフッターを下に固定 */
81189
}
82190

83191
/* 小さいテキスト */
84192
.text-muted {
85193
color: var(--color-text-muted);
86-
font-size: 0.85rem;
194+
font-size: 0.9rem; /* 少し大きく */
87195
}
88196

89-
/* === Scroll Reveal 共通 === */
197+
/* ==========================================================================
198+
4. スクロールアニメーション
199+
========================================================================== */
200+
90201
.reveal-on-scroll {
91202
opacity: 0;
92-
transform: translateY(10px) scale(0.98);
203+
transform: translateY(
204+
20px
205+
); /* 少しY軸の移動量を増やす */
93206
transition:
94-
opacity 0.75s ease-out,
95-
transform 0.75s ease-out;
207+
opacity 0.6s ease-out,
208+
transform 0.6s ease-out;
96209
}
97210

98211
.reveal-on-scroll.is-visible {
99212
opacity: 1;
100-
transform: translateY(0) scale(1);
213+
transform: translateY(0);
101214
}
215+
216+
/*
217+
* その他のスタイルは `layout.css`, `top.css`, `blog.css` などで定義
218+
*/

0 commit comments

Comments
 (0)