Web制作でよく使うCSS小技まとめ｜コピペで使えるスニペット集

---

はじめに

前回の記事ではCSSとJavaScriptでハンバーガーメニューを実装する方法を解説しました。今回はWeb制作でよく使うCSS小技をまとめたスニペット集をお届けします。「毎回調べながら書いている」「どう書けばいいか迷う」という場面をまとめました。実案件でそのままコピペして使えるコードを中心に解説します。

---

1. テキスト関連

1.1 テキストを1行で省略する

/* 1行で省略して末尾に「...」を付ける */
.text-ellipsis {
    white-space:   nowrap;    /* 折り返さない */
    overflow:      hidden;    /* はみ出しを隠す */
    text-overflow: ellipsis;  /* 「...」を付ける */
}

/* 使用例：カードのタイトルを1行に収める */
.card-title {
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     100%;
}

1.2 テキストを複数行で省略する

/* 2行で省略する */
.text-clamp-2 {
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;     /* 表示する行数 */
    overflow:           hidden;
}

/* 3行で省略する */
.text-clamp-3 {
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow:           hidden;
}

/* 使用例：カードの説明文を3行に収める */
.card-description {
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow:           hidden;
    line-height:        1.7;
    /* 高さ = line-height × 行数 × font-size で計算できる */
}

1.3 禁則処理・改行の制御

/* 日本語テキストの禁則処理 */
.text-japanese {
    word-break:      break-all;   /* 英数字も含めて折り返す */
    overflow-wrap:   break-word;  /* 長い単語を折り返す */
    line-break:      strict;      /* 厳密な禁則処理 */
}

/* URLや長い英単語だけ折り返す */
.text-url {
    overflow-wrap: break-word;
    word-break:    break-word;
}

/* 改行を保持する（メモ・コメント欄） */
.text-preserve {
    white-space: pre-wrap; /* 改行とスペースを保持しつつ折り返す */
}

/*
    使い分けまとめ：
    日本語テキスト → word-break: break-all
    URLを含む     → overflow-wrap: break-word
    改行を保持    → white-space: pre-wrap
*/

1.4 テキストのグラデーション

