【最新】CSSテクニック100選:見て触って学ぶ!インタラクティブ・デモ

スポンサーリンク
CSSテクニック100選のインタラクティブデモ サイト運営

CSSのGrid、Flexbox、心躍るアニメーション、美しいタイポグラフィ、洗練されたUIデザイン、そして最先端のモダンCSS…これらのテクニック、実はあなたも生成AIで簡単にコードを生み出せるかもしれません。この『CSSテクニック100選』で使われているキーワードや説明文をヒントに、お手元の生成AIに『こんなCSSを書いて!』とお願いしてみてください。ここに掲載されているデモとほぼ同じようなコードが、きっとあなたの目の前に現れるはず。AI時代の新しいCSS学習・活用法を、ぜひ体験してみてください!

CSSテクニック100選のインタラクティブデモ

🎨 CSSテクニック100選 – 実装デモ

🎨 レイアウト・グリッド系(1〜20)
スポンサーリンク
  1. 1. CSS Grid Layout
  2. 2. Flexbox
  3. 3. Container Queries
  4. 4. Subgrid
  5. 5. Clamp()
  6. 6. Aspect-Ratio
  7. 7. Grid Template Areas
  8. 8. Position Sticky
  9. 9. Multi-column Layout
  10. 10. Box-sizing: border-box
  11. 11. Calc()
  12. 12. Min(), Max(), Clamp()
  13. 13. Logical Properties
  14. 14. Media Queries
  15. 15. :has()
  16. 16. Display: contents
  17. 17. Auto-fit vs Auto-fill
  18. 18. Intrinsic Sizing
  19. 19. Grid Auto-Flow
  20. 20. Overflow Handling
      1. スクロール可能なコンテンツ
  21. 21. @keyframes
  22. 22. transition
  23. 23. animation-delay
  24. 24. cubic-bezier
  25. 25. scroll-behavior: smooth
  26. 26. transform: scale() rotate() skew()
  27. 27. animation-fill-mode
  28. 28. CSS Snap Scroll
  29. 29. hover animation
  30. 30. scroll-triggered animation
  31. 31. CSS-only tooltip
  32. 32. animated gradient
  33. 33. parallax scrolling (CSS animation fake)
  34. 34. infinite loop animation
  35. 35. loading spinner with CSS
  36. 36. 3D transform
  37. 37. clip-path animation
  38. 38. mask-image
  39. 39. step() animation
  40. 40. backface-visibility
  41. 41. fluid typography (clamp)
  42. 42. text-wrap: balance
    1. この見出しは text-wrap: balance によって、複数行の場合の改行位置が読みやすく調整されます。
  43. 43. line-height: 1.6 (base)
  44. 44. font-feature-settings
  45. 45. letter-spacing
  46. 46. text-stroke (-webkit-)
  47. 47. text-shadow
  48. 48. text-decoration-skip-ink
  49. 49. hyphens: auto
  50. 50. web-safe fonts / system fonts
  51. 51. system-ui font stack
  52. 52. custom property for font-size
  53. 53. font-display: swap
  54. 54. @font-face
  55. 55. responsive headings (clamp)
    1. レスポンシブ見出し
  56. 56. hanging punctuation
  57. 57. ligatures (font-feature-settings)
  58. 58. multi-line ellipsis (-webkit-line-clamp)
  59. 59. word-break / overflow-wrap
  60. 60. mix-blend-mode
  61. 61. custom scrollbar styling (-webkit-)
  62. 62. :hover + :focus-visible
  63. 63. :focus-within
  64. 64. hamburger menu (CSS only)
  65. 65. accordion (CSS only)
  66. 66. form validation feedback (:valid, :invalid)
  67. 67. toggle switch (CSS only)
  68. 68. checkbox hack
  69. 69. custom checkbox (input + label)
  70. 70. modal popup (CSS only)
    1. CSSオンリーモーダル
  71. 71. dropdown menu (CSS :hover/:focus)
  72. 72. CSS tab panels (radio button hack)
      1. タブ 1 のコンテンツ
      2. タブ 2 のコンテンツ
      3. タブ 3 のコンテンツ
  73. 73. CSS counters
  74. 74. sticky footer (Flexbox method)
      1. メインコンテンツ
  75. 75. back-to-top button
  76. 76. frosted glass effect (backdrop-filter)
      1. フロストガラス効果
  77. 77. image overlay on hover
      1. 画像オーバーレイ
  78. 78. hero image section
  79. ヒーローセクション
  80. 79. viewport height (dvh)
      1. ビューポート高さ (dvh)
  81. 80. dark mode toggle (CSS Variables)
      1. ダークモード対応
  82. 81. backdrop-filter (again)
  83. 82. blend modes (mix-blend-mode)
  84. 83. scroll-padding / scroll-margin
  85. 84. CSS masonry layout (multi-column)
  86. 85. image-set() for background
  87. 86. accent-color
  88. 87. color-mix()
  89. 88. :is() と :where()
    1. :is()セレクターで赤色の見出し (H3)
      1. これも:is()セレクターで赤色の見出し (H4)
        1. 子要素のH5も:is()で赤色
  90. 89. :focus-visible (recap)
  91. 90. grid + aspect-ratio (recap)
  92. 91. forced-colors media query
  93. 92. prefers-color-scheme
      1. システムの色設定に自動対応
  94. 93. prefers-reduced-motion
  95. 94. visually-hidden class
  96. 95. skeleton screen loading effect
  97. 96. SVG + CSS animation
  98. 97. CSS Houdini (conceptual)
      1. CSS Houdini (Paint APIなど)
  99. 98. layered box shadows
  100. 99. CSS-only theme toggle (conceptual)
  101. 100. content-visibility: auto
      1. コンテンツ可視性最適化
  102. 🎉 CSS技術100選完了!
    1. このデモで学べること

