<body>
<h1>【CSS初心者】色の表現方法をまとめてみた</h1>
<p>CSSを学んでいて、レイアウトの組み方は見えてきたものの、なぜだかいい感じに仕上がらないと悩んでいる方。<br>一度ここで色の表現方法を総復習してみませんか。</p>
<div class="btn">
<a href="https://www.fuwafuwa-af.com/css-color/" target="blank">詳しくはこちら</a>
</div>
</body>
body {
--fooColor:300;
background: hsl(var(--fooColor), 35%, 90%);
}
h1, p {
color: hsl(var(--fooColor),40%, 50%);
}
.btn {
width: 150px;
padding: 8px;
margin: 0 auto;
border-radius: 8px;
text-align: center;
background: hsl(var(--fooColor), 45%, 45%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.