Skip to content

Commit 03d6e6d

Browse files
MokeMoke13151105MokeMoke13151105
committed
トップを華やかに
1 parent 98eed80 commit 03d6e6d

File tree

2 files changed

+38
-52
lines changed

2 files changed

+38
-52
lines changed

‎vulnerable-web/style.css‎

Lines changed: 36 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,71 @@
1-
/* --- style.css --- */
2-
3-
/* ページ全体の基本設定 */
41
body {
5-
/* モダンなフォントを指定 */
62
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
7-
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
8-
"Segoe UI Symbol";
3+
Helvetica, Arial, sans-serif;
94
margin: 0;
105
padding: 0;
11-
background-color: #f4f7f6; /* 薄いグレーの背景色 */
12-
color: #333; /* 基本の文字色 */
13-
14-
/* フッターを最下部に固定するための設定 */
6+
background: linear-gradient(135deg, #a8e0ff, #8ec5fc, #e0c3fc);
7+
color: #333;
8+
min-height: 100vh;
159
display: flex;
1610
flex-direction: column;
17-
min-height: 100vh;
11+
animation: fadeIn 1.2s ease;
12+
}
13+
14+
@keyframes fadeIn {
15+
from { opacity: 0; }
16+
to { opacity: 1; }
1817
}
1918

20-
/* ヘッダー */
2119
header {
22-
background-color: #ffffff;
23-
border-bottom: 1px solid #ddd;
20+
background: rgba(255, 255, 255, 0.8);
21+
backdrop-filter: blur(6px);
22+
border-bottom: 1px solid rgba(255,255,255,0.4);
2423
padding: 1.5rem 2rem;
2524
text-align: center;
26-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
25+
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
2726
}
2827

2928
header h1 {
3029
margin: 0;
31-
font-size: 1.75rem;
32-
color: #222;
30+
font-size: 2rem;
31+
color: #444;
32+
letter-spacing: 1px;
3333
}
3434

35-
/* メインコンテンツエリア */
3635
main {
37-
3836
flex: 1;
39-
40-
/* 中のリンクを中央に配置する */
4137
display: flex;
4238
flex-direction: column;
4339
justify-content: center;
4440
align-items: center;
4541
padding: 2rem;
42+
gap: 1.5rem;
4643
}
4744

48-
/* リンクをボタン風にスタイル */
4945
main a {
50-
display: block; /* リンクをブロック要素に */
51-
width: 90%;
52-
max-width: 450px;
53-
margin: 1rem 0; /* 上下のマージン */
54-
padding: 1rem 1.5rem; /* 内側の余白 */
55-
56-
background-color: #007bff; /* 目立つ青色 */
57-
color: #ffffff; /* 文字色を白に */
58-
text-decoration: none; /* 下線を削除 */
59-
text-align: center; /* 文字を中央揃え */
60-
61-
font-size: 1.1rem;
62-
font-weight: 600; /* 少し太字に */
63-
64-
border-radius: 8px;
65-
transition: background-color 0.3s ease, transform 0.2s ease;
66-
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
46+
width: 90%;
47+
max-width: 480px;
48+
padding: 1.1rem 1.5rem;
49+
border-radius: 12px;
50+
background: linear-gradient(135deg, #6a85ff, #8f6aff);
51+
color: #fff;
52+
text-decoration: none;
53+
text-align: center;
54+
font-size: 1.2rem;
55+
font-weight: bold;
56+
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
57+
transition: transform 0.2s ease, box-shadow 0.2s ease;
6758
}
6859

69-
/* マウスを乗せたときのスタイル */
7060
main a:hover {
71-
background-color: #0056b3; /* 少し濃い青色に */
72-
transform: translateY(-2px);
61+
transform: translateY(-4px) scale(1.03);
62+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
7363
}
7464

75-
/* フッター */
7665
footer {
77-
color: #adb5bd;
66+
color: #fff;
67+
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
7868
text-align: center;
79-
padding: 1.5rem 2rem;
80-
font-size: 0.9rem;
81-
}
82-
83-
footer p {
84-
margin: 0;
69+
padding: 1.5rem;
70+
font-size: 0.95rem;
8571
}

‎vulnerable-web/top.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>TOP</title>
77
<link rel="stylesheet" href="style.css" />
8-
<script type="module" src="script.mjs" defer></script>
98
</head>
109
<body class="admin">
1110
<header>
12-
<h1>トップページ</h1>
11+
<h1>Top Page</h1>
1312
</header>
1413

1514
<main>
1615
<a href="./shopping/index.html">問題1~問題4を解く</a>
1716
<a href="./reservation/index.html">最後の問題を解く</a>
17+
</main>
1818

1919
<footer>
2020
<p>©2025 ut.code();</p>

0 commit comments

Comments
 (0)