/* テキストにグラデーションを適用する */
.text-gradient {
    background:              linear-gradient( 135deg, #1A5FC0, #27AE60 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* 使用例：見出しをグラデーションにする */
.hero-title {
    font-size:               clamp( 3.2rem, 5vw, 6.4rem );
    font-weight:             800;
    background:              linear-gradient( 135deg, #1A5FC0 0%, #8E44AD 100% );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

---

2. 画像関連

2.1 object-fit で画像を枠に収める

/*
    object-fit：
    imgやvideoを親要素の枠内にどう収めるか指定する。
    縦横比を保ちながら枠いっぱいに表示したいときに使う。
*/

/* cover：枠いっぱいに拡大・はみ出した部分は切り取る */
.img-cover {
    width:      100%;
    height:     200px; /* 高さを固定する */
    object-fit: cover;
    /* → サムネイル・カード画像・ヒーロー画像に最適 */
}

/* contain：枠内に収まるよう縮小・余白が出る */
.img-contain {
    width:      100%;
    height:     200px;
    object-fit: contain;
    /* → ロゴ・アイコン・余白を出したくない画像に */
}

/* 表示位置を指定する */
.img-top {
    object-fit:     cover;
    object-position: top; /* 上を基準にトリミング */
}

.img-face {
    object-fit:      cover;
    object-position: center 20%; /* 顔が上の方にある場合 */
}

2.2 aspect-ratio でアスペクト比を固定する

/*
    aspect-ratio：
    要素の縦横比を指定する。
    画像の読み込み前にスペースを確保してCLSを防ぐ。
*/

/* 16:9（動画・ヒーロー画像） */
.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

/* 4:3（一般的な画像） */
.ratio-4-3 {
    aspect-ratio: 4 / 3;
}

/* 1:1（正方形・アイコン・サムネイル） */
.ratio-square {
    aspect-ratio: 1 / 1;
}

/* 実際の使用例 */
.card-image {
    width:        100%;
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    border-radius: 8px;
}

.card-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ダミーブロック（画像なしの場合のプレースホルダー） */
.placeholder {
    aspect-ratio: 16 / 9;
    background:   #f0f0f0;
    border-radius: 8px;
}

2.3 画像をぼかす・フィルターをかける

/* ぼかし */
.img-blur {
    filter: blur( 4px );
}

/* グレースケール */
.img-grayscale {
    filter: grayscale( 100% );
}

/* ホバーでカラーに戻る */
.img-grayscale:hover {
    filter:     grayscale( 0% );
    transition: filter 0.3s ease;
}

/* 明るさ・コントラスト調整 */
.img-dark {
    filter: brightness( 0.7 ) contrast( 1.1 );
}

/* 複数フィルターを組み合わせる */
.img-custom {
    filter: brightness( 1.1 ) saturate( 1.2 ) contrast( 1.05 );
}

/* ヒーロー画像を暗くして文字を読みやすくする */
.hero {
    position: relative;
}

.hero-image {
    width:      100%;
    height:     100vh;
    object-fit: cover;
    filter:     brightness( 0.6 );
}

---

3. レイアウト関連

3.1 中央揃えパターン集

/* ① Flexboxで縦横中央揃え（最もよく使う） */
.center-flex {
    display:         flex;
    justify-content: center;
    align-items:     center;
}

/* ② Gridで縦横中央揃え */
.center-grid {
    display:     grid;
    place-items: center; /* justify-items + align-items の省略 */
}

/* ③ position + transformで中央揃え */
.center-absolute {
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate( -50%, -50% );
}

/* ④ marginで水平中央揃え（ブロック要素） */
.center-margin {
    max-width: 800px;
    margin:    0 auto;
}

/* ⑤ テキストの中央揃え */
.center-text {
    text-align: center;
}

/*
    使い分け：
    ① Flexbox  → 汎用的・最もよく使う
    ② Grid     → 1つの要素だけ中央に置くとき
    ③ position → 親要素に対して絶対位置で中央に置くとき
    ④ margin   → コンテンツを画面中央に配置するとき
*/

3.2 等間隔グリッド

/* 2列グリッド */
.grid-2 {
    display:               grid;
    grid-template-columns: repeat( 2, 1fr );
    gap:                   24px;
}

/* 3列グリッド */
.grid-3 {
    display:               grid;
    grid-template-columns: repeat( 3, 1fr );
    gap:                   24px;
}

/* 自動折り返しグリッド（レスポンシブ対応） */
.grid-auto {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    gap:                   24px;
    /* → 280px以上確保できる列数に自動で調整される */
}

/* スマートフォンで1列にする */
@media ( max-width: 640px ) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

3.3 スティッキーサイドバー

/* スクロールに追従するサイドバー */
.layout-with-sidebar {
    display: flex;
    gap:     40px;
    align-items: flex-start; /* ← これが重要 */
}

.main-content {
    flex: 1;
    min-width: 0; /* flexboxのはみ出しバグ対策 */
}

.sidebar {
    flex:     0 0 280px; /* 幅を固定する */
    position: sticky;
    top:      90px; /* ヘッダーの高さ + 余白 */
}

/* スマートフォンでは縦積みにする */
@media ( max-width: 768px ) {
    .layout-with-sidebar {
        flex-direction: column;
    }

    .sidebar {
        position: static; /* スティッキーを解除する */
        width:    100%;
    }
}

---

4. 視覚効果

4.1 グラデーション集

/* 線形グラデーション（横） */
.grad-horizontal {
    background: linear-gradient( to right, #1A5FC0, #27AE60 );
}

/* 線形グラデーション（斜め） */
.grad-diagonal {
    background: linear-gradient( 135deg, #8E44AD 0%, #1A5FC0 100% );
}

/* 線形グラデーション（縦・透明→黒） */
.grad-to-black {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba( 0, 0, 0, 0.7 ) 100%
    );
}

/* 放射状グラデーション */
.grad-radial {
    background: radial-gradient( circle at center, #1A5FC0, #04080E );
}

/* 複数色のグラデーション */
.grad-rainbow {
    background: linear-gradient(
        135deg,
        #E24B4A 0%,
        #EF9F27 25%,
        #27AE60 50%,
        #1A5FC0 75%,
        #8E44AD 100%
    );
}

/* 背景画像+グラデーションを重ねる */
.hero-with-grad {
    background:
        linear-gradient(
            to bottom,
            transparent 40%,
            rgba( 0, 0, 0, 0.7 ) 100%
        ),
        url( 'images/hero.jpg' ) center / cover no-repeat;
}

4.2 ボックスシャドウ集

/* 軽い影（カード） */
.shadow-sm {
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
}

/* 標準的な影 */
.shadow-md {
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.12 );
}

/* 強い影（モーダル・ドロップダウン） */
.shadow-lg {
    box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.18 );
}

/* ホバーで影を強くする */
.card {
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
    transition: box-shadow 0.3s ease,
                transform  0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.16 );
    transform:  translateY( -4px );
}

/* カラーシャドウ */
.shadow-blue {
    box-shadow: 0 4px 20px rgba( 26, 95, 192, 0.3 );
}

/* 内側の影（インセット） */
.shadow-inset {
    box-shadow: inset 0 2px 6px rgba( 0, 0, 0, 0.1 );
}

/* 複数の影を組み合わせる */
.shadow-layered {
    box-shadow:
        0 1px 2px rgba( 0, 0, 0, 0.06 ),
        0 4px 12px rgba( 0, 0, 0, 0.1 ),
        0 12px 32px rgba( 0, 0, 0, 0.08 );
}

4.3 ホバーエフェクト集

/* 拡大 */
.hover-scale:hover {
    transform:  scale( 1.05 );
    transition: transform 0.3s ease;
}

/* 浮き上がり */
.hover-lift {
    transition: transform  0.3s ease,
                box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform:  translateY( -6px );
    box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.15 );
}

/* 下線アニメーション */
.hover-underline {
    position:        relative;
    text-decoration: none;
}

.hover-underline::after {
    content:          '';
    position:         absolute;
    bottom:           -2px;
    left:             0;
    width:            0;
    height:           2px;
    background:       currentColor;
    transition:       width 0.3s ease;
}

.hover-underline:hover::after {
    width: 100%;
}

/* 背景色のスライド */
.hover-bg {
    position:   relative;
    overflow:   hidden;
    z-index:    0;
    color:      #fff;
    background: #1A5FC0;
}

.hover-bg::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: #27AE60;
    transform:  translateX( -100% );
    transition: transform 0.35s ease;
    z-index:    -1;
}

.hover-bg:hover::before {
    transform: translateX( 0 );
}

---

5. ボタン・UI部品

5.1 汎用ボタンスタイル

/* ベースボタン */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         12px 28px;
    border:          2px solid transparent;
    border-radius:   6px;
    font-size:       1.5rem;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    transition:      background   0.2s ease,
                     color        0.2s ease,
                     border-color 0.2s ease,
                     box-shadow   0.2s ease;
    white-space:     nowrap;
}