1. CSS Grid Layout

複雑な2Dレイアウトも行単位で整理できる最強の配置法。

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4

2. Flexbox

横並びや縦並びを柔軟にコントロール可能。

Flex Item 1
Flex Item 2
Flex Item 3

3. Container Queries

コンテナの幅に応じてスタイルを変える次世代Responsive。

このコンテナをリサイズしてみてください(右下をドラッグ)。幅が400px以下になると文字が赤く小さくなります。

4. Subgrid

Gridの子要素にも親のラインを引き継がせられる。(ブラウザ対応に注意)

Sub 1 ContentSub 1 More
Sub 2 ContentSub 2 More
Sub 3 ContentSub 3 More

5. Clamp()

最小〜最大の幅でフォントや余白を柔軟に調整できる。

画面幅に応じてサイズが変わります

6. Aspect-Ratio

比率を保って画像やBoxをリサイズ可能。

16:9 Aspect Ratio Box

7. Grid Template Areas

レイアウトを名前付きで設計でき、直感的に管理しやすい。

Header
Main Content

8. Position Sticky

スクロールしてもある位置に”張り付く”要素を作れる。(親要素のoverflow設定に注意)

スクロールしても上部に固定されます

長いコンテンツでスクロールを試してください

9. Multi-column Layout

雑誌のような段組みレイアウトを簡単に作成できる。

これは段組みレイアウトのデモです。テキストが自動的に複数の列に分割されます。新聞や雑誌のようなレイアウトを簡単に作成できます。各列の幅は自動的に調整され、コンテンツが適切に配置されます。段組みの数は画面サイズに応じて調整することも可能です。CSS Multi-column Layoutは、読みやすいテキストレイアウトを作成するのに非常に便利な機能です。

10. Box-sizing: border-box

幅と高さにpaddingやborderを含めて設計できて便利。(グローバルリセットで適用済み)

この要素は幅100%ですが、paddingとborderも含まれています

11. Calc()

値を計算式で調整できて細かいレイアウトに便利。

width: calc(100% – 40px)
height: calc(10vh + 20px)

12. Min(), Max(), Clamp()

可変要素の制御に使える数学的関数。

min(100%, 500px) × max(100px, 10vh)

13. Logical Properties

言語に応じて左右などの方向を自動で調整。(例: margin-inline, padding-block)

