こんにちは、阿久梨絵です！
Webサイトのデザインは、HTMLの構造と CSS のスタイルを組み合わせることで、大きく変化させることができます。
特に、アニメーション・グラデーション・ホバーエフェクト などを活用すると、より洗練されたページを作れます。
今回は、HTMLとCSSを使って「変わった」画面表示を作る方法 を紹介します！
グラデーション背景でおしゃれなデザイン
シンプルな背景でも、CSSのグラデーションを使えば、視覚的な魅力をアップできます。
例：カラフルなグラデーション背景
body {
background: linear-gradient(45deg, #ff7e5f, #feb47b);
height: 100vh;
}
・角度 45deg を変更すると、異なるグラデーションが楽しめます！
・暖色系・寒色系を組み合わせると、雰囲気を変えられます。
アニメーションで動きをつける
CSSの @keyframes を使えば、フェードイン・スライドイン・拡大縮小 などのエフェクトを簡単に追加できます。
例：テキストがゆっくりフェードインするアニメーション
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
h1 {
animation: fadeIn 2s ease-in;
}
・2s の部分を変更すれば、アニメーションの速度を調整可能！
・ease-in でスムーズな動きを演出できます。
ホバーエフェクトでインタラクティブなデザイン
ユーザーがボタンや画像にカーソルを当てたときに、エフェクトが切り替わる仕組みを追加すると、サイトの操作性が向上します。
例：ボタンをホバーすると色が変わる
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
transition: 0.3s;
}
.button:hover {
background-color: #2ecc71;
}
・transition: 0.3s; の部分でスムーズな変化を実現！
・hover を活用すると、ユーザーがアクションしたときの変化を視覚的に伝えられます。
3D風の立体デザイン
最近のWebデザインでは、シャドウやトランスフォーム を使って立体的な要素を作ることが増えています。
例：3D風のボックス
.box {
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
transform: rotateX(20deg) rotateY(20deg);
}
・box-shadow で奥行きを表現！
・transform の角度を調整すると、異なる3D効果を作れます。
まとめ
HTMLとCSSを組み合わせれば、デザインを自由に変化させる ことができます。
特に、以下のポイントを活用すると、よりインパクトのある画面表示が可能になります。
・グラデーション背景で華やかな演出
・アニメーションを使い、動きのあるページを作成
・ホバーエフェクトでユーザーの操作に応じた変化
・シャドウや3D変換で立体的なデザインを実現
この技術を活用すれば、シンプルなHTMLでも、視覚的に魅力的なページを構築 できます！
阿久梨絵でした！