/* プライマリーボタン */
.btn-primary {
    background: #1A5FC0;
    color:      #fff;
}

.btn-primary:hover {
    background: #154fa0;
    box-shadow: 0 4px 16px rgba( 26, 95, 192, 0.35 );
}

/* アウトラインボタン */
.btn-outline {
    background:   transparent;
    color:        #1A5FC0;
    border-color: #1A5FC0;
}

.btn-outline:hover {
    background: #1A5FC0;
    color:      #fff;
}

/* ゴーストボタン（白縁・白文字） */
.btn-ghost {
    background:   transparent;
    color:        #fff;
    border-color: #fff;
}

.btn-ghost:hover {
    background: rgba( 255, 255, 255, 0.15 );
}

/* サイズバリエーション */
.btn-sm {
    padding:   8px 18px;
    font-size: 1.3rem;
}

.btn-lg {
    padding:   16px 40px;
    font-size: 1.7rem;
}

5.2 バッジ・タグ

/* バッジ */
.badge {
    display:       inline-flex;
    align-items:   center;
    padding:       4px 10px;
    border-radius: 20px;
    font-size:     1.2rem;
    font-weight:   600;
    line-height:   1;
}

.badge-primary { background: #EBF3FF; color: #1A5FC0; }
.badge-success { background: #E8F8EF; color: #27AE60; }
.badge-warning { background: #FFF8E6; color: #EF9F27; }
.badge-danger  { background: #FEECEC; color: #E24B4A; }

/* タグ */
.tag {
    display:       inline-block;
    padding:       4px 12px;
    border:        1px solid #ddd;
    border-radius: 4px;
    font-size:     1.3rem;
    color:         #666;
    background:    #fafafa;
    transition:    background   0.2s ease,
                   border-color 0.2s ease,
                   color        0.2s ease;
}

.tag:hover {
    background:    #1A5FC0;
    border-color:  #1A5FC0;
    color:         #fff;
}

---

6. 便利なユーティリティ

6.1 よく使うユーティリティクラス

/* 視覚的に隠す（スクリーンリーダーには読まれる） */
.visually-hidden {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border:     0;
}

/* 表示・非表示 */
.hidden  { display: none !important; }
.visible { visibility: visible; }

/* スクロールバーを非表示にしてスクロールは維持する */
.no-scrollbar {
    scrollbar-width:  none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome・Safari */
}

/* ポインターイベントを無効化する */
.pointer-none { pointer-events: none; }

/* テキスト選択を禁止する */
.select-none { user-select: none; }

/* セーフエリア対応（iPhone の notch・home bar） */
.safe-padding-bottom {
    padding-bottom: env( safe-area-inset-bottom );
}

6.2 clamp() でレスポンシブなサイズ指定

/*
    clamp( 最小値, 推奨値, 最大値 )：
    画面幅に応じて値が変わる。
    メディアクエリなしでレスポンシブ対応できる。
*/

/* フォントサイズ：最小1.4rem・最大2.4rem・中間は画面幅に応じる */
.fluid-title {
    font-size: clamp( 2.4rem, 4vw, 4.8rem );
}

.fluid-body {
    font-size: clamp( 1.4rem, 1.5vw, 1.6rem );
}

/* コンテナの余白：最小16px・最大80px */
.container {
    padding-inline: clamp( 16px, 5vw, 80px );
}

/* セクションの余白：最小64px・最大160px */
.section {
    padding-block: clamp( 64px, 10vw, 160px );
}

/*
    vw（ビューポート幅）との比較：
    vw だけだと最大値を超えることがある
    clamp なら最大値を安全に設定できる
*/

6.3 カスタムスクロールバー

/* スクロールバーのカスタマイズ（Chrome・Safari） */
.custom-scrollbar {
    overflow-y: auto;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px; /* スクロールバーの幅 */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background:    #f0f0f0;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background:    #bbb;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #bbb #f0f0f0;
}

---

7. レスポンシブ関連

7.1 コンテナの基本設定

/* サイトのコンテナ */
.container {
    width:        100%;
    max-width:    1200px;
    margin-inline: auto;
    padding-inline: clamp( 16px, 5vw, 40px );
}

/* 細いコンテナ（ブログ記事・フォームなど） */
.container-narrow {
    width:        100%;
    max-width:    800px;
    margin-inline: auto;
    padding-inline: clamp( 16px, 5vw, 40px );
}

7.2 レスポンシブの基本ブレイクポイント

/*
    よく使うブレイクポイント：

    スマートフォン縦 : max-width: 480px
    スマートフォン横 : max-width: 640px
    タブレット       : max-width: 768px
    小さいPC        : max-width: 1024px
    標準PC          : max-width: 1280px
*/

/* スマートフォン向け */
@media ( max-width: 640px ) { }

/* タブレット向け */
@media ( max-width: 768px ) { }

/* PC向け */
@media ( min-width: 1025px ) { }

/* タブレットのみ */
@media ( min-width: 641px ) and ( max-width: 1024px ) { }

---

8. 実践チェックリスト

✓ テキストの省略は1行なら text-overflow: ellipsis・複数行なら -webkit-line-clamp を使っているか

✓ カード画像には object-fit: cover と aspect-ratio でサイズを統一しているか

✓ 縦横中央揃えには display: flex + justify-content: center + align-items: center を使っているか

✓ カードのホバーには transform: translateY(-4px) と box-shadow の変化を transition で付けているか

✓ フォントサイズや余白に clamp() を使ってメディアクエリを減らしているか

✓ スクリーンリーダー向けのテキストには .visually-hidden を使っているか

✓ グラデーション・シャドウは複数のプリセットを用意して使い回しているか

---

まとめ

今回はWeb制作でよく使うCSS小技をスニペット集としてまとめました。ポイントをまとめると：

• テキストの省略は1行なら white-space: nowrap + text-overflow: ellipsis・複数行なら -webkit-line-clamp が定番
• 画像は object-fit: cover で枠に収めて・aspect-ratio でCLSを防ぎ・filter でビジュアル調整する
• 中央揃えは Flexbox の justify-content: center + align-items: center がもっとも汎用的
• グラデーションは linear-gradient と radial-gradient の組み合わせで表現の幅が広がる
• ホバーエフェクトは transform と box-shadow を transition で変化させるのが定番パターン
• ボタンは display: inline-flex でアイコンとテキストを並べやすくなる
• clamp() を使うとメディアクエリなしでフォントサイズや余白をレスポンシブにできる
• .visually-hidden でスクリーンリーダーに読ませつつ視覚的に隠すアクセシビリティ対応ができる

次の記事では、チェックボックス、コンボボックス、ラジオボタンをセッションにわたらせる方法をご紹介します。お楽しみに！