margin-inline: auto
padding-block: 20px
padding-inline: 30px

14. Media Queries

画面幅に応じてスタイルを切り替えるResponsive対応。

画面幅768px以下で色が変わります

15. :has()

親要素が子要素を含むかで条件付きスタイル指定が可能に。(ブラウザ対応に注意)

16. Display: contents

DOM構造を保ちつつ、CSS的には”なかったこと”にできる。

Item 1 (Direct)
Item 2 (Wrapped)
Item 3 (Wrapped)
Item 4 (Direct)

17. Auto-fit vs Auto-fill

Gridの中で空きスペースをどう扱うか制御できる。

Auto-fit: (空きスペースをアイテムが埋める)

1
2
3

Auto-fill: (空きスペースを空のトラックとして保持)

1
2
3

18. Intrinsic Sizing

自然なサイズに合わせてレイアウトが決定できる。(例: width: fit-content)

コンテンツのサイズに合わせて幅が決まります (fit-content)

19. Grid Auto-Flow

Gridの自動配置を制御できる。(例: grid-auto-flow: column)

1
2
3
4
5
6

20. Overflow Handling

要素がはみ出たときの表示方法を制御(スクロールなど)。

スクロール可能なコンテンツ

この領域は高さが制限されており、コンテンツがはみ出す場合はスクロールして表示できます。overflow: auto を使用しています。長いコンテンツでもスクロールバーが自動的に表示されます。さらに多くのテキストがここに続くことで、スクロールの必要性がより明確になります。デモンストレーションのために、いくつかの追加の段落を挿入します。

✨ アニメーション・トランジション系(21〜40)

21. @keyframes

自由自在なアニメーションの動きを定義可能。

22. transition

マウスホバー時などに滑らかに変化させられる。

ホバーして変化を確認

23. animation-delay

アニメーションの開始タイミングをずらせる。

24. cubic-bezier

アニメーションの動きを曲線で細かく調整。

ホバーでイージング効果を確認

25. scroll-behavior: smooth

スクロールを滑らかにしてUXを向上。(ページ全体への適用はテーマ側で)

スムーズスクロールのテスト (JSなし)

スクロール用スペース
スクロール先のターゲット

26. transform: scale() rotate() skew()

回転や拡大縮小などの2D・3D変形が可能。

ホバーで変形を確認

27. animation-fill-mode

アニメーション後に状態を維持できる。(例: forwards)

スライドインアニメーション (forwards)

28. CSS Snap Scroll

セクション単位でパチッとスクロール。(コンテナ内で横スクロール)

Snap Section 1
Snap Section 2
Snap Section 3
Snap Section 4

29. hover animation

ホバー時のアニメーションでUIをリッチに。

ホバーでアニメーション

30. scroll-triggered animation

スクロールで発火するアニメーション。(簡易版、Intersection Observer推奨)

スクロールで表示されるとアニメーション

31. CSS-only tooltip

JS不要でシンプルなツールチップが作れる。

ホバーしてツールチップを表示

32. animated gradient

動くグラデーションで背景に動きを。

アニメーションするグラデーション背景

33. parallax scrolling (CSS animation fake)

背景が遅れて動くパララックス効果のCSSアニメーションによる模倣。

パララックス効果 (アニメーション)

34. infinite loop animation

無限に繰り返す動きを作れる。

35. loading spinner with CSS

CSSだけで読み込み中アイコンが作れる。

36. 3D transform

要素を3次元的に動かせる。(perspectiveが重要)

3D変形

ホバーで3D回転

37. clip-path animation

要素の形状を動的に変形できる。

クリップパスアニメーション

38. mask-image

要素に画像マスクで見せ方を演出。

円形マスクの例

39. step() animation

カクカクしたアニメーションを作成可能。

ステップアニメーション

40. backface-visibility

3D回転時の裏面の表示制御ができる。

表面 (ホバーしてね)
裏面
🖋 タイポグラフィ系(41〜60)

41. fluid typography (clamp)

ビューポート幅に応じてフォントサイズが可変。

可変フォントサイズ

42. text-wrap: balance

見出しの改行位置を自動で最適化。(ブラウザ対応に注意)

