CSSのGrid、Flexbox、心躍るアニメーション、美しいタイポグラフィ、洗練されたUIデザイン、そして最先端のモダンCSS…これらのテクニック、実はあなたも生成AIで簡単にコードを生み出せるかもしれません。この『CSSテクニック100選』で使われているキーワードや説明文をヒントに、お手元の生成AIに『こんなCSSを書いて！』とお願いしてみてください。ここに掲載されているデモとほぼ同じようなコードが、きっとあなたの目の前に現れるはず。AI時代の新しいCSS学習・活用法を、ぜひ体験してみてください！
🎨 CSSテクニック100選 – 実装デモ
- 1. CSS Grid Layout
- 2. Flexbox
- 3. Container Queries
- 4. Subgrid
- 5. Clamp()
- 6. Aspect-Ratio
- 7. Grid Template Areas
- 8. Position Sticky
- 9. Multi-column Layout
- 10. Box-sizing: border-box
- 11. Calc()
- 12. Min(), Max(), Clamp()
- 13. Logical Properties
- 14. Media Queries
- 15. :has()
- 16. Display: contents
- 17. Auto-fit vs Auto-fill
- 18. Intrinsic Sizing
- 19. Grid Auto-Flow
- 20. Overflow Handling
1. CSS Grid Layout
複雑な2Dレイアウトも行単位で整理できる最強の配置法。
2. Flexbox
横並びや縦並びを柔軟にコントロール可能。
3. Container Queries
コンテナの幅に応じてスタイルを変える次世代Responsive。
このコンテナをリサイズしてみてください（右下をドラッグ）。幅が400px以下になると文字が赤く小さくなります。
4. Subgrid
Gridの子要素にも親のラインを引き継がせられる。(ブラウザ対応に注意)
5. Clamp()
最小〜最大の幅でフォントや余白を柔軟に調整できる。
6. Aspect-Ratio
比率を保って画像やBoxをリサイズ可能。
7. Grid Template Areas
レイアウトを名前付きで設計でき、直感的に管理しやすい。
8. Position Sticky
スクロールしてもある位置に”張り付く”要素を作れる。(親要素のoverflow設定に注意)
長いコンテンツでスクロールを試してください
9. Multi-column Layout
雑誌のような段組みレイアウトを簡単に作成できる。
これは段組みレイアウトのデモです。テキストが自動的に複数の列に分割されます。新聞や雑誌のようなレイアウトを簡単に作成できます。各列の幅は自動的に調整され、コンテンツが適切に配置されます。段組みの数は画面サイズに応じて調整することも可能です。CSS Multi-column Layoutは、読みやすいテキストレイアウトを作成するのに非常に便利な機能です。
10. Box-sizing: border-box
幅と高さにpaddingやborderを含めて設計できて便利。(グローバルリセットで適用済み)
11. Calc()
値を計算式で調整できて細かいレイアウトに便利。
height: calc(10vh + 20px)
12. Min(), Max(), Clamp()
可変要素の制御に使える数学的関数。
13. Logical Properties
言語に応じて左右などの方向を自動で調整。(例: margin-inline, padding-block)
padding-block: 20px
padding-inline: 30px
14. Media Queries
画面幅に応じてスタイルを切り替えるResponsive対応。
15. :has()
親要素が子要素を含むかで条件付きスタイル指定が可能に。(ブラウザ対応に注意)
16. Display: contents
DOM構造を保ちつつ、CSS的には”なかったこと”にできる。
17. Auto-fit vs Auto-fill
Gridの中で空きスペースをどう扱うか制御できる。
Auto-fit: (空きスペースをアイテムが埋める)
Auto-fill: (空きスペースを空のトラックとして保持)
18. Intrinsic Sizing
自然なサイズに合わせてレイアウトが決定できる。(例: width: fit-content)
19. Grid Auto-Flow
Gridの自動配置を制御できる。(例: grid-auto-flow: column)
20. Overflow Handling
要素がはみ出たときの表示方法を制御（スクロールなど）。
スクロール可能なコンテンツ
この領域は高さが制限されており、コンテンツがはみ出す場合はスクロールして表示できます。overflow: auto を使用しています。長いコンテンツでもスクロールバーが自動的に表示されます。さらに多くのテキストがここに続くことで、スクロールの必要性がより明確になります。デモンストレーションのために、いくつかの追加の段落を挿入します。
21. @keyframes
自由自在なアニメーションの動きを定義可能。
22. transition
マウスホバー時などに滑らかに変化させられる。
ホバーして変化を確認
23. animation-delay
アニメーションの開始タイミングをずらせる。
24. cubic-bezier
アニメーションの動きを曲線で細かく調整。
ホバーでイージング効果を確認
25. scroll-behavior: smooth
スクロールを滑らかにしてUXを向上。(ページ全体への適用はテーマ側で)
26. transform: scale() rotate() skew()
回転や拡大縮小などの2D・3D変形が可能。
ホバーで変形を確認
27. animation-fill-mode
アニメーション後に状態を維持できる。(例: forwards)
28. CSS Snap Scroll
セクション単位でパチッとスクロール。(コンテナ内で横スクロール)
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回転
37. clip-path animation
要素の形状を動的に変形できる。
38. mask-image
要素に画像マスクで見せ方を演出。
円形マスクの例
39. step() animation
カクカクしたアニメーションを作成可能。
ステップアニメーション
40. backface-visibility
3D回転時の裏面の表示制御ができる。
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系ブラウザ)
47. text-shadow
文字に影をつけて立体感や視認性向上。
48. text-decoration-skip-ink
アンダーラインが文字の形状を避けるように。(モダンブラウザでは標準)
Underlined g j p q y
49. hyphens: auto
自動で単語をハイフネーション。(lang属性と辞書が必要)
50. web-safe fonts / system fonts
安全なフォントを使って環境依存を回避。(ラッパーに適用済み)
Webセーフフォント（Georgia）を使用したテキストの例。
51. system-ui font stack
OSネイティブフォントで高速表示と親和性。
52. custom property for font-size
フォントもCSS変数化して使いまわせる。
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系)
59. word-break / overflow-wrap
単語の途中で改行可能に。(`word-break: break-all` vs `overflow-wrap: break-word`)
word-break: break-all:
overflow-wrap: break-word (formerly word-wrap):
60. mix-blend-mode
要素を背景と合成して独特な表現を。(例: difference)
61. custom scrollbar styling (-webkit-)
スクロールバーの見た目を自由にデザイン可能（主にWebkit系ブラウザ）。
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
自動番号付けやリスト生成が可能。
- CSSカウンターの項目1
- CSSカウンターの項目2
- CSSカウンターの項目3
- 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. backdrop-filter (again)
背景のぼかしや彩度調整などを実現（モダンブラウザ対応）。
backdrop-filterでぼかし効果
82. blend modes (mix-blend-mode)
要素を背景や他要素と合成して独特なビジュアルに。
83. scroll-padding / scroll-margin
アンカーリンクで固定ヘッダー等で見切れないよう余白を設定可能。
84. CSS masonry layout (multi-column)
JS不要のPinterest風「石組み」レイアウトが実現。(アイテムは列方向に流れる)
85. image-set() for background
高DPIや画面幅に応じて画像を出し分けできる。(ブラウザ対応に注意)
高DPI環境では2x画像が表示されるはず
86. accent-color
ブラウザ標準のUI部品の色を一括カスタム可能。
レンジ
フォーム要素のアクセントカラーが統一されています
87. color-mix()
2色を割合でミックスして柔軟な色指定ができる。(ブラウザ対応に注意)
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)
グリッド内でも比率維持が簡単にできる組み合わせ。
91. forced-colors media query
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設計
✅ レスポンシブデザイン
✅ モダンブラウザの新機能
