よく使うCSSテクニック

よく使うCSSテクニック – 便利なスタイルを覚えよう！

HTMLとCSSの基本を学んだら、次に よく使われるCSSテクニック を覚えておくと、よりスムーズにWebデザインを作成できます。
今回は、実用的で汎用性の高いCSSのテクニック を紹介します！

1. レスポンシブなフォントサイズ（clamp() を活用）

画面サイズに応じてフォントサイズを自動調整するには clamp() を使います。

CSS

h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

📌 ポイント

1.5rem（最小サイズ）
5vw（推奨サイズ・画面の5%）
3rem（最大サイズ）

これにより、スマホでは小さく・PCでは大きく なるように調整できます。

2. 中央配置の簡単な方法（Flexbox）

要素を画面の中央に配置するには、Flexboxが便利です。

CSS

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 画面の高さいっぱいに */
}

📌 ポイント

justify-content: center; → 横方向の中央揃え
align-items: center; → 縦方向の中央揃え
height: 100vh; → 画面全体をカバー

3. ホバーアニメーション（transition）

ボタンやリンクにホバーアニメーションをつけると、ユーザー体験をより印象的に できます。

CSS

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.button:hover {
    background-color: #0056b3;
}

📌 ポイント

transition: background-color 0.3s ease-in-out; で スムーズな変化 を実現

4. カードデザインの影をつける（box-shadow）

シンプルなカードデザインを作るとき、影をつけると立体感が出ます。

CSS

.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

📌 ポイント

border-radius: 10px; → 角を丸くする
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); → 影をつける

5. グラデーション背景（linear-gradient）

シンプルな背景よりも、グラデーションを加えるとデザイン性が向上します。

CSS

.gradient-bg {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    height: 100vh;
}

📌 ポイント

to right → 左から右にグラデーション
#ff7e5f, #feb47b → 2色のグラデーション

6. レスポンシブな2カラムレイアウト（Flexbox）

スマホでは1カラム・PCでは2カラム のデザインを簡単に実現できます。

CSS

.layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.box {
    flex: 1;
    min-width: 300px;
    background-color: #f8f8f8;
    padding: 20px;
}

📌 ポイント

flex-wrap: wrap; で 小さい画面では折り返す
min-width: 300px; で 最低幅を確保

7. 背景画像のフルカバー（background-size: cover;）

画像を背景にするとき、適切にサイズ調整するには cover を使います。

CSS

.bg {
    background: url('image.jpg') no-repeat center center/cover;
    height: 100vh;
}

📌 ポイント

background-size: cover; → 画面いっぱいに拡大
background-position: center; → 中央配置

8. スクロール時に固定されるナビゲーション（position: fixed;）

ナビゲーションメニューを 画面上部に固定 することで、使いやすさが向上します。

CSS

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
}

📌 ポイント

position: fixed; → 画面に固定
top: 0; left: 0; width: 100%; → 上部に横幅100%で固定

9. スムーズなページ内スクロール（scroll-behavior）

ページ内リンクをクリックしたときに スムーズにスクロール させることができます。

CSS

html {
    scroll-behavior: smooth;
}

📌 ポイント

scroll-behavior: smooth; → なめらかにスクロール

10. まとめ

今回紹介したCSSテクニックを活用すると、より使いやすく、洗練されたデザイン を作ることができます。