今回は、今制作しているゲーム会社やファンタジー作品のサイトのような**「幻想的な雰囲気」**をCSSだけで表現する方法を紹介します。
使用するのはHTMLとCSSのみ。JavaScriptを使わずに、光・透明感・立体感を実現できます。
この記事では、私が実際に構築した「Aboutセクション」のデザインを例に、
使われているCSSのポイントやプロのように見せるコツを丁寧に解説します。
💫 デザインの特徴
今回のデザインは以下の要素を組み合わせて構成しています。
背景にラジアルグラデーション（放射状の光）
透明感を出す半透明レイヤー（rgba）
**ぼかし効果（backdrop-filter）**で柔らかい光を演出
Flexboxを使ったレイアウト設計
疑似要素 ::before を使った光スライドボタン
見た目としては、まるで魔法陣の中にあるような静かな光の世界をイメージしています。
🧱 コードのポイント解説
🩵 1. Flexboxで中央整列
.about-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
}
→ 横並びの画像とテキストをきれいに整列させるために使用。
スマホでもflex-wrapで自動的に縦並びに切り替わります。
✨ 2. 背景に奥行きを出す
.about::before {
content: "";
position: absolute;
inset: 0;
background: url("./images/magic-bg.png") center/cover no-repeat;
opacity: 0.15;
}
→ ::beforeで透明な背景レイヤーを重ねて、
幻想的な霧のような雰囲気を表現しています。
💡 3. ボタンのスライドアニメーション
.about-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #ffd700, #ffb300);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.about-btn:hover::before {
transform: scaleX(1);
}
→ transform: scaleX(0) から scaleX(1) に変化することで、
光が左から右に流れるようなアニメーションを再現。
疑似要素を活用する、少し上級のテクニックです。
🌈 4. グラデーション文字
.section-title {
background: linear-gradient(90deg, #ffd700, #ffb300);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
→ テキストそのものを金色のグラデーションに。
WebGLや画像を使わずに輝くタイトルを実現できます。
🔮 学べるスキルまとめ
スキル 内容
Flexbox レスポンシブで整った横並びレイアウト
グラデーション 光や幻想感のある演出
疑似要素 ボタンや背景の装飾に使う上級テク
トランジション なめらかな動きを表現
透明表現 rgba() と backdrop-filter で奥行き感を出す
🧙♂️ おわりに
この「Aboutセクション」は、単なる自己紹介エリアではなく、
“世界観を伝えるための演出” としてデザインしています。
特にゲーム会社やファンタジー作品のポートフォリオサイトでは、
「情報を見せるだけでなく、物語を感じさせるデザイン」が大切です。
