はじめに
CSSを学習するStep2です！今回はCSS変数を学習したいと思います
成果物
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS変数のシンプルな例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<h2 class="title">CSS変数の例</h2>
<p>CSS変数を使って色やスペースを管理しています。</p>
<button class="button">クリック</button>
</div>
</body>
</html>
styles.css
:root {
--primary-color: #3498db; /* メインカラー */
--text-color: #333; /* 文字色 */
--background-color: #f4f4f9; /* 背景色 */
--padding: 16px; /* 余白 */
--border-radius: 8px; /* 角丸 */
}
body {
background-color: var(--background-color);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.card {
background-color: #fff;
color: var(--text-color);
padding: var(--padding);
border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 300px;
}
.button {
background-color: var(--primary-color);
color: #fff;
padding: var(--padding);
border: none;
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: var(--background-color);
}
おわりに
CSS変数をうまく使えるといいですね！！