コーディングをしていると、「ちょっとした見た目を整えたい」「もっと効率よくコーディングしたい」と思うことはありませんか？

本記事では、初心者でもすぐに使えるCSSの小技と便利テクニック10選を紹介します。

知っておくだけでサイトの表示をおしゃれにできたり、作業効率がぐっと上がる内容ばかりなので、ぜひ参考にしてみてください。

目次
  1. スクロールスナップ
  2. フィルタ付きギャラリー
  3. スクロールすると要素を固定
  4. ステップ式プロセスバー
  5. 画像をトリミング
  6. 文字が徐々に表示されるマスクアニメーション
  7. しま模様のライン
  8. チェックマークがポップアップして出現するアニメーション（成功アイコン）
  9. グラデーションのスムーズな色変化（背景フェード）
  10. ブロブ（blob）がゆっくり形を変えるアニメーション
  11. まとめ

スクロールスナップ

See the Pen スクロールスナップ by et (@eito-oda) on CodePen.

CSS の scroll-snap（スクロールスナップ） は、ページをスクロールしたときに特定位置でピタッと止まるようにできる便利な機能です。スマホアプリのカルーセルや、1ページ1画面構成のLPなどでよく使われるエフェクトで、ユーザーが迷わず快適にコンテンツを閲覧できるようになります。

ユーザーにストレスなく情報を段階的に見せたいときに非常に効果的なレイアウトで、LP・ポートフォリオ・商品紹介など多くの場面で活用できます。

フィルタ付きギャラリー

See the Pen フィルタ付きギャラリー by et (@eito-oda) on CodePen.

JavaScript を使わず、CSS だけでカテゴリ別の絞り込み機能を作る方法です。

ポイントは、checkbox の :checked 状態を利用し、特定の要素を表示・非表示に切り替える仕組み。よくある「カテゴリ別ギャラリー」「作品フィルター」「タグごとの切り替え」といった UI を、わずか数行の CSS で実現できます。

HTML では、カテゴリごとにチェックボックスとラベルを配置し、その後にギャラリーとなる .items を並べます。CSS 側では、チェックが外れた状態（:not(:checked)）をトリガーとして、該当カテゴリの .item 要素だけを display:none; で非表示にします。兄弟セレクタ ~ を使うことで、チェックボックスの状態が後続の要素に反映されるしくみです。

今回のサンプルでは、

  • A のチェックを外す → .item.a を非表示
  • B のチェックを外す → .item.b を非表示

となり、ユーザーが複数のカテゴリを自由に組み合わせて表示できます。デザインの自由度も高く、シンプルなギャラリーからポートフォリオ、商品一覧まで幅広く応用可能です。

スクロールすると要素を固定

See the Pen スクロールすると要素を固定 by et (@eito-oda) on CodePen.

ページを読み進めると、特定の要素が画面上部に吸い付くように固定される――いわゆる sticky（スティッキー）効果 は、近年のウェブ UI において欠かせない表現技法のひとつです。ユーザーがどれだけスクロールしても見失ってほしくない情報を適切に保持できるため、ナビゲーションの視認性向上や、セクションごとの文脈維持に大きく貢献します。

特にこの記事で紹介しているような セクションタイトルを固定する実装 は、長文コンテンツを扱うブログやドキュメントで効果を発揮します。画面上部に見出しを固定することで、読者は“いま自分がどの話題を読んでいるのか”を常に把握でき、情報の整理が滑らかになります。

CSS の position: sticky; が登場したことで、従来は JavaScript が必要だった挙動を、わずか数行のスタイルだけで実現できるようになりました。
デザイン・アクセシビリティ・読みやすさを両立するための重要な UI パターンとして、ぜひ活用したい技法です。

ステップ式プロセスバー

See the Pen ステップ式プロセスバー by et (@eito-oda) on CodePen.

ユーザーが今どの段階にいるのかを視覚的に示す「ステップ式プロセスバー」は、フォーム入力・購入フロー・会員登録などの多段階 UI で非常に効果的なパターンです。今回のサンプルでは、HTML の <progress> 要素とシンプルな CSS を組み合わせることで、ステップの進捗率と現在位置をわかりやすく表示しています。

<progress> 要素では全体の進捗を数値で管理し、CSS のカスタムスタイルによりグラデーション付きのバーとして表現。さらにステップ名のリスト（<ol class="labels">）を並べることで、「完了済み（done）」「現在のステップ（active）」「未完了」の状態が一目で分かるデザインになっています。

JavaScript を使わなくても、value を変更するだけで進捗を更新できるため、実装がとても軽量。シンプルでありながら視認性も高く、さまざまな Web フローにそのまま利用できる汎用性の高い UI です。

画像をトリミング

See the Pen Untitled by et (@eito-oda) on CodePen.

画像はそのまま配置すると、被写体の位置や余白のバランスによっては、意図した印象が伝わりにくいことがあります。そこで役立つのが CSS によるトリミング（切り抜き）表現です。必要な部分だけを強調し、レイアウトに合わせた見せ方を実現できます。

今回のサンプルでは、元の画像（before）と、object-fit: cover; を使ってトリミングした画像を並べ、視覚的に違いを確認できる構成になっています。加工ソフトを使わなくても、CSS だけで比率を保ちつつ見栄えの良い切り抜きを作れる点が大きな特徴です。

画像の焦点を整えたり、カードデザインの統一感を持たせたりと、ユーザーにとって “見やすいビジュアル” をつくるうえで不可欠なテクニックです。デザインの完成度を高めたい場合、CSS トリミングは非常に有効なアプローチといえるでしょう。

