{"id":19284,"date":"2026-07-28T13:57:31","date_gmt":"2026-07-28T13:57:31","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=19284"},"modified":"2026-07-28T14:59:52","modified_gmt":"2026-07-28T14:59:52","slug":"css-wave-animation","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/css-wave-animation\/","title":{"rendered":"CSS\u3067\u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308b\u65b9\u6cd5\uff5c\u6ce2\u5f62\u533a\u5207\u308a\u30fbSVG\u30a6\u30a7\u30fc\u30d6"},"content":{"rendered":"

<\/p>\n

\n
\n
\"\"\u751f\u5f92<\/span><\/div>\n
\n
\n

\u30d2\u30fc\u30ed\u30fc\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u4e0b\u306b\u6ce2\u5f62\u306e\u533a\u5207\u308a\u3092\u5165\u308c\u305f\u3044\u3093\u3067\u3059\u304c\u3001\u753b\u50cf\u3067\u7528\u610f\u3059\u308b\u3057\u304b\u306a\u3044\u3067\u3059\u304b\uff1f<\/strong><\/p>\n

<\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\"\"\u30da\u30f3\u535a\u58eb<\/span><\/div>\n
\n
\n

CSS\u3068SVG\u3067\u4f5c\u308c\u308b\u3088\uff01clip-path\u3084SVG\u30d1\u30b9\u3092\u4f7f\u3048\u3070\u3001\u62e1\u5927\u306b\u3082\u5f37\u3044\u6ce2\u5f62\u304c\u4f5c\u308c\u308b\u3002\u52d5\u304b\u3059\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3082\u4eca\u65e5\u306f\u5168\u90e8\u898b\u305b\u308b\u306d\u3002<\/strong><\/p>\n

<\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n

Web\u30b5\u30a4\u30c8\u306e\u30d2\u30fc\u30ed\u30fc\u30bb\u30af\u30b7\u30e7\u30f3\u4e0b\u90e8\u306b\u6ce2\u5f62\u306e\u533a\u5207\u308a\u3092\u5165\u308c\u305f\u3044\u3001\u6c34\u9762\u306e\u3088\u3046\u306b\u3086\u3089\u3086\u3089\u52d5\u304f\u80cc\u666f\u3092\u4f5c\u308a\u305f\u3044\u2014\u2014\u305d\u3093\u306a\u8868\u73fe\u3092CSS\u3060\u3051\u3067\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002Illustrator\u3084\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30c4\u30fc\u30eb\u306f\u4e0d\u8981\u3067\u3059\u3002<\/p>\n

\u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u30a2\u30d7\u30ed\u30fc\u30c1\u304c\u8907\u6570\u3042\u308a\u3001\u305d\u308c\u305e\u308c\u5f97\u610f\u306a\u8868\u73fe\u304c\u7570\u306a\u308a\u307e\u3059\u3002border-radius\u3092\u5909\u5f62\u3055\u305b\u308b\u65b9\u6cd5\u30fbSVG\u30d1\u30b9\u3092\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u305b\u308b\u65b9\u6cd5\u30fbclip-path\u3067\u6ce2\u5f62\u3092\u5207\u308a\u629c\u304f\u65b9\u6cd5<\/span><\/strong>\u3092\u4f7f\u3044\u5206\u3051\u308b\u3053\u3068\u3067\u3001\u3042\u3089\u3086\u308b\u5834\u9762\u306b\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002<\/p>\n

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u305d\u308c\u305e\u308c\u306e\u624b\u6cd5\u3092\u57fa\u672c\u304b\u3089\u5fdc\u7528\u307e\u3067\u4e01\u5be7\u306b\u89e3\u8aac\u3057\u3001\u30b3\u30d4\u30da\u3057\u3066\u5373\u4f7f\u3048\u308b\u30b3\u30fc\u30c9\u3092\u8c4a\u5bcc\u306b\u63d0\u4f9b\u3057\u307e\u3059\u3002\u5931\u6557\u3057\u3084\u3059\u3044\u30dd\u30a4\u30f3\u30c8\u3068\u305d\u306e\u5bfe\u51e6\u6cd5\u3082\u5408\u308f\u305b\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n

    \n
  • border-radius\u3092@keyframes\u3067\u5909\u5f62\u3055\u305b\u308b\u6c34\u9762\u98a8\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u308a\u65b9<\/li>\n
  • SVG\u30d1\u30b9\u306e\u6ce2\u3092transform:translateX\u3067\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u305b\u308b\u624b\u6cd5<\/li>\n
  • clip-path\u3092\u4f7f\u3063\u305f\u6ce2\u5f62\u30bb\u30af\u30b7\u30e7\u30f3\u533a\u5207\u308a\u306e\u5b9f\u88c5<\/li>\n
  • \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3068\u6ce2\u3092\u91cd\u306d\u5408\u308f\u305b\u305f\u30ea\u30c3\u30c1\u306a\u80cc\u666f\u8868\u73fe<\/li>\n
  • \u30d2\u30fc\u30ed\u30fc\u30bb\u30af\u30b7\u30e7\u30f3\u4e0b\u90e8\u306e\u6ce2\u4ed5\u5207\u308a\u306e\u5b9f\u88c5\u624b\u9806<\/li>\n
  • \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u640d\u306a\u308f\u306a\u3044\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8<\/li>\n<\/ul>\n
    \n

    \u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e3\u3064\u306e\u30a2\u30d7\u30ed\u30fc\u30c1<\/h2>\n
    \"\u6ce2\u306e\u4f5c\u308a\u65b93\u7a2e\"<\/figure>\n

    CSS\u3067\u6ce2\u3092\u8868\u73fe\u3059\u308b\u4e3b\u8981\u306a\u624b\u6cd5\u306f3\u3064\u3042\u308a\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u306e\u7279\u5fb4\u3092\u7406\u89e3\u3057\u3066\u304b\u3089\u5b9f\u88c5\u306b\u9032\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n

    \n\n\n\n\n\n\n\n
    \u624b\u6cd5<\/th>\n\u30e1\u30ea\u30c3\u30c8<\/th>\n\u30c7\u30e1\u30ea\u30c3\u30c8<\/th>\n\u5411\u3044\u3066\u3044\u308b\u7528\u9014<\/th>\n<\/tr>\n<\/thead>\n
    border-radius\u5909\u5f62<\/td>\nHTML\u306e\u307f\u3067\u5b8c\u7d50\u3001\u8efd\u91cf<\/td>\n\u30ea\u30a2\u30eb\u306a\u6ce2\u5f62\u306f\u96e3\u3057\u3044<\/td>\n\u6c34\u9762\u30fb\u3075\u308f\u3075\u308f\u3057\u305f\u80cc\u666f<\/td>\n<\/tr>\n
    SVG\u30d1\u30b9\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb<\/td>\n\u7cbe\u5bc6\u306a\u6ce2\u5f62\u3001\u6ed1\u3089\u304b<\/td>\nSVG\u306e\u30d1\u30b9\u30c7\u30fc\u30bf\u304c\u5fc5\u8981<\/td>\n\u30bb\u30af\u30b7\u30e7\u30f3\u533a\u5207\u308a\u3001\u30d2\u30fc\u30ed\u30fc\u4e0b\u90e8<\/td>\n<\/tr>\n
    clip-path<\/td>\n\u8981\u7d20\u3092\u6ce2\u5f62\u306b\u5207\u308a\u629c\u3051\u308b<\/td>\n\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u306b\u6ce8\u610f<\/td>\n\u30bb\u30af\u30b7\u30e7\u30f3\u80cc\u666f\u306e\u5207\u308a\u629c\u304d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n

    \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u89b3\u70b9\u3067\u306f\u3001\u3044\u305a\u308c\u306e\u624b\u6cd5\u3082transform\u3068opacity\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3046\u3053\u3068\u3067GPU\u30a2\u30af\u30bb\u30e9\u30ec\u30fc\u30b7\u30e7\u30f3\u304c\u50cd\u304d<\/span><\/strong>\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3078\u306e\u8ca0\u8377\u3092\u6700\u5c0f\u5316\u3067\u304d\u307e\u3059\u3002width\u3084height\u3092@keyframes\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u3068\u518d\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u767a\u751f\u3059\u308b\u306e\u3067\u907f\u3051\u307e\u3057\u3087\u3046\u3002<\/p>\n

    \n

    border-radius\u3092\u4f7f\u3063\u305f\u6c34\u9762\u98a8\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h2>\n

    \u6700\u3082\u30b7\u30f3\u30d7\u30eb\u306a\u6ce2\u8868\u73fe\u304c\u3001border-radius\u3092@keyframes\u3067\u5909\u5316\u3055\u305b\u308b\u624b\u6cd5\u3067\u3059\u3002\u5186\u3084\u6955\u5186\u306e\u5f62\u72b6\u3092\u3086\u3063\u304f\u308a\u5909\u5f62\u3055\u305b\u308b\u3053\u3068\u3067\u3001\u6c34\u9762\u306e\u3088\u3046\u306a\u3086\u3089\u304e\u3092\u6f14\u51fa\u3067\u304d\u307e\u3059\u3002<\/p>\n

    \u57fa\u672c\uff1a\u4e38\u3044\u8981\u7d20\u3092\u3086\u3089\u3086\u3089\u5909\u5f62\u3055\u305b\u308b<\/h3>\n

    \u307e\u305aHTML\u69cb\u9020\u3067\u3059\u3002div\u4e00\u3064\u3067\u5b8c\u7d50\u3057\u307e\u3059\u3002<\/p>\n

    \n
    <div class=\"wave-blob\"><\/div><\/code><\/pre>\n<\/div>\n
    CSS\u3067\u3059\u3002border-radius\u306b\u306f8\u3064\u306e\u5024\u3092\u6307\u5b9a\u3067\u304d\u3001\u3053\u308c\u3092@keyframes\u3067\u5909\u5316\u3055\u305b\u307e\u3059\u3002<\/p>\n
    \n
    .wave-blob {\n  width: 300px;\n  height: 300px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%;\n  animation: morphWave 6s ease-in-out infinite;\n}\n\n@keyframes morphWave {\n  0% {\n    border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%;\n  }\n  25% {\n    border-radius: 30% 60% 70% 40% \/ 50% 60% 30% 60%;\n  }\n  50% {\n    border-radius: 50% 60% 30% 60% \/ 40% 50% 60% 50%;\n  }\n  75% {\n    border-radius: 40% 60% 50% 40% \/ 70% 30% 50% 40%;\n  }\n  100% {\n    border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%;\n  }\n}<\/code><\/pre>\n<\/div>\n
    border-radius\u306e8\u5024\u6307\u5b9a\u306f\u300c\u6c34\u5e73\u65b9\u5411\u306e4\u89d2 \/ \u5782\u76f4\u65b9\u5411\u306e4\u89d2\u300d\u3068\u3044\u3046\u610f\u5473\u3067\u3059\u3002\u30b9\u30e9\u30c3\u30b7\u30e5\u524d\u5f8c\u3067\u6c34\u5e73\u30fb\u5782\u76f4\u306e\u534a\u5f84\u3092\u72ec\u7acb\u3057\u3066\u5236\u5fa1\u3067\u304d\u308b\u305f\u3081\u3001\u8907\u96d1\u306a\u6709\u6a5f\u7684\u5f62\u72b6\u304c\u4f5c\u308c\u307e\u3059\u3002<\/p>\n
    \u5fdc\u7528\uff1a\u8907\u6570\u306eblob\u3092\u91cd\u306d\u3066\u6c34\u9762\u3089\u3057\u3055\u3092\u51fa\u3059<\/h3>\n
    \u8907\u6570\u306e\u534a\u900f\u660e\u306a\u8981\u7d20\u3092\u91cd\u306d\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u4f4d\u76f8\u3092\u305a\u3089\u3059\u3053\u3068\u3067\u5965\u884c\u304d\u306e\u3042\u308b\u6c34\u9762\u8868\u73fe\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \n
    <div class=\"water-surface\">\n  <div class=\"blob blob-1\"><\/div>\n  <div class=\"blob blob-2\"><\/div>\n  <div class=\"blob blob-3\"><\/div>\n<\/div><\/code><\/pre>\n<\/div>\n
    \n
    .water-surface {\n  position: relative;\n  width: 100%;\n  height: 400px;\n  overflow: hidden;\n  background: #0a1628;\n}\n\n.blob {\n  position: absolute;\n  border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%;\n  animation: morphWave 6s ease-in-out infinite;\n  mix-blend-mode: screen;\n}\n\n.blob-1 {\n  width: 600px;\n  height: 600px;\n  top: -150px;\n  left: -100px;\n  background: rgba(102, 126, 234, 0.4);\n  animation-duration: 7s;\n}\n\n.blob-2 {\n  width: 500px;\n  height: 500px;\n  top: -100px;\n  left: 30%;\n  background: rgba(118, 75, 162, 0.35);\n  animation-duration: 9s;\n  animation-delay: -2s;\n}\n\n.blob-3 {\n  width: 450px;\n  height: 450px;\n  top: -80px;\n  right: -50px;\n  background: rgba(52, 152, 219, 0.3);\n  animation-duration: 11s;\n  animation-delay: -4s;\n}\n\n@keyframes morphWave {\n  0%, 100% {\n    border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%;\n    transform: translate(0, 0) rotate(0deg);\n  }\n  25% {\n    border-radius: 30% 60% 70% 40% \/ 50% 60% 30% 60%;\n    transform: translate(10px, -20px) rotate(5deg);\n  }\n  50% {\n    border-radius: 50% 60% 30% 60% \/ 40% 50% 60% 50%;\n    transform: translate(-5px, 10px) rotate(-3deg);\n  }\n  75% {\n    border-radius: 40% 60% 50% 40% \/ 70% 30% 50% 40%;\n    transform: translate(15px, 5px) rotate(7deg);\n  }\n}<\/code><\/pre>\n<\/div>\n
    mix-blend-mode: screen<\/code>\u3092\u4f7f\u3046\u3068\u3001\u91cd\u306a\u3063\u305f\u90e8\u5206\u304c\u660e\u308b\u304f\u306a\u308a\u5149\u304c\u53cd\u5c04\u3057\u3066\u3044\u308b\u3088\u3046\u306a\u8cea\u611f\u306b\u306a\u308a\u307e\u3059\u3002\u80cc\u666f\u304c\u6697\u3044\u5834\u5408\u306b\u7279\u306b\u52b9\u679c\u7684\u3067\u3059\u3002<\/p>\n
    \u6c34\u9762\u306e\u6ce2\u7d0b\u3092\u8ffd\u52a0\u3059\u308b<\/h3>\n
    \u30af\u30ea\u30c3\u30af\u3084\u30db\u30d0\u30fc\u3067\u5e83\u304c\u308b\u6ce2\u7d0b\u30a8\u30d5\u30a7\u30af\u30c8\u3082\u540c\u3058\u624b\u6cd5\u3067\u4f5c\u308c\u307e\u3059\u3002<\/p>\n
    \n
    <div class=\"ripple-container\">\n  <div class=\"ripple\"><\/div>\n  <div class=\"ripple\" style=\"animation-delay: 0.5s\"><\/div>\n  <div class=\"ripple\" style=\"animation-delay: 1s\"><\/div>\n<\/div><\/code><\/pre>\n<\/div>\n
    \n
    .ripple-container {\n  position: relative;\n  width: 200px;\n  height: 200px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ripple {\n  position: absolute;\n  width: 100px;\n  height: 100px;\n  border: 2px solid rgba(102, 126, 234, 0.8);\n  border-radius: 50%;\n  animation: rippleOut 2s ease-out infinite;\n}\n\n@keyframes rippleOut {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}<\/code><\/pre>\n<\/div>\n
    \n
    SVG\u30d1\u30b9\u3067\u4f5c\u308b\u7cbe\u5bc6\u306a\u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h2>\n
    \"SVG\u6ce2\u306e\u624b\u9806\"<\/figure>\n
    \u3088\u308a\u7cbe\u5bc6\u3067\u30ea\u30a2\u30eb\u306a\u6ce2\u5f62\u3092\u4f5c\u308b\u5834\u5408\u3001SVG\u306epath\u3092\u4f7f\u3044\u307e\u3059\u3002SVG\u306e\u6ce2\u3092transform:translateX\u3067\u6a2a\u65b9\u5411\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u305b\u308b\u3053\u3068\u3067\u3001\u7121\u9650\u306b\u7d9a\u304f\u6ce2\u306e\u52d5\u304d\u3092\u8868\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n
    \u57fa\u672c\u69cb\u9020\uff1aSVG\u6ce2\u306e\u4ed5\u7d44\u307f\u3092\u7406\u89e3\u3059\u308b<\/h3>\n
    \u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u6ce2\u306e\u30b3\u30c4\u306f\u3001SVG\u306e\u5e45\u3092200%\u306b\u3057\u3066\u6ce2\u5f62\u30922\u3064\u4e26\u3079\u3001\u5de6\u306b100%\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u5143\u306e\u4f4d\u7f6e\u306b\u623b\u3059<\/span><\/strong>\u3053\u3068\u3067\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u30eb\u30fc\u30d7\u3092\u4f5c\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n
    \n
    <div class=\"wave-wrapper\">\n  <svg class=\"wave-svg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n       viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\">\n    <defs>\n      <path id=\"gentle-wave\"\n        d=\"M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18\n           v44h-352z\"\/>\n    <\/defs>\n    <g class=\"wave-parallax\">\n      <use href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\"\/>\n      <use href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\"\/>\n      <use href=\"#gentle-wave\" x=\"48\" y=\"5\" fill=\"rgba(255,255,255,0.3)\"\/>\n      <use href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"rgba(255,255,255,1)\"\/>\n    <\/g>\n  <\/svg>\n<\/div><\/code><\/pre>\n<\/div>\n
    \n
    .wave-wrapper {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  line-height: 0;\n}\n\n.wave-svg {\n  display: block;\n  width: calc(100% + 1.3px);\n  height: 80px;\n}\n\n.wave-parallax > use {\n  animation: waveMove 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;\n}\n\n.wave-parallax > use:nth-child(1) {\n  animation-delay: -2s;\n  animation-duration: 7s;\n}\n\n.wave-parallax > use:nth-child(2) {\n  animation-delay: -3s;\n  animation-duration: 10s;\n}\n\n.wave-parallax > use:nth-child(3) {\n  animation-delay: -4s;\n  animation-duration: 13s;\n}\n\n.wave-parallax > use:nth-child(4) {\n  animation-delay: -5s;\n  animation-duration: 20s;\n}\n\n@keyframes waveMove {\n  0% {\n    transform: translate3d(-90px, 0, 0);\n  }\n  100% {\n    transform: translate3d(85px, 0, 0);\n  }\n}<\/code><\/pre>\n<\/div>\n
    4\u3064\u306e<use><\/code>\u8981\u7d20\u306b\u7570\u306a\u308bopacity\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u901f\u5ea6\u3092\u4e0e\u3048\u308b\u3053\u3068\u3067\u3001\u6ce2\u304c\u91cd\u306a\u308a\u5408\u3046\u7acb\u4f53\u611f\u304c\u751f\u307e\u308c\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u306ey\u5c5e\u6027\u306e\u5024\u3092\u5909\u3048\u3066\u6ce2\u306e\u9ad8\u3055\u3092\u305a\u3089\u3059\u306e\u304c\u30dd\u30a4\u30f3\u30c8\u3067\u3059\u3002<\/p>\n
    \u6ce2\u5f62\u306e\u30d1\u30b9\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b<\/h3>\n
    \u6ce2\u306e\u5f62\u72b6\u306fpath<\/code>\u306ed<\/code>\u5c5e\u6027\u3067\u6c7a\u307e\u308a\u307e\u3059\u3002\u3088\u304f\u4f7f\u3046\u6ce2\u5f62\u306e\u30d1\u30bf\u30fc\u30f3\u3092\u3044\u304f\u3064\u304b\u793a\u3057\u307e\u3059\u3002<\/p>\n
    \n
    <!-- \u306a\u3060\u3089\u304b\u306a\u6ce2\uff08\u30b5\u30a4\u30f3\u30ab\u30fc\u30d6\u306b\u8fd1\u3044\uff09 -->\n<path d=\"M0,32 C30,50 70,10 100,32 C130,54 170,14 200,32 L200,64 L0,64 Z\"\/>\n\n<!-- \u6025\u306a\u6ce2\uff08\u6ce2\u304c\u9ad8\u3044\uff09 -->\n<path d=\"M0,40 C20,60 40,20 60,40 C80,60 100,20 120,40\n         C140,60 160,20 180,40 C190,50 200,40 200,40\n         L200,64 L0,64 Z\"\/>\n\n<!-- \u975e\u5bfe\u79f0\u306a\u6ce2\uff08\u5de6\u53f3\u3067\u5f62\u304c\u9055\u3046\uff09 -->\n<path d=\"M0,20 C60,60 140,0 200,30 L200,64 L0,64 Z\"\/><\/code><\/pre>\n<\/div>\n
    \u30d2\u30fc\u30ed\u30fc\u30bb\u30af\u30b7\u30e7\u30f3\u4e0b\u90e8\u3078\u306e\u6ce2\u4ed5\u5207\u308a\u5b9f\u88c5<\/h3>\n
    \u5b9f\u969b\u306eWeb\u30b5\u30a4\u30c8\u3067\u6700\u3082\u591a\u3044\u7528\u9014\u304c\u3001\u30bb\u30af\u30b7\u30e7\u30f3\u540c\u58eb\u306e\u5883\u754c\u306b\u6ce2\u3092\u914d\u7f6e\u3059\u308b\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002\u5b8c\u5168\u306a\u5b9f\u88c5\u30b3\u30fc\u30c9\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n
    \n
    <!-- \u30d2\u30fc\u30ed\u30fc\u30bb\u30af\u30b7\u30e7\u30f3 -->\n<section class=\"hero\">\n  <div class=\"hero-content\">\n    <h1>\u30da\u30fc\u30b8\u30bf\u30a4\u30c8\u30eb<\/h1>\n    <p>\u30b5\u30d6\u30b3\u30d4\u30fc\u30c6\u30ad\u30b9\u30c8<\/p>\n  <\/div>\n\n  <!-- \u6ce2\u5f62\u306e\u4ed5\u5207\u308a -->\n  <div class=\"wave-divider\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n         viewBox=\"0 0 1440 100\" preserveAspectRatio=\"none\">\n      <path fill=\"#ffffff\"\n            d=\"M0,60 C240,100 480,20 720,60\n               C960,100 1200,20 1440,60 L1440,100 L0,100 Z\"\n            class=\"wave-path\"\/>\n    <\/svg>\n  <\/div>\n<\/section>\n\n<!-- \u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\uff08\u767d\u80cc\u666f\uff09 -->\n<section class=\"next-section\">\n  <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\n<\/section><\/code><\/pre>\n<\/div>\n
    \n
    .hero {\n  position: relative;\n  min-height: 100vh;\n  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  \/* \u4e0b\u90e8\u306b\u6ce2\u304c\u91cd\u306a\u308b\u30b9\u30da\u30fc\u30b9\u3092\u78ba\u4fdd *\/\n  padding-bottom: 100px;\n}\n\n.hero-content {\n  text-align: center;\n  z-index: 1;\n}\n\n.wave-divider {\n  position: absolute;\n  bottom: -1px; \/* \u9699\u9593\u304c\u3067\u304d\u306a\u3044\u3088\u30461px\u4e0b\u306b\u306f\u307f\u51fa\u3059 *\/\n  left: 0;\n  width: 100%;\n  overflow: hidden;\n  line-height: 0;\n}\n\n.wave-divider svg {\n  display: block;\n  width: 100%;\n  height: 100px;\n}\n\n\/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3042\u308a\u7248 *\/\n.wave-path {\n  animation: waveShift 8s ease-in-out infinite alternate;\n  transform-origin: center;\n}\n\n@keyframes waveShift {\n  0% {\n    d: path(\"M0,60 C240,100 480,20 720,60 C960,100 1200,20 1440,60 L1440,100 L0,100 Z\");\n  }\n  100% {\n    d: path(\"M0,40 C240,20 480,80 720,40 C960,20 1200,80 1440,40 L1440,100 L0,100 Z\");\n  }\n}\n\n.next-section {\n  background: #ffffff;\n  padding: 80px 20px;\n}<\/code><\/pre>\n<\/div>\n
    \u6ce8\u610f\u70b9\u3068\u3057\u3066\u3001d<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3092CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u5909\u5316\u3055\u305b\u308b\u624b\u6cd5\uff08morphing\uff09\u306fChrome\u30fbFirefox\u3067\u306f\u52d5\u4f5c\u3057\u307e\u3059\u304c\u3001Safari\u3067\u306f\u30b5\u30dd\u30fc\u30c8\u304c\u9650\u5b9a\u7684\u3067\u3059\u3002\u78ba\u5b9f\u306b\u52d5\u4f5c\u3055\u305b\u305f\u3044\u5834\u5408\u306ftranslateX\u306b\u3088\u308b\u30b9\u30af\u30ed\u30fc\u30eb\u624b\u6cd5\u3092\u9078\u3076\u3068\u5b89\u5168\u3067\u3059\u3002<\/p>\n
    \n
    clip-path\u3067\u4f5c\u308b\u6ce2\u5f62\u30bb\u30af\u30b7\u30e7\u30f3\u533a\u5207\u308a<\/h2>\n
    \"\u533a\u5207\u308a\u306e\u5165\u308c\u65b9\"<\/figure>\n
    clip-path\u3092\u4f7f\u3046\u3068\u3001\u77e9\u5f62\u306ediv\u3092\u6ce2\u5f62\u306b\u5207\u308a\u629c\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002SVG\u3092\u5225\u9014\u7528\u610f\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u3001CSS\u3060\u3051\u3067\u6ce2\u5f62\u30bb\u30af\u30b7\u30e7\u30f3\u304c\u4f5c\u308c\u307e\u3059\u3002<\/p>\n
    \u57fa\u672c\uff1aclip-path\u3067\u6ce2\u5f62\u306b\u5207\u308a\u629c\u304f<\/h3>\n
    \n
    <section class=\"hero-clip\">\n  <div class=\"hero-clip-content\">\n    <h1>\u30d2\u30fc\u30ed\u30fc\u30bb\u30af\u30b7\u30e7\u30f3<\/h1>\n  <\/div>\n<\/section>\n<section class=\"content-section\">\n  <p>\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3<\/p>\n<\/section><\/code><\/pre>\n<\/div>\n
    \n
    .hero-clip {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  \/* clip-path\u3067\u4e0b\u90e8\u3092\u6ce2\u5f62\u306b\u5207\u308a\u629c\u304f *\/\n  clip-path: polygon(\n    0 0,\n    100% 0,\n    100% 80%,\n    75% 90%,\n    50% 80%,\n    25% 90%,\n    0 80%\n  );\n  \/* clip-path\u3067\u5207\u308c\u305f\u90e8\u5206\u306e\u30b9\u30da\u30fc\u30b9\u3092\u78ba\u4fdd *\/\n  padding-bottom: 15%;\n}\n\n.hero-clip-content {\n  text-align: center;\n}\n\n.content-section {\n  background: #fff;\n  padding: 40px 20px;\n  margin-top: -10%;\n}<\/code><\/pre>\n<\/div>\n
    \u3088\u308a\u6ed1\u3089\u304b\u306a\u6ce2\u5f62\uff1aellipse\u95a2\u6570\u3092\u4f7f\u3046<\/h3>\n
    polygon\u306f\u6298\u308c\u7dda\u306b\u306a\u308b\u305f\u3081\u3001\u672c\u7269\u306e\u6ce2\u306b\u306f\u898b\u3048\u307e\u305b\u3093\u3002\u3088\u308a\u6ed1\u3089\u304b\u306a\u66f2\u7dda\u3092\u51fa\u3059\u306b\u306fpath()<\/code>\u95a2\u6570\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n
    \n
    \/* path()\u3092\u4f7f\u3063\u305f\u6ed1\u3089\u304b\u306a\u6ce2\u5f62 *\/\n.hero-smooth-wave {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  min-height: 500px;\n  padding-bottom: 120px;\n  clip-path: path(\n    \"M0,0 L1440,0 L1440,320\n     C1200,380 960,280 720,320\n     C480,360 240,260 0,320 Z\"\n  );\n  \/* path()\u306f\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5e45\u56fa\u5b9a\u306e\u305f\u3081\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u6642\u306b\u6ce8\u610f *\/\n}<\/code><\/pre>\n<\/div>\n
    path()<\/code>\u306f\u30d4\u30af\u30bb\u30eb\u5024\u3067\u6307\u5b9a\u3059\u308b\u305f\u3081\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u304c\u96e3\u3057\u3044\u3068\u3044\u3046\u5f31\u70b9\u304c\u3042\u308a\u307e\u3059\u3002\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u5f8c\u8ff0\u3059\u308bSVG\u3092position:absolute\u3067\u914d\u7f6e\u3059\u308b\u624b\u6cd5\u306e\u65b9\u304c\u5b9f\u7528\u7684\u3067\u3059\u3002<\/p>\n
    clip-path\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h3>\n
    clip-path\u3092@keyframes\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002\u305f\u3060\u3057\u9802\u70b9\u306e\u6570\u304c\u540c\u3058\u3067\u306a\u3044\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u88dc\u9593\u3055\u308c\u306a\u3044\u305f\u3081\u6ce8\u610f<\/span><\/strong>\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n
    \n
    .wave-clip-animated {\n  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n  height: 400px;\n  animation: clipWave 4s ease-in-out infinite alternate;\n}\n\n@keyframes clipWave {\n  0% {\n    clip-path: polygon(\n      0 0, 100% 0, 100% 75%,\n      75% 85%, 50% 75%,\n      25% 85%, 0 75%\n    );\n  }\n  100% {\n    clip-path: polygon(\n      0 0, 100% 0, 100% 85%,\n      75% 75%, 50% 85%,\n      25% 75%, 0 85%\n    );\n  }\n  \/* \u9802\u70b9\u6570(7\u70b9)\u304c\u540c\u3058\u306a\u306e\u3067\u88dc\u9593\u3055\u308c\u308b *\/\n}<\/code><\/pre>\n<\/div>\n
    \n
    \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3068\u6ce2\u306e\u91cd\u306d\u5408\u308f\u305b<\/h2>\n
    \u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3068\u3001\u5915\u713c\u3051\u306e\u6d77\u3084\u6df1\u6d77\u306e\u3088\u3046\u306a\u96f0\u56f2\u6c17\u304c\u51fa\u305b\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u8907\u6570\u306e\u534a\u900f\u660e\u6ce2\u3092\u91cd\u306d\u3066\u30ea\u30c3\u30c1\u306a\u80cc\u666f\u3092\u4f5c\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n
    \u6d77\u306e\u3088\u3046\u306a\u591a\u5c64\u6ce2\u80cc\u666f<\/h3>\n
    \n
    <div class=\"ocean-bg\">\n  <div class=\"ocean-wave wave-front\"><\/div>\n  <div class=\"ocean-wave wave-middle\"><\/div>\n  <div class=\"ocean-wave wave-back\"><\/div>\n  <div class=\"ocean-content\">\n    <h2>\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c6\u30f3\u30c4<\/h2>\n  <\/div>\n<\/div><\/code><\/pre>\n<\/div>\n
    \n
    .ocean-bg {\n  position: relative;\n  width: 100%;\n  height: 500px;\n  background: linear-gradient(\n    to bottom,\n    #001220 0%,\n    #003052 40%,\n    #005580 70%,\n    #0077b6 100%\n  );\n  overflow: hidden;\n}\n\n.ocean-wave {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 200%; \/* 2\u500d\u5e45\u3067\u30b7\u30fc\u30e0\u30ec\u30b9\u30eb\u30fc\u30d7 *\/\n  height: 200px;\n  background-repeat: repeat-x;\n}\n\n.wave-front {\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,20 600,60 C850,100 1050,20 1200,60 L1200,120 L0,120 Z' fill='rgba(0,119,182,0.6)'\/%3E%3C\/Svg%3E\");\n  background-size: 600px 200px;\n  animation: waveScroll 6s linear infinite;\n  bottom: 0;\n}\n\n.wave-middle {\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,80 C200,40 400,100 600,80 C800,60 1000,100 1200,80 L1200,120 L0,120 Z' fill='rgba(0,96,150,0.5)'\/%3E%3C\/Svg%3E\");\n  background-size: 800px 200px;\n  animation: waveScroll 10s linear infinite reverse;\n  bottom: 10px;\n}\n\n.wave-back {\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C300,80 600,10 900,40 C1050,55 1150,30 1200,40 L1200,120 L0,120 Z' fill='rgba(0,70,120,0.4)'\/%3E%3C\/Svg%3E\");\n  background-size: 1000px 200px;\n  animation: waveScroll 14s linear infinite;\n  bottom: 20px;\n}\n\n@keyframes waveScroll {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%); \/* \u5e45\u3092200%\u306b\u3057\u3066\u3044\u308b\u306e\u3067-50%\u30671\u30eb\u30fc\u30d7 *\/\n  }\n}\n\n.ocean-content {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #fff;\n}<\/code><\/pre>\n<\/div>\n
    \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u6ce2\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h3>\n
    \u6ce2\u306e\u8272\u81ea\u4f53\u3092\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002background-position<\/code>\u3092\u79fb\u52d5\u3055\u305b\u308b\u3053\u3068\u3067\u8272\u304c\u5909\u5316\u3057\u3066\u898b\u3048\u307e\u3059\u3002<\/p>\n
    \n
    .gradient-wave {\n  width: 100%;\n  height: 300px;\n  background: linear-gradient(\n    270deg,\n    #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff\n  );\n  background-size: 400% 400%;\n  animation: gradientShift 8s ease infinite;\n  clip-path: polygon(\n    0 20%, 10% 30%, 20% 20%, 30% 35%,\n    40% 20%, 50% 35%, 60% 20%, 70% 30%,\n    80% 20%, 90% 30%, 100% 20%, 100% 100%, 0 100%\n  );\n}\n\n@keyframes gradientShift {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}<\/code><\/pre>\n<\/div>\n
    \n
    \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306b\u914d\u616e\u3057\u305f\u5b9f\u88c5<\/h2>\n
    \"\u8efd\u91cf\u5316\u306e\u30b3\u30c4\"<\/figure>\n
    \u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u8996\u899a\u7684\u306b\u7f8e\u3057\u3044\u4e00\u65b9\u3001\u5b9f\u88c5\u3092\u8aa4\u308b\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u554f\u984c\u3092\u5f15\u304d\u8d77\u3053\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u30eb\u30fc\u30eb\u3092\u5b88\u308b\u3053\u3068\u3067\u3001\u30b9\u30e0\u30fc\u30ba\u306a60fps\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u7dad\u6301\u3067\u304d\u307e\u3059\u3002<\/p>\n
    will-change\u3068GPU\u30a2\u30af\u30bb\u30e9\u30ec\u30fc\u30b7\u30e7\u30f3<\/h3>\n
    \n
    \/* GPU\u30ec\u30a4\u30e4\u30fc\u306b\u6607\u683c\u3055\u305b\u3066\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u306e\u8ca0\u8377\u3092\u4e0b\u3052\u308b *\/\n.wave-element {\n  will-change: transform;\n  \/* will-change\u306f\u5fc5\u8981\u306a\u8981\u7d20\u3060\u3051\u306b\u9069\u7528\u3059\u308b\u3002\u5168\u8981\u7d20\u306b\u4f7f\u3046\u3068VRAM\u3092\u5727\u8feb\u3059\u308b *\/\n}\n\n\/* transform\u3068opacity\u306e\u307f\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5bfe\u8c61\u306b\u3059\u308b *\/\n\/* NG: width\u3084height\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u3068\u518d\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u767a\u751f *\/\n@keyframes badWave {\n  0% { height: 100px; } \/* \u518d\u30ec\u30a4\u30a2\u30a6\u30c8\u767a\u751f *\/\n  100% { height: 200px; }\n}\n\n\/* OK: transform\u3067\u4ee3\u66ff\u3059\u308b *\/\n@keyframes goodWave {\n  0% { transform: scaleY(0.5); } \/* GPU\u3067\u51e6\u7406 *\/\n  100% { transform: scaleY(1); }\n}<\/code><\/pre>\n<\/div>\n
    prefers-reduced-motion\u3078\u306e\u5bfe\u5fdc<\/h3>\n
    \u524d\u5ead\u969c\u5bb3\u306a\u3069\u3092\u6301\u3064\u30e6\u30fc\u30b6\u30fc\u306b\u914d\u616e\u3057\u3001\u52d5\u304d\u3092\u6e1b\u3089\u3059\u8a2d\u5b9a\u304cON\u306e\u5834\u5408\u306f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u505c\u6b62\u3055\u305b\u307e\u3059\u3002<\/p>\n
    \n
    \/* \u30c7\u30d5\u30a9\u30eb\u30c8\u306f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3042\u308a *\/\n.wave-element {\n  animation: morphWave 6s ease-in-out infinite;\n}\n\n\/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8efd\u6e1b\u8a2d\u5b9a\u304cON\u306e\u5834\u5408\u306f\u505c\u6b62 *\/\n@media (prefers-reduced-motion: reduce) {\n  .wave-element {\n    animation: none;\n  }\n  .wave-parallax > use {\n    animation: none;\n  }\n}\n\n\/* \u307e\u305f\u306f\u52d5\u304d\u3092\u6700\u5c0f\u9650\u306b\u6291\u3048\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u5dee\u3057\u66ff\u3048\u308b *\/\n@media (prefers-reduced-motion: reduce) {\n  .wave-element {\n    animation: fadeWave 3s ease-in-out infinite alternate;\n  }\n  @keyframes fadeWave {\n    0% { opacity: 0.7; }\n    100% { opacity: 1; }\n  }\n}<\/code><\/pre>\n<\/div>\n
    \u3088\u304f\u3042\u308b\u5931\u6557\u3068\u5bfe\u51e6\u6cd5<\/h3>\n
    \n\n\n\n\n\n\n\n\n\n
    \u554f\u984c<\/th>\n\u539f\u56e0<\/th>\n\u5bfe\u51e6\u6cd5<\/th>\n<\/tr>\n<\/thead>\n
    \u6ce2\u3068\u80cc\u666f\u306e\u9593\u306b\u9699\u9593\u304c\u898b\u3048\u308b<\/td>\nSVG\u306ebottom\u304c-1px\u3067\u306a\u3044<\/td>\nbottom: -1px<\/code>\u3092\u8a2d\u5b9a\u3059\u308b<\/td>\n<\/tr>\n
    \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u30ab\u30af\u3064\u304f<\/td>\ntransform\u4ee5\u5916\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5909\u5316\u3055\u305b\u3066\u3044\u308b<\/td>\ntransform\u3068opacity\u306e\u307f\u3092\u4f7f\u3046<\/td>\n<\/tr>\n
    \u30e2\u30d0\u30a4\u30eb\u3067\u6ce2\u304c\u5207\u308c\u308b<\/td>\nSVG\u306eviewBox\u8a2d\u5b9a\u304c\u56fa\u5b9a\u5024<\/td>\npreserveAspectRatio=”none”\u3092\u6307\u5b9a\u3059\u308b<\/td>\n<\/tr>\n
    clip-path\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u52d5\u304b\u306a\u3044<\/td>\nbefore\/after\u3067\u9802\u70b9\u6570\u304c\u7570\u306a\u308b<\/td>\nkeyframes\u306e\u9802\u70b9\u6570\u3092\u63c3\u3048\u308b<\/td>\n<\/tr>\n
    SVG\u6ce2\u304cIE\u3067\u52d5\u304b\u306a\u3044<\/td>\nIE\u975e\u5bfe\u5fdc\u306eCSS\u6a5f\u80fd\u3092\u4f7f\u7528<\/td>\n2025\u5e74\u73fe\u5728IE\u30b5\u30dd\u30fc\u30c8\u306f\u4e0d\u8981\u306a\u5834\u5408\u304c\u307b\u3068\u3093\u3069<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
    \n
    \n
    <\/p>\n
    \u307e\u3068\u3081<\/h2>\n
    \u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001SVG\u30d1\u30b9\u306e\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u30fbclip-path\u30fbborder-radius\u306e\u30e2\u30fc\u30d5\u30a3\u30f3\u30b0\u306a\u3069\u8907\u6570\u306e\u4f5c\u308a\u65b9\u304c\u3042\u308a\u307e\u3059\u3002\u30dd\u30a4\u30f3\u30c8\u306f\u2460\u533a\u5207\u308a\u88c5\u98fe\u306fSVG\u304c\u62e1\u5927\u306b\u5f37\u3044\u2461\u52d5\u304b\u3059\u3068\u304d\u306ftransform\u3067\u8efd\u304f\u2462\u91cd\u306d\u308b\u3068\u6c34\u9762\u3089\u3057\u3044\u5965\u884c\u304d\u304c\u51fa\u308b\u3001\u306e3\u70b9\u3002\u7528\u9014\u306b\u5408\u308f\u305b\u3066\u3001\u9759\u7684\u306a\u533a\u5207\u308a\u304b\u52d5\u304f\u6f14\u51fa\u304b\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n
    <\/p>\n
    \u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09<\/h2>\n
    CSS\u306e\u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306fSafari\u3067\u3082\u52d5\u304d\u307e\u3059\u304b\uff1f<\/h3>\n
    transform:translateX\u3092\u4f7f\u3063\u305fSVG\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u624b\u6cd5\u3068border-radius\u30e2\u30fc\u30d5\u30a3\u30f3\u30b0\u306fSafari\u3067\u3082\u554f\u984c\u306a\u304f\u52d5\u4f5c\u3057\u307e\u3059\u3002\u305f\u3060\u3057CSS\u306epath()\u30e2\u30fc\u30d5\u30a3\u30f3\u30b0\uff08d\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff09\u306fSafari\u306e\u30b5\u30dd\u30fc\u30c8\u304c\u9650\u5b9a\u7684\u306a\u305f\u3081\u3001\u30af\u30ed\u30b9\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u304c\u5fc5\u8981\u306a\u5834\u5408\u306fSVG\u306etranslatX\u3092\u4f7f\u3046\u624b\u6cd5\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n
    \u6ce2\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u60aa\u5316\u3057\u305f\u5834\u5408\u306f\u3069\u3046\u3059\u308c\u3070\u3088\u3044\u3067\u3059\u304b\uff1f<\/h3>\n
    \u307e\u305a\u30d6\u30e9\u30a6\u30b6\u306eDevTools\u3067Performance\u30d1\u30cd\u30eb\u3092\u78ba\u8a8d\u3057\u3001\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u3067\u51e6\u7406\u304c\u91cd\u304f\u306a\u3063\u3066\u3044\u308b\u304b\u7279\u5b9a\u3057\u307e\u3059\u3002\u5bfe\u7b56\u306f\u4e3b\u306b3\u3064\u3067\u3059\u3002\u2460\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092transform\u3068opacity\u306e\u307f\u306b\u9650\u5b9a\u3059\u308b\u3000\u2461will-change: transform\u3092\u554f\u984c\u306e\u8981\u7d20\u306b\u4ed8\u4e0e\u3057\u3066GPU\u30ec\u30a4\u30e4\u30fc\u306b\u6607\u683c\u3055\u305b\u308b\u3000\u2462\u6ce2\u306e\u30ec\u30a4\u30e4\u30fc\u6570\u3092\u6e1b\u3089\u3057\u3066\u63cf\u753b\u30b3\u30b9\u30c8\u3092\u4e0b\u3052\u308b\u3001\u3067\u3059\u3002<\/p>\n
    \u30bb\u30af\u30b7\u30e7\u30f3\u306e\u6ce2\u5f62\u533a\u5207\u308a\u3067SVG\u3068clip-path\u3069\u3061\u3089\u3092\u4f7f\u3046\u3079\u304d\u3067\u3059\u304b\uff1f<\/h3>\n
    \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u5bb9\u6613\u3055\u304b\u3089SVG\u3092\u63a8\u5968<\/strong>\u3057\u307e\u3059\u3002SVG\u306fviewBox\u3068preserveAspectRatio=”none”\u306e\u7d44\u307f\u5408\u308f\u305b\u3067\u81ea\u52d5\u7684\u306b\u6a2a\u5e45\u306b\u8ffd\u5f93\u3057\u307e\u3059\u3002clip-path\u306epath()\u306f\u30d4\u30af\u30bb\u30eb\u56fa\u5b9a\u306e\u305f\u3081\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u304c\u96e3\u3057\u304f\u3001polygon()\u306f\u76f4\u7dda\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u4e0d\u8981\u306a\u9759\u7684\u306a\u6ce2\u5f62\u306a\u3089clip-path\u306epolygon\u3067\u3082\u554f\u984c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n
    \u6ce2\u306e\u8272\u3092\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u80cc\u666f\u8272\u3068\u5408\u308f\u305b\u308b\u306b\u306f\u3069\u3046\u3057\u307e\u3059\u304b\uff1f<\/h3>\n
    SVG\u306efill\u5c5e\u6027\u307e\u305f\u306fCSS\u306efill\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u80cc\u666f\u8272\u3068\u540c\u3058\u5024\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u304c\u767d\uff08#ffffff\uff09\u306a\u3089fill=\"#ffffff\"<\/code>\u306b\u3057\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u304c\u753b\u50cf\u80cc\u666f\u306e\u5834\u5408\u306f\u3001\u6ce2\u306e\u8272\u306b\u534a\u900f\u660e\u3092\u4f7f\u3044fill=\"rgba(255,255,255,0.9)\"<\/code>\u306e\u3088\u3046\u306b\u8a2d\u5b9a\u3059\u308b\u3068\u81ea\u7136\u306b\u99b4\u67d3\u307f\u307e\u3059\u3002<\/p>\n
    \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3067\u6ce2\u304c\u5d29\u308c\u3066\u898b\u3048\u307e\u3059\u3002\u5bfe\u51e6\u6cd5\u306f\u3042\u308a\u307e\u3059\u304b\uff1f<\/h3>\n
    SVG\u6ce2\u304c\u5d29\u308c\u308b\u4e3b\u306a\u539f\u56e0\u306f2\u3064\u3067\u3059\u3002\u2460SVG\u306bpreserveAspectRatio=”none”\u3092\u6307\u5b9a\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u3001\u7e26\u6a2a\u6bd4\u304c\u56fa\u5b9a\u3055\u308c\u3066\u5d29\u308c\u307e\u3059\u3002\u2461width: calc(100% + 1.3px)<\/code>\u306e\u3088\u3046\u306a\u5fae\u8abf\u6574\u304c\u629c\u3051\u3066\u3044\u3066\u6a2a\u306b\u9699\u9593\u304c\u3067\u304d\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u307e\u305fline-height: 0<\/code>\u3092\u30e9\u30c3\u30d1\u30fc\u306b\u6307\u5b9a\u3057\u306a\u3044\u3068\u3001SVG\u306e\u4e0b\u306b\u8b0e\u306e\u9699\u9593\u304c\u751f\u3058\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e3\u70b9\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    <\/p>\n
    \n<\/p>\n
    \u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044\u95a2\u9023\u8a18\u4e8b<\/h2>\n