Skip to content

Commit 828ad18

Browse files
author
y-yamasaki
committed
Merge branch 'develop'
2 parents b283495 + 053083f commit 828ad18

20 files changed

Lines changed: 1425 additions & 254 deletions

‎assets/css/contact.css‎

Lines changed: 124 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,177 @@
11
/* ==========================================================================
2-
1. ページヘッダー
2+
1. フォームレイアウト
33
========================================================================== */
4-
.page-header {
5-
margin-bottom: 2rem;
6-
padding-bottom: 1.5rem;
7-
border-bottom: 1px solid var(--color-border-soft);
4+
.contact-form {
5+
max-width: 40rem; /* 640px */
6+
margin: 0 auto;
7+
display: flex;
8+
flex-direction: column;
9+
gap: 1.5rem;
10+
}
11+
12+
.form-field {
13+
display: flex;
14+
flex-direction: column;
15+
gap: 0.5rem;
816
}
917

10-
.page-header h1 {
11-
margin: 0 0 0.5rem;
12-
font-size: 2rem;
18+
/* ==========================================================================
19+
2. ラベル・バッジ
20+
========================================================================== */
21+
.form-label {
22+
font-weight: 600;
1323
color: var(--color-heading);
24+
display: flex;
25+
align-items: center;
26+
gap: 0.5rem;
27+
font-size: 0.95rem;
28+
}
29+
30+
.badge-required,
31+
.badge-optional {
32+
font-size: 0.75rem;
33+
padding: 0.15rem 0.5rem;
34+
border-radius: var(--radius-sm);
35+
font-weight: normal;
1436
line-height: 1.2;
1537
}
1638

17-
.page-header p {
18-
margin: 0 0 0.8rem;
19-
color: var(--color-text-muted);
20-
font-size: 1rem;
21-
line-height: 1.6;
39+
.badge-required {
40+
background: rgba(239, 68, 68, 0.15); /* Red-ish */
41+
color: #ef4444;
42+
border: 1px solid rgba(239, 68, 68, 0.2);
2243
}
2344

24-
.page-header a {
25-
color: var(--color-accent);
26-
text-decoration: none;
27-
font-size: 1rem;
45+
.badge-optional {
46+
background: var(--color-surface);
47+
color: var(--color-text-muted);
48+
border: 1px solid var(--color-border);
2849
}
2950

3051
/* ==========================================================================
31-
2. フォーム本体
52+
3. 入力フィールド
3253
========================================================================== */
33-
.contact-form {
34-
max-width: 38rem;
35-
margin: 0 auto 2.5rem;
36-
background: var(--color-panel);
37-
border-radius: var(--radius-lg);
38-
padding: 2.5rem;
54+
.input {
55+
width: 100%;
56+
background: var(--color-bg); /* 入力欄は少し暗く */
3957
border: 1px solid var(--color-border);
40-
box-shadow: var(--shadow-lg);
58+
border-radius: var(--radius-md);
59+
padding: 0.75rem 1rem;
60+
font-size: 1rem;
61+
color: var(--color-text);
62+
transition: var(--transition-smooth);
63+
font-family: inherit;
4164
}
4265

43-
.form-field {
44-
margin-bottom: 1.25rem;
45-
display: flex;
46-
flex-direction: column;
47-
gap: 0.5rem;
66+
.input:focus {
67+
outline: none;
68+
border-color: var(--color-accent);
69+
box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
70+
background: var(--color-surface);
4871
}
4972

50-
.form-field label {
51-
font-size: 0.95rem;
52-
color: var(--color-text);
53-
font-weight: 500;
73+
.input::placeholder {
74+
color: var(--color-text-muted);
75+
opacity: 0.6;
5476
}
5577

56-
.form-field input,
57-
.form-field textarea {
58-
padding: 0.8rem 1rem;
59-
border-radius: var(--radius-md);
60-
border: 1px solid var(--color-border);
61-
background: var(--color-surface);
62-
color: var(--color-text);
63-
font-size: 1rem;
64-
transition: var(--transition-smooth);
78+
.input--textarea {
79+
resize: vertical;
80+
min-height: 8rem;
81+
line-height: 1.6;
6582
}
6683

67-
.form-field textarea {
68-
min-height: 8rem;
69-
resize: vertical;
84+
/* ==========================================================================
85+
4. ボタンエリア
86+
========================================================================== */
87+
.form-actions {
88+
margin-top: 1rem;
89+
display: flex;
90+
justify-content: center;
7091
}
7192

72-
.form-field input::placeholder,
73-
.form-field textarea::placeholder {
74-
color: var(--color-text-muted);
75-
opacity: 0.7;
93+
.btn-submit {
94+
min-width: 12rem;
95+
padding: 0.9rem 2rem;
96+
font-size: 1.1rem;
97+
position: relative; /* ローディングアイコン用 */
7698
}
7799

78-
.form-field input:focus,
79-
.form-field textarea:focus {
80-
outline: none;
81-
border-color: var(--color-accent);
82-
box-shadow: var(--shadow-glow);
83-
background: var(--color-panel);
100+
/* ローディング時の状態 */
101+
.btn-submit.is-loading {
102+
color: transparent; /* 文字を隠す */
103+
pointer-events: none;
104+
opacity: 0.8;
84105
}
85106

86-
.form-actions {
87-
margin-top: 2rem;
88-
text-align: right;
107+
.btn-loading-icon {
108+
position: absolute;
109+
top: 50%;
110+
left: 50%;
111+
transform: translate(-50%, -50%);
112+
width: 1.5rem;
113+
height: 1.5rem;
114+
border: 2px solid rgba(255, 255, 255, 0.3);
115+
border-top-color: #fff;
116+
border-radius: 50%;
117+
opacity: 0;
118+
transition: opacity 0.2s;
89119
}
90120

91-
.form-actions button {
92-
display: inline-flex;
93-
align-items: center;
94-
justify-content: center;
95-
gap: 0.5rem;
96-
padding: 0.8rem 1.6rem;
97-
border-radius: var(--radius-md);
98-
font-size: 1.05rem;
99-
font-weight: 600;
100-
border: 1px solid transparent;
101-
cursor: pointer;
102-
text-decoration: none;
103-
background: linear-gradient(
104-
135deg,
105-
var(--color-accent-dark) 0%,
106-
var(--color-accent) 100%
107-
);
108-
border-color: var(--color-accent-dark);
109-
color: #fff;
110-
box-shadow: var(--shadow-md);
111-
transition: var(--transition-smooth);
121+
.btn-submit.is-loading .btn-loading-icon {
122+
opacity: 1;
123+
animation: spin 0.8s linear infinite;
112124
}
113125

114-
.form-actions button:hover {
115-
transform: translateY(-2px);
116-
box-shadow: var(--shadow-lg), var(--shadow-glow);
117-
background: linear-gradient(
118-
135deg,
119-
var(--color-accent) 0%,
120-
var(--color-accent-dark) 100%
121-
);
126+
@keyframes spin {
127+
to {
128+
transform: translate(-50%, -50%) rotate(360deg);
129+
}
122130
}
123131

132+
/* ==========================================================================
133+
5. 結果メッセージ
134+
========================================================================== */
124135
.contact-result {
125136
margin-top: 1.5rem;
137+
padding: 1rem;
138+
border-radius: var(--radius-md);
126139
font-size: 0.95rem;
127140
text-align: center;
128-
padding: 0.8rem 1rem;
129-
border-radius: var(--radius-md);
141+
display: none; /* 初期非表示 */
130142
}
131143

132-
.contact-result--ok {
133-
color: #84cc16;
134-
background: rgba(132, 204, 22, 0.15);
135-
border: 1px solid #84cc16;
144+
.contact-result.success {
145+
display: block;
146+
background: rgba(16, 185, 129, 0.1);
147+
border: 1px solid rgba(16, 185, 129, 0.2);
148+
color: #10b981;
136149
}
137150

138-
.contact-result--ng {
151+
.contact-result.error {
152+
display: block;
153+
background: rgba(239, 68, 68, 0.1);
154+
border: 1px solid rgba(239, 68, 68, 0.2);
139155
color: #ef4444;
140-
background: rgba(239, 68, 68, 0.15);
141-
border: 1px solid #ef4444;
156+
}
157+
158+
/* リンクテキスト装飾（メールアドレスリンクなど） */
159+
.link-text {
160+
text-decoration: underline;
161+
text-underline-offset: 4px;
162+
}
163+
.link-text:hover {
164+
color: var(--color-accent);
142165
}
143166

144167
/* ==========================================================================
145-
3. レスポンシブデザイン
168+
6. レスポンシブ
146169
========================================================================== */
147-
@media (max-width: 768px) {
170+
@media (max-width: 600px) {
148171
.contact-form {
149-
padding: 1.5rem;
150-
}
151-
.form-actions {
152-
text-align: center;
172+
gap: 1.2rem;
153173
}
154-
.form-actions button {
174+
.btn-submit {
155175
width: 100%;
156176
}
157177
}

‎assets/data/blogList.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,33 @@
11
[
2+
{
3+
"id": "blog_00013",
4+
"title": "ポートフォリオの詳細表示をモーダル化してUXを改善する",
5+
"date": "2025-11-27T00:00:00.000Z",
6+
"category": "UI/UX",
7+
"description": "ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。",
8+
"tags": [
9+
"javascript",
10+
"ui-ux",
11+
"modal",
12+
"fetch"
13+
],
14+
"thumbnail": "assets/img/ogp.png",
15+
"contentPath": "blog/blog_00013.html"
16+
},
17+
{
18+
"id": "blog_00012",
19+
"title": "静的サイトにお問い合わせフォームを実装する (GAS連携)",
20+
"date": "2025-11-27T00:00:00.000Z",
21+
"category": "技術メモ",
22+
"description": "GitHub Pagesなどの静的サイトで、サーバーを持たずにお問い合わせフォームを実装する方法（Google Apps Script利用）をまとめました。",
23+
"tags": [
24+
"gas",
25+
"javascript",
26+
"contact-form"
27+
],
28+
"thumbnail": "assets/img/ogp.png",
29+
"contentPath": "blog/blog_00012.html"
30+
},
231
{
332
"id": "blog_00011",
433
"title": "自作Discord Botを公開したらスパムに悪用された話",

0 commit comments

Comments
 (0)