こんにちは！ケイです。Web制作の現場で「よく使うけれど、毎回調べるのは面倒」なCSSを50個厳選しました。すべてのパーツにプレビュー（デモ）を付けているので、適用後のイメージをその場で確認できます。
1. レイアウトの基本（01〜05）
01. Flexboxで上下左右中央揃え
子要素を親要素のど真ん中に配置します。Web制作で最も使う必須テクニックです。
.center { display: flex; justify-content: center; align-items: center; }02. CSS Gridで一発中央揃え
より短いコードで中央揃えを実現します。1つの要素を配置するのに最適です。
.grid-center { display: grid; place-items: center; }03. アスペクト比固定 (16:9)
画面幅が変わっても、要素の比率（YouTubeなどと同じ16:9）を維持します。
.aspect-16-9 { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }04. 画面一杯の背景画像
トップページのメインビジュアル（ヒーローエリア）などで多用します。
/* 実際は height: 100vh; を指定します */
.full-bg { background: url('img.jpg') no-repeat center/cover; }05. スクロールバー非表示
スクロール機能は残しつつ、見た目からバーを消してスッキリさせます。
ここをスクロールしてください。バーは表示されませんが、内容はスクロールできます。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
.no-scroll { -ms-overflow-style: none; scrollbar-width: none; /* ここに overflow: scroll; が必要 */ }
.no-scroll::-webkit-scrollbar { display: none; }2. ボタン・リンク（06〜15）
※ボタンはマウスを乗せて（ホバーして）動きを確認してください。
06. シンプルな角丸ボタン
最も汎用的なフラットデザインのボタンです。
.btn { padding: 10px 25px; border-radius: 25px; background: #3498db; color: #fff; border: none; cursor: pointer; }07. 浮き上がるホバー(Lift)
ホバー時にふわっと浮き上がり、影がつきます。
.btn-lift { transition: transform 0.3s; }
.btn-lift:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }08. 光るホバー(Glow)
ホバー時にボタンの外側がぼんやりと光ります。
.btn-glow:hover { box-shadow: 0 0 15px rgba(52, 152, 219, 0.8); transition: 0.3s; }09. アウトライン（枠線）ボタン
背景が透明で、枠線だけのスタイリッシュなボタンです。
.btn-outline { border: 2px solid #3498db; color: #3498db; background: transparent; }
.btn-outline:hover { background: #3498db; color: #fff; transition: 0.3s; }10. グラデーションボタン
流行りの美しいグラデーション背景のボタンです。
.btn-grad { background: linear-gradient(45deg, #ff6b6b, #f06595); color: white; border: none; }11. ネオンボタン
暗い背景で際立つ、サイバーパンク風の発光デザインです。
.btn-neon { background: #000; border: 2px solid #00f2ff; color: #00f2ff; text-shadow: 0 0 8px #00f2ff; box-shadow: 0 0 8px rgba(0,242,255,0.5); }12. クリックで凹む演出
クリックした瞬間（active時）に少し小さくなり、押した感覚を与えます。
.btn-push:active { transform: scale(0.95); transition: 0.1s; }13. 3D立体ボタン
下部に濃い色のボーダーをつけて立体感を出し、クリックで沈み込みます。
.btn-3d { background: #e67e22; border-bottom: 5px solid #d35400; color: #fff; }
.btn-3d:active { border-bottom: none; transform: translateY(5px); }14. 光が走るアニメーション
ホバーすると、キラッと光の筋が通り過ぎます。
.btn-shine { position: relative; overflow: hidden; }
/* ::after要素のCSSは省略しています。上のstyleタグを参照してください */15. ガラスモーフィズムボタン
すりガラスのような質感で、背景をぼかして透過させます。
.btn-glass { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.4); }3. テキスト・見出し（16〜25）
16. テキストグラデーション
文字自体にグラデーションをかけます。見出しに使うと効果的です。
Awesome Gradient Text
.text-grad { background: linear-gradient(to right, #30cfd0 0%, #330867 100%); -webkit-background-clip: text; color: transparent; }17. 1行で「…」省略
指定幅を超えたテキストを、自動的に三点リーダー(…)で省略します。
このテキストは幅が狭いので末尾が省略されます。このテキストは幅が狭いので末尾が省略されます。
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }18. 指定行数で「…」省略
2行目や3行目以降を隠したい時に非常に便利です。（デモは2行指定）
これは複数行のテキスト省略のデモです。指定した行数（ここでは2行）を超えると、自動的に末尾が三点リーダーになります。長い説明文などをカード内に収めたい場合に役立ちます。
.clamp { display: -webkit-box; -webkit-line-clamp: 2; /* 行数を指定 */ -webkit-box-orient: vertical; overflow: hidden; }19. 文字の縁取り
文字の中を透明にし、縁取り線だけを表示します。
STROKE TEXT
.text-stroke { -webkit-text-stroke: 1px #333; color: transparent; }20. マーカー風の下線
蛍光ペンで引いたような、少し太めのアンダーラインです。
ここが重要なポイントです。
.marker { background: linear-gradient(transparent 60%, #ffeb3b 60%); display: inline; }21. 左側の縦線見出し
ブログの見出しでよく使われる、シンプルなデザインです。
見出しのデザインサンプル
.h-left { border-left: 5px solid #3498db; padding-left: 15px; }22. 上下線の見出し
上下にボーダーを引き、引き締まった印象を与えます。
TOP & BOTTOM BORDER
.h-tb { border-top: 2px solid #333; border-bottom: 2px solid #333; padding: 10px 0; text-align: center; }23. シンプルな吹き出し
会話形式のコンテンツなどで使える、三角形付きのボックスです。
.balloon { position: relative; background: #f0f4f8; border-radius: 8px; padding: 15px; }
/* ::after要素は省略。上のstyleタグ参照 */24. 斜め背景のテキスト
背景を斜めに歪ませることで、勢いのあるデザインになります。
.skew-bg { background: #333; color: #fff; transform: skewX(-15deg); display: inline-block; padding: 5px 15px; }25. おしゃれな英字間隔
文字の間隔（カーニング）を広げ、大文字にすることで高級感を出します。
Letter Spacing
.ls { letter-spacing: 0.3em; text-transform: uppercase; }4. カード・ボックス装飾（26〜35）
26. モダンな柔らかい影
最近の主流である、広範囲に広がる薄い影（ドロップシャドウ）です。
Modern Card
柔らかい影をつけることで、浮遊感と高級感が出ます。
.card { box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 15px; padding: 30px; background: #fff; }27. ニューモーフィズム（凸）
要素が背景から滑らかに隆起しているような表現です。
/* 背景色が重要です */
.neu-up { background: #e0e0e0; border-radius: 20px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; }28. ニューモーフィズム（凹）
逆に、要素が内側に窪んでいるような表現です。
.neu-down { background: #e0e0e0; border-radius: 20px; box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff; }29. 画像ホバーズーム
ホバーすると、枠の中で画像だけがゆっくり拡大します。
.img-zoom { overflow: hidden; }
.img-zoom img { transition: 0.4s; }
.img-zoom:hover img { transform: scale(1.15); }30. ガラスカード
背景の画像が透けて見える、美しいガラス風のカードです。
Glassmorphism
背景をぼかすことで、文字の可読性を確保しています。
.glass-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); }31. コーナーリボン
ボックスの隅に「New」や「Sale」などのリボンを配置します。
.ribbon-box { position: relative; overflow: hidden; }
.ribbon { position: absolute; top: 12px; right: -25px; background: #e74c3c; color: #fff; padding: 5px 30px; transform: rotate(45deg); }32. 付箋風ボックス
少し傾けて影をつけることで、貼られた付箋紙のように見せます。
少し傾けるとリアルになります。
.sticky { background: #fff9c4; box-shadow: 3px 3px 7px rgba(0,0,0,0.15); transform: rotate(-2deg); }33. おしゃれな点線枠
実線ではなく点線（破線）を使うことで、柔らかい印象になります。
（のようなエリアに最適）
.dashed { border: 3px dashed #aaa; padding: 20px; border-radius: 8px; }34. 二重線のボーダー
二重線（double）を使った、クラシックで強調された枠線です。
.double { border: 6px double #333; padding: 15px; }35. 背景ぼかしボックス
ボックスの背景（背面にあるもの）をぼかします。写真の上に文字を乗せる時に有効です。
このボックスの背面だけが
ぼかされています。
.blur-box { background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); }5. フォーム要素（36〜40）
※入力欄などは実際にクリックして動作を確認できます。
36. 入力時フォーカス色
テキストボックスをクリックした（フォーカスが当たった）時の枠線の色を変更します。
.input-focus:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52,152,219,0.3); }37. チェックボックスの着色
ブラウザ標準の青色ではなく、指定した色に変更します。（accent-color使用）
input[type="checkbox"] { accent-color: #3498db; scale: 1.5; }38. スイッチ風トグル
チェックボックスをスマホのトグルスイッチのような見た目に変えます。
/* 複雑なため、冒頭のstyleタグ内の .toggle 関連のCSSをすべてコピーしてください */
39. プレースホルダーの文字色
入力欄にあらかじめ表示されている薄い文字（プレースホルダー）の色を変えます。
/* 実際は ::placeholder を使います */
input::placeholder { color: #bbb; font-size: 0.8em; }40. 円形検索バー
丸みのあるデザインと検索アイコン（SVG背景）を組み合わせた入力欄です。
.search { border-radius: 50px; padding: 12px 25px 12px 35px; border: 1px solid #ddd; outline: none; /* 背景アイコン指定は省略 */ }6. アニメーション・装飾（41〜50）
41. 無限回転ローダー
データの読み込み中（ローディング）画面でよく使われるくるくる回るアニメーションです。
@keyframes spin { to { transform: rotate(360deg); } }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 0.8s linear infinite; }42. ふわふわ浮遊
要素がゆっくりと上下に浮遊しているような動きをつけます。
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.float { animation: float 3s ease-in-out infinite; }43. じわじわ点滅
透明度と大きさを変化させて、注目を集めるパルス（鼓動）のような表現です。
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.95); } }
.pulse { animation: pulse 2s infinite; }44. 画像モノクロホバー
普段はモノクロで、ホバーした時だけカラーになるエフェクトです。
.gray img { filter: grayscale(100%); transition: 0.5s; }
.gray:hover img { filter: grayscale(0%); }45. スムーズスクロール
ページ内リンクをクリックした時の移動が滑らかになります。（このページの目次をクリックしてみてください）
html { scroll-behavior: smooth; }46. テキスト選択の色変更
このページのテキストをマウスでドラッグして選択してみてください。背景色が青になります。
ここをドラッグして選択すると色が変わります。
::selection { background: #3498db; color: #fff; }47. 波紋エフェクト影
水面に水滴が落ちたような、波紋が広がるアニメーションです。注目させたいアイコンなどに。
/* キーフレームは省略。冒頭のstyleタグ参照 */
.ripple { box-shadow: 0 0 0 0 rgba(52,152,219,0.4); animation: ripple 1.5s infinite; border-radius: 50%; width: 50px; height: 50px; background: #3498db; }48. 正円（アバター用）
プロフィール画像などを綺麗な正円（まんまる）で表示します。
.circle { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }49. 動くグラデ背景
背景のグラデーション色がゆっくりと移り変わる、リッチな表現です。
/* 冒頭の style タグ内の @keyframes bg-move と .bg-anim を参照してください */
50. 下方向に消えるマスク
長いコンテンツの下の方を、グラデーションでフェードアウトさせて隠します。
.mask-bottom { -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%); }以上、コピペで使えるCSSパーツ50選でした。ぜひブックマークして、日々のコーディングに役立ててください！