この見出しは text-wrap: balance によって、複数行の場合の改行位置が読みやすく調整されます。

43. line-height: 1.6 (base)

読みやすさを意識した行間設定。(ラッパーに適用済み)

この段落は line-height: 1.8 が設定されており、基本設定(1.6)より広い行間になっています。適切な行間は文章の可読性を大幅に向上させます。

44. font-feature-settings

字形や合字などを細かく制御。(フォントが対応している必要あり)

Ligatures example: fi fl ffi. Discretionary Ligatures: st ct. (Font dependent)

45. letter-spacing

文字間隔を微調整。

文字間隔が調整されたテキスト

46. text-stroke (-webkit-)

テキストに縁取りを追加できる。(主にWebkit系ブラウザ)

STROKE

47. text-shadow

文字に影をつけて立体感や視認性向上。

立体的な文字

48. text-decoration-skip-ink

アンダーラインが文字の形状を避けるように。(モダンブラウザでは標準)

Underlined g j p q y

49. hyphens: auto

自動で単語をハイフネーション。(lang属性と辞書が必要)

This text demonstrates automatic hyphenation. Supercalifragilisticexpialidocious. Internationalization and localization.

50. web-safe fonts / system fonts

安全なフォントを使って環境依存を回避。(ラッパーに適用済み)

Webセーフフォント(Georgia)を使用したテキストの例。

51. system-ui font stack

OSネイティブフォントで高速表示と親和性。

システムUIフォントを使用(OS標準フォント)

52. custom property for font-size

フォントもCSS変数化して使いまわせる。

CSS変数 (–font-size) でフォントサイズを管理

53. font-display: swap

フォント読み込み時の表示遅延を最小限に。(FOIT/FOUT制御)

@font-face で font-display: swap を指定すると、カスタムフォント読み込み中にフォールバックフォントを表示し、読み込み完了後に切り替えます。CLS(Cumulative Layout Shift)に注意が必要です。
(注: このデモでは実際の@font-faceの読み込みパスの問題で適用が難しいです。)

54. @font-face

独自フォントをWebに埋め込む。(上記53のコメント参照)

@font-face を使って独自フォントを読み込むことができます。例:Google Fontsはこれを利用しています。
(注: パス解決のため、実際のWebフォントファイルはCDN経由かテーマ内に配置する必要があります。)

55. responsive headings (clamp)

見出しサイズを画面に合わせて調整。

レスポンシブ見出し

56. hanging punctuation

句読点を外に出してタイポグラフィを美しく。(ブラウザ対応に注意)

“このテキストでは、引用符のような句読点が行の外側に配置されることがあります。これにより、テキストブロックの端がより整って見える効果が期待できます。”

57. ligatures (font-feature-settings)

合字(fi, flなど)の表示調整。

Ligatures: fi fl ff ffi ffl. Check if your font supports these!

58. multi-line ellipsis (-webkit-line-clamp)

複数行でも「…」で省略可能。(主にWebkit系)

これは非常に長いテキストで、複数行にわたって表示されますが、指定した行数(3行)を超えると省略記号(…)で切り詰められます。この機能は -webkit-line-clamp プロパティを使用して実現しており、主にWebKitベースのブラウザでサポートされています。他のブラウザではJavaScriptによる代替手段が必要になる場合があります。

59. word-break / overflow-wrap

単語の途中で改行可能に。(`word-break: break-all` vs `overflow-wrap: break-word`)

word-break: break-all:

ThisisAVeryLongWordWithoutSpacesThatWillBeBroken: Supercalifragilisticexpialidocious.

overflow-wrap: break-word (formerly word-wrap):

ThisisAVeryLongWordWithoutSpacesThatWillBeBroken: Supercalifragilisticexpialidocious.

60. mix-blend-mode

要素を背景と合成して独特な表現を。(例: difference)

ブレンドモード (difference)
🧩 UI・インタラクション・フォーム系(61〜80)

61. custom scrollbar styling (-webkit-)

スクロールバーの見た目を自由にデザイン可能(主にWebkit系ブラウザ)。

