CSSだけで作れる"ちょっと楽しい"UIサンプル7選
【初心者向けまとめ】
CSSだけで作れる、ちょっと楽しくて、すぐ使えて、
初心者でも真似できるUIを7つ紹介します。
1. ホバーでふわっと浮くカードUI
カードがマウスホバーでふわっと浮き上がるエフェクト。
ボタンや商品カードに使うと一気にリッチになります。
<div class="card">Hover me</div>
<style>
.card {
width: 200px;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform .2s, box-shadow .2s;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
</style>
ポイント
transform: translateY(-6px) で上に移動させ、box-shadow を大きくすることで浮遊感を演出。transition で滑らかなアニメーションになります。
2. CSSだけで作るアニメーションローディング
丸がくるくる回るローディング。
JavaScriptが不要で軽量です。
<div class="loader"></div>
<style>
.loader {
width: 40px;
height: 40px;
border: 4px solid #ddd;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
ポイント
border-top-color だけ色を変えることで回転が見えるように。
animation: spin 1s linear infinite で無限に回り続けます。
3. ボタンを押すと"へこむ"3Dボタン
押した感が出るのでUIが気持ちよくなります。
<button class="push-btn">Push</button>
<style>
.push-btn {
padding: 12px 24px;
background: #4CAF50;
color: white;
border: none;
border-radius: 8px;
box-shadow: 0 4px #2e7d32;
transition: transform .1s, box-shadow .1s;
}
.push-btn:active {
transform: translateY(4px);
box-shadow: 0 0 #2e7d32;
}
</style>
ポイント
下部の box-shadow が影の役割。:active 時に下に移動させつつ影を消すことで、
押し込まれた感じを表現しています。
4. ゆっくり色が変わるグラデーション背景
サイトの背景に使うと一気におしゃれになります。
<div class="bg"></div>
<style>
.bg {
position: fixed;
inset: 0;
background: linear-gradient(
120deg,#ff9a9e,#fad0c4,#fbc2eb,
#a1c4fd,#c2e9fb,#d4fc79,#96e6a1
);
background-size: 500% 500%;
animation: gradient 12s infinite alternate;
z-index: -1;
}
@keyframes gradient {
0% { background-position: 0 50%; }
100% { background-position: 100% 50%; }
}
</style>
ポイント
background-size: 500% でグラデーションを拡大し、background-position を
アニメーションさせることで色が流れるように変化します。
5. ホバーで文字がスライドするリンク
リンクに動きをつけるだけで印象が変わります。
<a class="slide-link" href="#">
<span>Hover Link</span>
</a>
<style>
.slide-link {
position: relative;
display: inline-block;
color: #333;
text-decoration: none;
overflow: hidden;
}
.slide-link span {
position: relative;
display: inline-block;
transition: transform 0.3s;
}
.slide-link::before {
content: "Hover Link";
position: absolute;
top: 0;
left: 0;
color: #e74c3c;
transform: translateX(-100%);
transition: transform 0.3s;
}
.slide-link:hover span {
transform: translateX(100%);
}
.slide-link:hover::before {
transform: translateX(0);
}
</style>
ポイント
::before で赤文字を左側に隠しておき、ホバー時に元のテキストは右へ、
赤文字は中央へスライド。overflow: hidden で画面外の文字を隠すことで、
スムーズな入れ替えアニメーションを実現しています。
6. CSSだけで作る吹き出し
チャットUIやコメントUIに使えます。
<div class="balloon">Hello</div>
<style>
.balloon {
display: inline-block;
padding: 12px 18px;
background: #f1f1f1;
border-radius: 12px;
position: relative;
}
.balloon::after {
content: "";
position: absolute;
left: 20px;
bottom: -20px;
border: 10px solid transparent;
border-top-color: #f1f1f1;
}
</style>
ポイント
::after で三角形を作成。(CSS の border 三角形テクニック)
border を透明にして一辺だけ色をつけることで吹き出しの矢印を表現しています。
7. ふわっとフェードインするスクロールアニメーション
(CSSのみ)
スクロールで画面に入ってきたタイミングに合わせて自然にフェードインさせる事ができ、
JavaScriptなしでスクロールアニメーションを実現できます。
Scroll-driven Animationsやanimation-timelineなど最新CSSを活用しています。
※animation-timeline は2024年以降の最新ブラウザ
(Chrome 115+、Edge 115+、Safari 17.4+など)でのみ対応。
Firefox や古いブラウザでは動作しません。
<div class="fade">Fade In</div>
<style>
.fade {
opacity: 0;
animation: fadein 1s forwards;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
@keyframes fadein {
to { opacity: 1; }
}
</style>
ポイント
animation-timeline: view() でスクロール位置に応じてアニメーション。
animation-range で「画面に入ってから30%の位置まで」にフェードイン完了する
ように設定しています。
注意点
- 最新CSSはブラウザ対応状況を確認してから使うと安心
- アニメーションを多用するとパフォーマンスが落ちる場合がある
- デザインはアクセシビリティも意識するとより良いUIになる
- ボタンには適切な
cursor: pointerを設定する - コントラスト比を確認し、読みやすい配色にする
- アニメーションで気分が悪くなる人もいるため、
prefers-reduced-motionメディアクエリで配慮する
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
ユーザーが OS やブラウザで “アニメーションを減らす” 設定をしている場合、サイト内の
アニメーションやトランジションをほぼ無効化することができるようになります。
※実際にはアニメーションを「ほぼ無効化」する設定であり、
完全に停止するわけではありません。
まとめ
CSSだけでも、ちょっとした工夫で楽しいUIがたくさん作れます。
この記事のサンプルはすべてコピペで動くので、まずは1つ試してみて、
徐々に自分好みにカスタマイズしていくのがおすすめです。
慣れてきたら、複数のテクニックを組み合わせて
オリジナルのUIを作ってみましょう!