</>CodingLSコーディングライフスタイル

CSSで三角形を作る方法を紹介します。 ちょっとしたアイコン等、何かと使用する機会は多いと思います。

CSSで丸（円）を作る方法を10パターン紹介。border-radius: 50%の基本からclip-path、画像の円形トリミング、テキスト入り円、半円・四分円、バッジ、conic-gradientプログレスバー、パルスアニメーションまで表示サンプル付きで解説。

CSSでページのスクロールを禁止する方法を網羅的に解説。overflow: hiddenの基本から、overflow-x/yの軸別制御、overscroll-behaviorによるスクロール連鎖防止、CSS :has()とdialog要素を使ったモーダル対応、iOS Safariでの確実な背景固定、スクロールバーのガタつき防止まで。

CSSのfilter: drop-shadow()で透過PNG・SVGに画像の形状に沿った影をつける方法を解説。box-shadowとの違い、パラメータ詳細、複数の影、ホバーアニメーション、clip-path対応、パフォーマンス最適化、実務パターン集まで網羅。