カスタムスクロールバーのデモです。この領域は縦にスクロールできます。スクロールバーのデザインがカスタマイズされています。グラデーションとカスタムカラーが適用されています。WebKit系ブラウザ(Chrome、Safari、Edge)で動作します。Firefoxでは標準のscrollbar-widthとscrollbar-colorを使用します。追加のコンテンツでスクロールを確認してください。コンテンツが十分長くないとスクロールバーは表示されません。コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ。

62. :hover + :focus-visible

キーボード操作にも優しいアクセシブルなUIに。

Tabキーでフォーカス、マウスでホバーを試してください

63. :focus-within

フォーム入力時に親要素にスタイルを適用できる。


64. hamburger menu (CSS only)

CSSだけでハンバーガーメニューの開閉実装が可能。

65. accordion (CSS only)

JSなしで開閉式アコーディオンを実現。

これはアコーディオンのコンテンツです。CSSだけで開閉アニメーションを実現しています。

複数のアコーディオンも同時に開くことができます。

66. form validation feedback (:valid, :invalid)

入力エラー時のスタイル反映もCSSで可能。

有効なメールアドレスを入力すると緑色、無効(かつ入力後)だと赤色になります

67. toggle switch (CSS only)

トグルスイッチ(ON/OFF)をCSSだけで作れる。

トグルスイッチをクリックしてON/OFF

68. checkbox hack

チェックボックスで他要素の表示切り替えが可能。

チェックボックスの状態に応じて変化する要素

69. custom checkbox (input + label)

ラベルクリックでチェックできる使いやすいUIに。

70. modal popup (CSS only)

CSSだけでモーダル表示も可能(チェックボックス等使用)。(固定表示はビューポート基準)

71. dropdown menu (CSS :hover/:focus)

ホバーやフォーカスで展開するメニューUIがCSSだけで。

72. CSS tab panels (radio button hack)

タブ切り替えUIをCSSだけで構築可能。

タブ 1 のコンテンツ

最初のタブのコンテンツです。CSSだけでタブ切り替えを実現しています。

タブ 2 のコンテンツ

2番目のタブのコンテンツです。ラジオボタンとCSSセレクターを使用しています。

タブ 3 のコンテンツ

3番目のタブのコンテンツです。JavaScriptは一切使用していません。

73. CSS counters

自動番号付けやリスト生成が可能。

  1. CSSカウンターの項目1
  2. CSSカウンターの項目2
  3. CSSカウンターの項目3
  4. CSSカウンターの項目4

74. sticky footer (Flexbox method)

コンテンツが少なくてもフッターを下部に固定。

75. back-to-top button

ページトップに戻るボタンのスタイリング。(固定表示はビューポート基準)

画面右下に固定されたトップに戻るボタン(↑)をご確認ください。(このデモページが十分に長ければ表示されます)

76. frosted glass effect (backdrop-filter)

ぼかし+半透明の”ガラス風”背景効果。(ブラウザ対応に注意)

フロストガラス効果

backdrop-filterを使用したモダンなガラス風エフェクトです。

77. image overlay on hover

画像の上にホバーで説明やボタンを表示。

サンプル画像

画像オーバーレイ

ホバーまたはフォーカスで表示

78. hero image section

ファーストビューにインパクトある画像セクション。(デモはコンテナ内)

ヒーローセクション

背景画像とテキストで印象的な導入部を作成

79. viewport height (dvh)

iOSの100vhのバグに対応した安全な高さ指定。(dvhはモダンブラウザ)

ビューポート高さ (dvh)

モバイルでもアドレスバーなどを考慮した適切な高さ (100dvh)

80. dark mode toggle (CSS Variables)

CSS変数を使ったダークモード切り替えが可能。(このブロック内のみ)

ダークモード対応

CSS変数でテーマ切り替えを実現 (このボックス内)

🧪 モダン・トリック系(81〜100)

81. backdrop-filter (again)

背景のぼかしや彩度調整などを実現(モダンブラウザ対応)。

backdrop-filterでぼかし効果

82. blend modes (mix-blend-mode)

要素を背景や他要素と合成して独特なビジュアルに。