文字が徐々に表示されるマスクアニメーション

See the Pen 文字が徐々に表示されるマスクアニメーション by et (@eito-oda) on CodePen.

文字をただ表示するだけでなく 「動き」や「演出」を加えることで、ユーザーの目を引き、印象に残る表現が可能です。そのひとつが マスクアニメーション です。

今回のサンプルでは、文字の上にグラデーション背景を重ね、CSS アニメーションで徐々に背景の位置を変化させることで、文字がスムーズに現れる演出を実現しています。background-clip: text と color: transparent を組み合わせることで、文字自体がマスクのように機能し、滑らかに表示されるのが特徴です。

この手法は 見出しやキャッチコピー に使うと効果的で、ページの導入部分や特定の強調ポイントに動きを付けるだけで、印象的でモダンなデザインを簡単に作れます。CSS だけで実装できるため、JavaScript を使わず軽量に表現できるのも大きな利点です。

しま模様のライン

See the Pen しま模様のライン by et (@eito-oda) on CodePen.

背景に しま模様（ストライプ） を取り入れると、単色では単調になりがちなレイアウトにリズムやアクセントを加えることができます。今回のサンプルでは、CSS の linear-gradient を使い、斜め45度の青系ストライプを作成しています。

.stripe クラスで背景にしま模様を設定し、その上に白いコンテナ .stripe-inner を重ねることで、文字情報が読みやすくなるようデザインされています。こうすることで、視覚的な動きや立体感を維持しながら、コンテンツの可読性を損なわずに装飾を加えることが可能です。

この手法は、記事の強調ブロックやカードデザインの背景など、注目させたいコンテンツに活用すると効果的です。CSS だけで表現できるため、軽量で柔軟なデザインが実現できます。

チェックマークがポップアップして出現するアニメーション（成功アイコン）

See the Pen Untitled by et (@eito-oda) on CodePen.

ユーザーに操作完了や成功を視覚的に伝える際、チェックマークのアニメーションは非常に効果的です。

今回のサンプルでは、緑色の円枠がポンッと拡大して現れ、その後にチェックマークがフェードインする動きを CSS だけで表現しています。

  • 円形は scale アニメーションで拡大し、ポップアップ感を演出
  • チェックマークは擬似要素を使い、円の拡大後に opacity を変化させて表示
  • アニメーションの順序とタイミングを工夫することで、「成功した！」という視覚的フィードバックを自然に与えることが可能

この手法は、フォーム送信や保存完了などの UI フィードバックに適しており、JavaScript を使わず CSS だけで軽量に実装できるのが大きな利点です。

グラデーションのスムーズな色変化（背景フェード）

See the Pen グラデーションのスムーズな色変化（背景フェード） by et (@eito-oda) on CodePen.

ページ全体の印象を華やかにし、ユーザーの目を引く演出として非常に効果的です。
今回のサンプルでは、複数の色を持つ線形グラデーションを background-position のアニメーションでスムーズに変化させることで、背景が徐々に色を変えていく「フェードするグラデーション」を表現しています。

  • background-size: 600% 600% でグラデーションを大きく設定し、動きに奥行きを演出
  • @keyframes gradShift で背景の位置を左右にスライドさせ、色が自然に移り変わるように見せる
  • CSS だけで無限ループのアニメーションが可能で、軽量かつ滑らかな表現ができる

この手法は ヒーローセクションの背景 や ボタン・カードの装飾 にも応用可能で、単色背景では得られない動的でリッチなビジュアルを簡単に実現できます。

ブロブ（blob）がゆっくり形を変えるアニメーション

See the Pen ブロブ（blob）がゆっくり形を変えるアニメーション by et (@eito-oda) on CodePen.

目を引く動きのあるオブジェクトとして人気のあるのが ブロブ（blob）アニメーション です。
今回のサンプルでは、グラデーションを持つ円形に近いオブジェクトが、border-radius の値をゆっくり変化させることで、自然に形を変えていく「有機的な変形」を表現しています。

  • border-radius を keyframes で変化させ、0% → 50% → 100% で繰り返すことで、滑らかに形状が変化
  • ease-in-out を使うことで、変形が自然で柔らかい動きに
  • filter: drop-shadow によって立体感や奥行きを加え、よりリッチなビジュアルを演出

この手法は、背景デザインや装飾、ヒーローセクションのアクセントとして効果的で、JavaScript を使わずに軽量で滑らかなアニメーションを実装できるのが大きなメリットです。

まとめ

今回紹介した CSS の小技や便利テクニックは、ページの見た目を整えるだけでなく、ユーザー体験や作業効率を向上させる効果があります。

  • スクロールスナップ で快適な閲覧体験を提供
  • フィルタ付きギャラリー でシンプルにカテゴリ切り替えを実現
  • sticky（固定表示） で重要情報を常に見せる
  • ステップ式プロセスバー で進捗を直感的に表示
  • 画像トリミング や マスクアニメーション で視覚的なアクセントを追加
  • ストライプ背景やグラデーション、ブロブアニメーション で動きとリズムを演出
  • チェックマークアニメーション で操作完了のフィードバックを明確に

これらはすべて CSS だけで実装可能 なので、軽量かつ高速にページを演出できます。
知っているかどうかで作業効率やデザインの完成度が大きく変わるテクニックばかりです。

ぜひ今回のサンプルを参考に、自分のサイトやプロジェクトで 即戦力として活用 してみてください。