気持ちぃ〜角丸 Squircle

Transcript

1. ryu 気持ちぃ〜角丸 Squircle 2026.10.12 フロントエンドカンファレンス関西2026 https://2026.frontend-conf.osaka.jp/
2. 気持ちぃ〜角丸 Squircle ryu - 26新卒 / プロダクトエンジニア - タイミー / 介護領域の開発 - 学生時代 - タイミー / 長期アルバイト採用サポートプランの開発 - PR TIMES - 01 Lab
3. 気持ちぃ〜角丸 Squircle 今回話すこと - Squirclesって何？普通の角丸と何が違う？ - なぜ気持ちよく見える？ - 実際にCSSでどう作る？
4. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？
5. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？
6. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？
7. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？
8. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？
9. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？
10. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？ 🙋
11. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？ 🙋
12. 気持ちぃ〜角丸 Squircle どっちが気持ちいい？ 普通の角丸 Squircle
13. 気持ちぃ〜角丸 Squircle - Squircleとは https://en.wikipedia.org/wiki/Squircle - Square + Circle https://en.wikipedia.org/wiki/Squircle - 四角と丸の間の形
14. 気持ちぃ〜角丸 Squircle - Squircleとは - Square + Circle - 四角と丸の間の形
15. 気持ちぃ〜角丸 Squircle iOSアプリの角 iPhoneの角 https://www.figma.com/community/file/1645923469870515372/app-icon-templateios-ipados-and-watchos-27 https://www.facebook.com/stc.initiative.5/videos/fun-factapple-uses-a-consistentcorner-radius-of-about-38-pixels-across-all-its-/1321896845580915/ （厳密に言うとAppleの角≠CSSで再現できるsquircle）
16. 気持ちぃ〜角丸 Squircle なぜ気持ちいい？
17. 気持ちぃ〜角丸 Squircle なぜ気持ちいい？ - 直線から曲線への曲率の変化が滑らか
 - 曲率＝どれくらい曲がっているか
18. 気持ちぃ〜角丸 Squircle なぜ気持ちいい？ - 普通の角丸
 - 直線 → 一定の曲がり - Squircles - 直線に近いところ→徐々に強い曲がり
19. 気持ちぃ〜角丸 Squircle なぜ気持ちいい？
20. 気持ちぃ〜角丸 Squircles なぜ気持ちいい？
21. 気持ちぃ〜角丸 Squircle どうやって実装する？
22. 気持ちぃ〜角丸 Squircle どうやって実装する？ - 昔は、
 - SVGのpathで描く - clip-pathで切り抜く - 今は、 - corner-shapeで簡単にできる！
23. 気持ちぃ〜角丸 Squircle どうやって実装する？ .card { }
24. 気持ちぃ〜角丸 Squircle どうやって実装する？ .card { border-radius: 50px;
 }
25. 気持ちぃ〜角丸 Squircle どうやって実装する？ .card { border-radius: 50px; corner-shape: squircle;
 }
26. 気持ちぃ〜角丸 Squircle どうやって実装する？ .card { border-radius: 100px; corner-shape: squircle;
 }
27. 気持ちぃ〜角丸 Squircle どうやって実装する？ .card { border-radius: 100px; corner-shape: notch;
 }
28. 気持ちぃ〜角丸 Squircle どうやって実装する？ square squircle round bevel scoop notch
29. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: notch;
30. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: notch;
31. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(-infinity);
32. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(-4);
33. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(-3);
34. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(-2);
35. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(-1);
36. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(-0.5);
37. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(-0.2);
38. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(0);
39. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(0.2);
40. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(1);
41. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(1);
42. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(2);
43. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(3);
44. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(4);
45. 気持ちぃ〜角丸 Squircle どうやって実装する？ corner-shape: superellipse(5);
46. 気持ちぃ〜角丸 Squircle どうやって実装する？ square squircle superellipse(infinity) round bevel scoop notch superellipse(-infinity)
47. 気持ちぃ〜角丸 Squircle どうやって実装する？ https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/corner-shape
48. 気持ちぃ〜角丸 Squircle どうやって実装する？
49. 気持ちぃ〜角丸 Squircle どうやって実装する？ .card { border-radius: 50px; corner-shape: squircle;
 }
50. 気持ちぃ〜角丸 Squircle どうやって実装する？ .card { border-radius: 50px; corner-shape: squircle;
 } いつも通りの角丸に戻るだけで問題はなし
 ぜひ使ってみよう！
 必要に応じて@supportsでborder-radiusの値を分ける
51. ryu Playglound https://ryu.engineer/corner-shape
52. ryu 気持ちぃ〜角丸 Squircle 2026.10.12 フロントエンドカンファレンス関西2026 https://2026.frontend-conf.osaka.jp/