Multiply
Screen
Overlay

83. scroll-padding / scroll-margin

アンカーリンクで固定ヘッダー等で見切れないよう余白を設定可能。

スクロールパディング/マージンのテスト (scroll-margin-topをターゲットに適用)

スクロール用スペース
scroll-margin-top適用済みターゲット

84. CSS masonry layout (multi-column)

JS不要のPinterest風「石組み」レイアウトが実現。(アイテムは列方向に流れる)

石組み 1
石組み 2
石組み 3
石組み 4
石組み 5
石組み 6

85. image-set() for background

高DPIや画面幅に応じて画像を出し分けできる。(ブラウザ対応に注意)

高DPI環境では2x画像が表示されるはず

86. accent-color

ブラウザ標準のUI部品の色を一括カスタム可能。




レンジ

フォーム要素のアクセントカラーが統一されています

87. color-mix()

2色を割合でミックスして柔軟な色指定ができる。(ブラウザ対応に注意)

青70% (sRGB) + 赤30% (sRGB) = ミックスカラー

88. :is() と :where()

複雑なセレクターをシンプルに記述できる。(:whereは詳細度0)

:is()セレクターで赤色の見出し (H3)

これも:is()セレクターで赤色の見出し (H4)

:where()セレクターで青色のパラグラフ

これも:where()セレクターで青色のスパン
子要素のH5も:is()で赤色

子要素のPも:where()で青色

89. :focus-visible (recap)

キーボード操作のみにフォーカススタイルを表示。(No.62参照)

90. grid + aspect-ratio (recap)

グリッド内でも比率維持が簡単にできる組み合わせ。

1:1
1:1
1:1
1:1

91. forced-colors media query

Windowsの強制カラーモードに対応したスタイル切り替え。

強制カラーモード対応(Windows高コントラストモードなどで確認)

92. prefers-color-scheme

OSのダーク/ライトモードの自動切替に対応。

システムの色設定に自動対応

OSのダーク/ライトモード設定に応じて自動で色が変わります

93. prefers-reduced-motion

ユーザーの設定に応じてアニメーションを減らす対応。

OSで「動きを減らす」設定が有効だとアニメーションが停止

94. visually-hidden class

視覚的には見えないけどスクリーンリーダーに届く要素。

上のボタンにはスクリーンリーダー用の隠しテキストが含まれています

95. skeleton screen loading effect

読み込み中に”うっすらした枠”で先読みを演出。

96. SVG + CSS animation

SVG要素のアニメーションをCSSで制御可能。

SVGアニメーション

97. CSS Houdini (conceptual)

CSSをJavaScriptから拡張して独自プロパティを作れる。(JS Workletが必要)

CSS Houdini (Paint APIなど)

実行にはJS Paint Workletの登録が必要。これは視覚的なプレースホルダです。

98. layered box shadows

影を重ねて立体感や浮き出しを演出。

多層シャドウ効果

99. CSS-only theme toggle (conceptual)

ラジオボタンやチェックボックスでテーマ切替が可能。(概念実証)

実際のテーマ切り替えはCSS変数の変更で行います (No.80参照)

100. content-visibility: auto

表示されていない要素のレンダリングをスキップして高速化。(ブラウザ対応に注意)

コンテンツ可視性最適化

この要素はcontent-visibility: autoが適用されており、画面外にある時はレンダリングがスキップされる可能性があります。パフォーマンス向上に寄与します。大量のコンテンツがあるページで特に効果的です。スクロールしてこのセクションが画面外に出たり入ったりすると、ブラウザの開発者ツールでレンダリングの変化を観察できるかもしれません。

🎉 CSS技術100選完了!

以上で、世界的なWebデザイナーが使うCSSテクニック100選のデモが完了しました。

これらの技術を組み合わせることで、モダンで美しいWebサイトを作成できます。

このデモで学べること

✅ 最新のCSSレイアウト技術
✅ 滑らかなアニメーション効果
✅ アクセシブルなUI設計
✅ レスポンシブデザイン
✅ モダンブラウザの新機能

タイトルとURLをコピーしました