CINXE.COM

<!DOCTYPE html><html lang="ja" dir="ltr" data-capo=""><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> <title>HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選 - ICS MEDIA</title> <script src="https://cdn.ampproject.org/v0.js" async></script> <script src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async custom-element="amp-twitter"></script> <script src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js" async custom-element="amp-youtube"></script> <style>.ripple{overflow:hidden;position:relative}.ripple-effect{animation-name:ripple;background:#888;border-radius:50%;display:block;opacity:.2;pointer-events:none;position:absolute;transform:scale(0);-webkit-user-select:none;user-select:none;will-change:opacity,transform}.ripple[data-ripple=light] .ripple-effect{background:#fff!important}.ripple[data-ripple=dark] .ripple-effect{background:#000!important}@keyframes ripple{to{opacity:0;transform:scale(2)}}</style> <style>.btn{background-color:initial;border:1px solid #0000;border-radius:.25rem;color:#000;display:inline-block;font-size:1rem;font-weight:400;line-height:1.5;padding:.375rem .75rem;text-align:center;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-user-select:none;user-select:none}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn-group,.btn-group-vertical{display:inline-flex;position:relative;vertical-align:middle}button:focus{outline:5px auto var(--primary)}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child,.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.btn-primary{background-color:var(--primary);color:#fff!important}@media (any-hover:hover){@supports (background-color:color-mix(in srgb,#000,#000)){.btn-primary:hover{background-color:color-mix(in srgb,var(--primary),#000 20%)}}}.btn-secondary{background-color:var(--color-btn-secondary)}@media (prefers-color-scheme:dark){.btn-secondary{color:var(--color-text-p)}}@media (any-hover:hover){@supports (background-color:color-mix(in srgb,#000,#000)){.btn-secondary:hover{background-color:color-mix(in srgb,var(--color-btn-secondary),#888 20%)}}}.btn-group-vertical>.btn,.btn-group>.btn{flex:1 1 auto;position:relative}.btn-primary:not(:disabled,.disabled).active:focus,.btn-primary:not(:disabled,.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.text-center{text-align:center!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.badge{accent-color:red;border-radius:.25rem;display:inline-block;font-size:75%;font-weight:700;line-height:1;padding:.25em .4em;text-align:center;transition:color .2s,background-color .2s,border-color .2s;vertical-align:initial;white-space:nowrap}.badge-pill{border-radius:10rem;padding-left:.6em;padding-right:.6em}.badge-light{background-color:var(--color-btn-secondary);color:var(--color-text-p)}.badge-primary{background-color:var(--primary);color:#fff}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}}html{scroll-padding-top:32px;touch-action:manipulation}body{accent-color:var(--primary);line-break:strict;margin:0;overflow-wrap:anywhere;padding:0;word-break:normal}body ::selection{background-color:rgba(50,35,179,.251)}@media (prefers-color-scheme:dark){body ::selection{background-color:rgba(126,112,254,.251)}}img{vertical-align:bottom}a{color:inherit;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,.2)}@media (prefers-color-scheme:dark){a{-webkit-tap-highlight-color:rgba(255,255,255,.1)}}ul{padding:0}ul li{list-style:none}button{appearance:none;border:none;cursor:pointer}</style> <style>.language-glsl,.language-html,.language-js{background:var(--color-bg-code);color:#383a42;display:block;overflow-x:auto;padding:.5em}.hljs-comment,.hljs-quote{color:#666}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#813b32}.hljs-literal{color:#005c7d}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#2f612f}.hljs-built_in,.hljs-class .hljs-title{color:#733801}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#7f5901}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#3060bf}.hljs-strong{font-weight:700}.hljs-link{-webkit-text-decoration:underline;text-decoration:underline}</style> <style>@media (prefers-color-scheme:dark){.language-glsl,.language-html,.language-js{background:var(--color-bg-code);color:#abb2bf;display:block;overflow-x:auto;padding:.5em}.hljs-comment,.hljs-quote{color:#5c6370}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-strong{font-weight:700}.hljs-link{-webkit-text-decoration:underline;text-decoration:underline}}</style> <style>:root{--color-text-p:#404040;--color-text-p-secondary:#606060;--color-text-h:#202020;--color-bg:#eff2f5;--color-bg-code:#fff;--color-bg-footer:#f9f9f9;--color-bg-strong:#fff996;--color-bg-btn:#1976d2;--color-btn-secondary:#e0e0e0;--color-text-a:#1976d2;--color-text-a-hover:var(--primary);--color-text-a-visited:var(--color-text-a);--color-border:#0000001a;--primary:#3223b3;--font-sans:Helvetica Neue,Arial,Hiragino Sans,Hiragino Kaku Gothic ProN,BIZ UDPGothic,Meiryo,sans-serif;--font-mono:SFMono-Regular,Menlo,Consolas,Bitstream Vera Sans Mono,Courier New,Courier,BIZ UDGothic,Meiryo,monospace}@media (prefers-color-scheme:dark){:root{--color-text-p:#d0d0d0;--color-text-p-secondary:#a0a0a0;--color-text-h:#fff;--color-bg:#202020;--color-bg-code:#282c34;--color-bg-footer:#090909;--color-bg-strong:#7a0099;--color-text-a:#90caf9;--color-border:#d6d6d61a;--color-btn-secondary:#404040;--primary:#7e70fe}}@supports (-webkit-touch-callout:none) and (font:-apple-system-body){:root{font:-apple-system-body}}body{background-color:var(--color-bg);font-family:var(--font-sans)}iframe{border:none}.btn-primary{background-color:var(--primary);border-color:var(--primary);color:#fff}@media (min-width:768px){br.mobile{display:none}}@media (min-width:992px){br.tablet{display:none}}</style> <style>.ly-top-header[data-v-53af800e]{background-color:var(--color-bg);width:100%;z-index:1}@media print{.ly-top-header[data-v-53af800e]{position:static}}</style> <style>.mediaHeader[data-v-c016e82a]{border-bottom:1px solid var(--color-border);overflow:hidden;width:100%}.mediaHeader-row[data-v-c016e82a]{height:48px;margin:0 auto;max-width:960px;position:relative}@media (min-width:1200px){.mediaHeader-row[data-v-c016e82a]{max-width:1080px}}.mediaHeader-row h1[data-v-c016e82a]{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.mediaHeader-row-tool[data-v-c016e82a]{align-items:center;display:flex;position:absolute;right:0;top:50%;transform:translateY(-50%)}.mediaHeader-row-tool a[data-v-c016e82a]{border-radius:6px;box-sizing:initial;color:var(--color-text-p);display:block;height:32px;padding:3px;-webkit-text-decoration:none;text-decoration:none;transition:background .2s}@media (any-hover:hover){.mediaHeader-row-tool a[data-v-c016e82a]:hover{background:#8080804d}}.mediaHeader-row-tool a[data-v-c016e82a]:active{background:#80808080}.mediaHeader-row-tool svg[data-v-c016e82a]{background:#0000;fill:#333}@media (prefers-color-scheme:dark){.mediaHeader-row-tool svg[data-v-c016e82a]{fill:#ccc}}.mediaHeader-row-tool-item[data-v-c016e82a]{margin-left:.5rem}</style> <style>a[data-v-39193113]{align-items:center;background-image:url(/_nuxt/logo-website.Cz5k_taM.png);background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;height:48px;width:144px}span[data-v-39193113]{visibility:hidden}</style> <style>nav[data-v-5ddcd2fd]{width:100%}.category-list[data-v-5ddcd2fd]{display:flex;justify-content:space-between;margin:0 auto;max-width:960px}@media (min-width:1200px){.category-list[data-v-5ddcd2fd]{max-width:1080px}}@media (max-width:767.98px){.category-list[data-v-5ddcd2fd]{overflow:auto}.category-list[data-v-5ddcd2fd]::-webkit-scrollbar{height:2px}.category-list[data-v-5ddcd2fd]::-webkit-scrollbar-track{border-radius:0}.category-list[data-v-5ddcd2fd]::-webkit-scrollbar-thumb{background-color:#80808080}}.category-list-item[data-v-5ddcd2fd]{flex:1}.category-list-item a[data-v-5ddcd2fd]{color:var(--color-text-p);display:block;font-feature-settings:"palt";font-size:.75rem;font-weight:700;padding:.5rem 1rem;text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:color .2s,background .2s;-webkit-user-select:none;user-select:none;white-space:nowrap;word-break:keep-all}@media (any-hover:hover){.category-list-item a[data-v-5ddcd2fd]:hover{background:var(--primary);color:#fff}}.category-list-item a._current[data-v-5ddcd2fd],.category-list-item a[aria-current=page][data-v-5ddcd2fd]{background:var(--primary);color:#fff}@media (max-width:767.98px){.category-list-item a[data-v-5ddcd2fd]{font-size:.625rem;padding-left:.5rem;padding-right:.5rem}}</style> <style>.heroSpace[data-v-cb0dd5fc]{background:#000;height:256px;overflow:hidden;position:relative;width:100%}.heroSpace-title[data-v-cb0dd5fc]{align-items:center;color:#fff;display:flex;font-weight:400;height:100%;justify-content:center;position:absolute;text-align:center;width:100%}.heroSpace-title p[data-v-cb0dd5fc]{color:#fff;font-feature-settings:"palt";font-size:1rem;font-weight:400;letter-spacing:.01em;margin:0 auto 16px;max-width:1080px}@media (max-width:767.98px){.heroSpace-title p[data-v-cb0dd5fc]{padding-left:16px;padding-right:16px}}.heroSpace-title h1[data-v-cb0dd5fc]{font-feature-settings:"palt";font-size:2rem;font-weight:400;letter-spacing:2px;margin:0 auto;max-width:1080px}@media (max-width:767.98px){.heroSpace-title h1[data-v-cb0dd5fc]{font-size:1.5rem;padding-left:16px;padding-right:16px}}.heroSpace_padding[data-v-cb0dd5fc]{height:326px}@media (max-width:767.98px){.heroSpace_padding[data-v-cb0dd5fc]{height:212px}}.heroSpace_padding .heroSpace-title[data-v-cb0dd5fc]{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.heroSpace iframe[data-v-cb0dd5fc]{height:100%;position:absolute;width:100%}</style> <style>.wbr[data-v-92dd477a]{display:inline-block}</style> <style>.top_link[data-v-da421125]{margin-bottom:64px;text-align:center}.entry-column[data-v-da421125]{display:flex;margin:0 auto;max-width:960px;width:100%}</style> <style>.site_updater[data-v-63cb43db]{background:var(--color-bg-footer);bottom:0;margin-top:20px;position:sticky}.site_updater p[data-v-63cb43db]{margin:0;padding:10px 0;text-align:center}.site_info[data-v-63cb43db]{background:var(--color-bg-footer);color:var(--color-text-p);padding:32px 0}@media (max-width:1199.98px){.site_info[data-v-63cb43db]{padding:32px 16px}}.site_info-sections[data-v-63cb43db]{display:grid;gap:32px;grid-template-columns:repeat(3,1fr);margin:0 auto;max-width:960px;width:100%}@media (max-width:991.98px){.site_info-sections[data-v-63cb43db]{gap:16px}}@media (max-width:767.98px){.site_info-sections[data-v-63cb43db]{grid-template-columns:1fr}}@media (min-width:1200px){.site_info-sections[data-v-63cb43db]{max-width:1080px}}.site_info-sections_item h3[data-v-63cb43db]{color:var(--color-text-h);font-size:1.5rem;font-weight:400;line-height:1;margin-bottom:16px}.site_info-sections_item p[data-v-63cb43db]{color:var(--color-text-p-secondary);font-size:.75rem;line-height:1.75;text-align:justify}.site_info-sections_item ul[data-v-63cb43db]{list-style-position:inside;padding:0 0 0 1rem}.site_info-sections_item ul li[data-v-63cb43db]{font-size:.75rem;line-height:1.75;list-style:circle}.site_info-sections_item a[data-v-63cb43db]{color:var(--color-text-p-secondary);-webkit-text-decoration:none;text-decoration:none;transition:color .2s}@media (any-hover:hover){.site_info-sections_item a[data-v-63cb43db]:hover{color:var(--color-text-a-hover)}}</style> <style>.copyright[data-v-4b34f398]{font-size:1rem;margin-top:32px;text-align:center}@media (min-width:768px){.copyright br.mobile[data-v-4b34f398]{display:none}}.raw-pages[data-v-4b34f398]{display:flex;font-size:.875rem;gap:24px;justify-content:center;margin-bottom:16px;margin-top:16px}@media (max-width:767.98px){.raw-pages[data-v-4b34f398]{flex-direction:column;gap:4px}}.raw-pages a[data-v-4b34f398]{color:var(--color-text-p-secondary);transition:color .2s}@media (any-hover:hover){.raw-pages a[data-v-4b34f398]:hover{color:var(--color-text-a-hover)}}</style> <style>.eyecatch[data-v-921b35f7]{overflow:hidden;position:relative}.eyecatch .eyecatch-blur-container[data-v-921b35f7]{height:100%;overflow:hidden;position:absolute;width:100%}.eyecatch .eyecatch-blur[data-v-921b35f7]{background-size:cover;content:"";filter:brightness(1.25) blur(64px);height:150%;left:-25%;position:absolute;top:-25%;width:150%}@media (max-width:991.98px){.eyecatch .eyecatch-blur[data-v-921b35f7]{display:none}}.eyecatch-inner[data-v-921b35f7]{margin:0 auto;position:relative}@media (min-width:1200px){.eyecatch-inner[data-v-921b35f7]{max-width:1080px}}@media (min-width:992px) and (max-width:1199.98px){.eyecatch-inner[data-v-921b35f7]{max-width:960px}}.eyecatch-inner-img[data-v-921b35f7]{view-transition-name:var(--0e97d286);aspect-ratio:1280/512;contain:paint;height:auto;object-fit:cover;width:100%}@media (max-width:767.98px){.eyecatch-inner-img[data-v-921b35f7]{aspect-ratio:1280/720}}</style> <style>@media (min-width:992px){.entry[data-v-49d92408]{display:flex;flex-direction:row;gap:32px;margin:0 auto}}.entry-article[data-v-49d92408]{margin:0 auto;max-width:720px}@media (min-width:992px) and (max-width:1199.98px){.entry-article[data-v-49d92408]{width:640px}}.entry-sidebar[data-v-49d92408]{flex:1}@media (max-width:991.98px){.entry-sidebar[data-v-49d92408]{display:none}}</style> <style>@charset "UTF-8";.article-date{color:var(--color-text-p-secondary);font-size:.8rem;margin:1rem 0;text-align:center}@media (max-width:767.98px){.article-date{padding:0 1rem}}.article-date a{color:currentcolor;-webkit-text-decoration:none;text-decoration:none;transition:color .2s}@media (any-hover:hover){.article-date a:hover{color:var(--color-text-a-hover)}}.article-date .article-date-slash{margin-left:.25rem;margin-right:.25rem}.article-tag{display:flex;flex-wrap:wrap;gap:8px 4px;justify-content:center;list-style:none;padding:0}.article-tag li{display:inline-block}.article-tag a{border:1px solid var(--color-text-p);border-radius:6px;color:var(--color-text-p);font-size:.75rem;padding:.2em .5em;-webkit-text-decoration:none;text-decoration:none;transition:color .2s,border .2s}@media (any-hover:hover){.article-tag a:hover{border:1px solid var(--color-text-a-hover);color:var(--color-text-a-hover);-webkit-text-decoration:none;text-decoration:none}}.article{color:var(--color-text-p);font-size:1rem;line-break:strict;line-height:200%;overflow-wrap:anywhere;word-break:normal}.article h3{color:var(--color-text-h);font-family:var(--font-sans);font-feature-settings:"palt";font-size:2rem;font-weight:400;letter-spacing:.025em;line-height:1.25;margin-bottom:.5em;margin-top:3em}@media (max-width:767.98px){.article h3{font-size:1.5rem}}.article h3:after{background-color:var(--color-border);content:"";display:block;height:1px;margin-top:.25rem}.article h4,.article h5{color:var(--color-text-h);font-family:var(--font-sans);font-feature-settings:"palt";font-weight:400;letter-spacing:.025em;margin-bottom:1em;margin-top:2em}.article h4{font-size:1.5rem}.article h5{font-size:1.25rem}.article h1,.article h6{background:red;color:#000}.article h1:before,.article h6:before{content:"(この見出しレベルはサポートされてません)"}.article p{text-align:left;word-break:normal}.article p small{color:var(--color-text-p-secondary);font-size:.75em}.article p>a>img,.article p>img{height:auto;max-width:100%}@media (max-width:767.98px){.article p>a>img,.article p>img{margin-left:-1rem;margin-right:-1rem;max-width:none;width:100vw}.article p amp-youtube{margin-left:-1rem;margin-right:-1rem;max-width:100vw}}.article strong{background:linear-gradient(#0000 61%,var(--color-bg-strong) 0,var(--color-bg-strong) 0);font-weight:700}.article code{background-color:var(--color-bg-code);border-radius:.25rem;color:var(--color-text-p);font-family:var(--font-mono);padding:.2rem .4rem}@media (max-width:767.98px){.article{padding:0 1rem}}.article a{color:var(--color-text-a);-webkit-text-decoration:none;text-decoration:none}@media (any-hover:hover){.article a:hover{color:var(--color-text-a);-webkit-text-decoration:underline;text-decoration:underline}}.article a:visited{color:var(--color-text-a-visited)}.article a[target=_blank]:after{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMxOTc2ZDJ9PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTI0LjU1IDB2M2gxMC4zM0wxNC40NCAyMy40NGwyLjEyIDIuMTJMMzcgNS4xMnYxMC4zNGgzVjB6IiBjbGFzcz0iY2xzLTEiLz48cGF0aCBkPSJNMzAgMzdIM1YxMGgxMVY3SDB2MzNoMzNWMjZoLTN6IiBjbGFzcz0iY2xzLTEiLz48L3N2Zz4=");background-repeat:no-repeat;content:"";display:inline-block;height:.7rem;margin:0 .25rem;width:.7rem}.article ol,.article ul{padding-inline-start:32px}.article li{list-style:inherit}.article>section>iframe{aspect-ratio:16/9;height:auto;width:100%}@media (max-width:767.98px){.article>section>iframe{margin-left:-1rem;margin-right:-1rem;max-width:none;width:100vw}}.article kbd{background-color:var(--color-bg-code);border-radius:4px;color:inherit;font-family:var(--font-mono);padding:.2rem .4rem;white-space:nowrap}.article blockquote{background:var(--color-bg-code);border-radius:6px;color:var(--color-text-p);margin:0;padding:1em}.article blockquote p{margin:0}.article pre{color:var(--color-text-p);font-family:var(--font-mono);font-size:.9rem;line-height:150%;overflow:auto;word-break:break-all;word-wrap:break-word;background:var(--color-bg-code);border-radius:5px}@media (max-width:767.98px){.article pre{font-size:.8rem;margin-left:-1rem;margin-right:-1rem}}.article code.hljs,.article pre>code{box-sizing:border-box;display:block;padding:20px;position:relative}.article code.hljs:before{background:var(--color-text-p);color:var(--color-bg);display:inline;font-size:.5rem;left:20px;line-height:1.25;padding:0 1em;position:absolute;top:0;-webkit-user-select:none;user-select:none}.article code.hljs.language-javascript:before,.article code.hljs.language-js:before{content:"JS"}.article code.hljs.language-json:before{content:"JSON"}.article code.hljs.language-xml:before{content:"XML"}.article code.hljs.language-html:before{content:"HTML"}.article code.hljs.language-css:before{content:"CSS"}.article code.hljs.language-scss:before{content:"SCSS"}.article code.hljs.language-ts:before,.article code.hljs.language-typescript:before{content:"TypeScript"}.article code.hljs.language-actionscript:before{content:"ActionScript 3.0"}.article code.hljs.language-cs:before{content:"C#"}.article code.hljs.language-bash:before{content:"コマンドライン"}.article code.hljs.language-swift:before{content:"Swift"}.article code.hljs.language-glsl:before{content:"GLSL"}.article code.hljs.language-vue:before{content:"Vue"}.breadcrumb{margin:5rem auto 1rem;max-width:1080px}@media (max-width:1199.98px){.breadcrumb{margin:0 1rem}}.breadcrumb ul{display:block;font-size:.9rem;list-style:none;overflow:hidden;padding:0;width:100%}.breadcrumb li{display:inline;word-break:break-all}.breadcrumb li:before{content:"/";margin:0 .5rem}.breadcrumb li:first-child:before{content:none}.breadcrumb li a{color:var(--color-text-p);-webkit-text-decoration:none;text-decoration:none}.breadcrumb li a:visited{color:currentcolor}@media (any-hover:hover){.breadcrumb li a:hover{color:var(--color-text-a-hover)}}.wrap{overflow:hidden}@media (min-width:768px){.wrap{margin:0 auto;max-width:720px}}.wrap_960{margin:0 auto}@media (min-width:1200px){.wrap_960{max-width:1080px}}@media (min-width:992px) and (max-width:1199.98px){.wrap_960{max-width:960px}}footer #copyright{font-size:.75rem;text-align:center}hr{border-color:var(--color-text-p);border-style:inset;border-width:1px;display:block;margin-block:.5em;margin-inline:auto;opacity:.5;overflow:hidden;unicode-bidi:isolate}table{font-size:.9rem;line-height:1.5;width:100%;word-break:break-all}table td,table th{border-top:1px solid var(--color-border);padding:.5rem .25rem;vertical-align:top}table thead th{border-bottom:1px solid var(--color-border);vertical-align:bottom}</style> <style>h2.article_title[data-v-3469d367]{color:var(--color-text-h);font-family:var(--font-sans);font-feature-settings:"palt";font-size:2rem;font-weight:700;letter-spacing:.005em;line-height:1.5;margin-left:auto;margin-right:auto;max-width:720px;text-align:center}@media (max-width:767.98px){h2.article_title[data-v-3469d367]{font-size:5vw;padding:0 .25rem}}h2.article_title[data-v-3469d367] strong{background:none;font-size:1.5em;font-weight:700}h2.article_title[data-v-3469d367] small{font-size:.75em;font-weight:inherit}h2.article_title[data-v-3469d367] span.wbr{display:inline-block}</style> <style>@media (max-width:767.98px){.article-date-item[data-v-d384dd23]{display:inline-block}}</style> <style>.sns-share[data-v-694562d6]{display:flex;gap:8px;justify-content:center;margin:1rem 0;text-align:center}.sns-share-badge[data-v-694562d6]{display:inline-block;font-size:12px;font-weight:700;line-height:1;margin-top:3px;padding:3px 6px;-webkit-user-select:none;user-select:none}.sns-share-btn[data-v-694562d6]{border-radius:6px;display:block;height:44px;transition:background-color .2s;width:44px}.sns-share-btn._x[data-v-694562d6]{background-color:#000;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' viewBox='0 0 240 240'%3E%3Cpath fill='%23fff' d='m88.2 60.66 81.26 118.15h-18.04L70.16 60.66zm4.73-9H53.04l93.64 136.15h39.89zM132.54 109.25l49.7-57.59h-11.25l-43.44 50.33z'/%3E%3Cpath fill='%23fff' d='m105.36 127.72-52.32 60.62H64.3l46.05-53.36z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}@media (any-hover:hover){.sns-share-btn._x[data-v-694562d6]:hover{background-color:#111}}.sns-share-btn._facebook[data-v-694562d6]{background-color:#32529f;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M212 197h-37v60h37v176h70V257h50l5-60h-55v-33c0-14 3-20 17-20h38V83h-49c-52 0-76 23-76 67z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}@media (any-hover:hover){.sns-share-btn._facebook[data-v-694562d6]:hover{background-color:#2a4887}}.sns-share-btn._hatena[data-v-694562d6]{background-color:#00a4de;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%23fff' d='M278.2 258.1q-13.6-15.2-37.8-17c14.4-3.9 24.8-9.6 31.4-17.3s9.8-17.8 9.8-30.7A55 55 0 0 0 275 166a48.8 48.8 0 0 0-19.2-18.6c-7.3-4-16-6.9-26.2-8.6s-28.1-2.4-53.7-2.4h-62.3v227.2h64.2q38.7 0 55.8-2.6c11.4-1.8 20.9-4.8 28.6-8.9a52.5 52.5 0 0 0 21.9-21.4c5.1-9.2 7.7-19.9 7.7-32.1 0-16.9-4.5-30.4-13.6-40.5m-107-71.4h13.3q23.1 0 31 5.2c5.3 3.5 7.9 9.5 7.9 18s-2.9 14-8.5 17.4-16.1 5-31.4 5h-12.3zM224 317c-6.1 3.7-16.5 5.5-31.1 5.5h-21.7V273h22.6c15 0 25.4 1.9 30.9 5.7s8.4 10.4 8.4 20-3 14.7-9.2 18.4zm133.6-10.9a28.8 28.8 0 1 0 28.8 28.8 28.8 28.8 0 0 0-28.8-28.8m-25-169.7h50v151.52h-50z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}@media (any-hover:hover){.sns-share-btn._hatena[data-v-694562d6]:hover{background-color:#0091c8}}</style> <style>.sidebar{position:sticky;top:32px}.sidebarList{background-color:var(--color-bg-content-static);border-radius:8px;font-size:.75rem;line-height:1.5;list-style:none;max-height:calc(100vh - 96px);overflow:auto;padding:16px;position:relative;--color-bg-content-static:#fff;--color-contents-shadow:#0003}@media (prefers-color-scheme:dark){.sidebarList{--color-bg-content-static:#303030;--color-contents-shadow:#0006}}.sidebarList:before{background-color:var(--color-border);content:"";height:calc(100% - 64px);position:absolute;top:32px;width:1px}.sidebarList_item{color:var(--color-text-p-secondary);font-weight:700;padding-left:16px;position:relative;word-break:auto-phrase}.sidebarList_item:before{background-color:var(--color-btn-secondary);border:3px solid var(--color-bg-content-static);border-radius:50%;content:"";height:6px;left:-5.5px;position:absolute;top:6px;transition:background-color .3s;width:6px}@media (any-hover:hover){.sidebarList_item:hover:before{background-color:var(--primary)}}.sidebarList_item>a{display:inline-block;padding:4px 0;position:relative;transition:color .3s;width:100%}.sidebarList_item__sub{font-size:.75rem;font-weight:400}.sidebarList_item__sub:before{height:4px;left:-4.5px;top:8px;width:4px}.sidebarList_item__sub>a{padding-left:1em}.sidebarList_item.is-active>a{color:var(--primary)}.sidebarList_item.is-active:before{background-color:var(--primary)}@media (any-hover:hover){.sidebarList_item>a:hover{color:var(--primary)}}</style> <style>.SnsButtons[data-v-b5cbd36c]{padding-bottom:32px;padding-top:32px}.SnsButtons-sns[data-v-b5cbd36c]{display:flex;flex-flow:row wrap;gap:16px;justify-content:center}.SnsButtons-head[data-v-b5cbd36c],.SnsButtons-top[data-v-b5cbd36c]{text-align:center}.btn-sm[data-v-b5cbd36c]{align-items:center;display:flex;font-size:.875rem;gap:8px;padding:.25rem .5rem}</style> <style>.author-info[data-v-9742c4dd]{display:flex;margin:32px auto;max-width:640px}@media (max-width:767.98px){.author-info[data-v-9742c4dd]{padding-left:16px;padding-right:16px}}.author-info .btn[data-v-9742c4dd]{border:1px solid #0000;border-radius:.25rem;cursor:pointer;display:inline-block;font-size:1rem;font-weight:400;line-height:1.25;padding:.5rem 1rem;text-align:center;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.author-info .btn[data-v-9742c4dd],.author-info .btn[data-v-9742c4dd]:active,.author-info .btn[data-v-9742c4dd]:hover{-webkit-text-decoration:none;text-decoration:none}.author-info .btn-x[data-v-9742c4dd]{align-items:center;display:inline-flex;font-size:.75rem;padding:.1em .25em .1em .1em}.author-info .btn-x svg[data-v-9742c4dd]{margin-right:.25rem}.author-avatar[data-v-9742c4dd]{margin-right:24px}.author-avatar img[data-v-9742c4dd]{border-radius:50%}.author-avatar._large img[data-v-9742c4dd]{height:128px;width:128px}.author-desc[data-v-9742c4dd]{line-height:1.75}.author-desc-name[data-v-9742c4dd]{color:var(--color-text-h);display:flex;font-size:1.25rem;margin:0}@media (min-width:768px){.author-desc-name[data-v-9742c4dd]{align-items:center;gap:16px}}@media (max-width:767.98px){.author-desc-name[data-v-9742c4dd]{flex-direction:column;gap:4px}}.author-desc-script[data-v-9742c4dd]{color:var(--color-text-p);font-size:.9rem}.author-desc-script[data-v-9742c4dd] a{color:var(--color-text-a)}@media (any-hover:hover){.author-desc-script[data-v-9742c4dd] a:hover{color:var(--color-text-a-hover)}}.author-desc-script[data-v-9742c4dd] a:visited{color:var(--color-text-a-visited)}.is-inview img[data-v-9742c4dd]{view-transition-name:var(--475ed944)}</style> <style>.banner-img[data-v-84d78e6a]{border-radius:6px;height:auto;width:100%}@media (max-width:767.98px){.banner-img[data-v-84d78e6a]{border-radius:0}}.banners ul[data-v-84d78e6a]{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);list-style:none;padding:0}@media (max-width:767.98px){.banners ul[data-v-84d78e6a]{grid-template-columns:repeat(1,1fr)}}@media (any-hover:hover){.banners a[data-v-84d78e6a]:hover{filter:brightness(1.2)}}</style> <style>.related[data-v-c7eaaedb]{margin:64px 0}.related-in[data-v-c7eaaedb]{margin:0 auto;max-width:960px}@media (min-width:1200px){.related-in[data-v-c7eaaedb]{max-width:1080px}}@media (max-width:1199.98px){.related-in[data-v-c7eaaedb]{padding:0 1rem}}.related-in-head[data-v-c7eaaedb]{color:var(--color-text-h);font-family:var(--font-sans);font-feature-settings:"palt";font-size:1.5rem;font-weight:400;text-align:center}.related-in-ul[data-v-c7eaaedb]{display:grid;gap:1rem;grid-template-columns:1fr 1fr 1fr 1fr;list-style:none;margin:0;padding:0}@media (max-width:767.98px){.related-in-ul[data-v-c7eaaedb]{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}}.related-in-ul-li-thumb[data-v-c7eaaedb]{border-radius:6px;margin:0 0 10px;position:relative;transition:all .2s}.related-in-ul-li-thumb-img[data-v-c7eaaedb]{border-radius:6px;height:auto;width:100%}.related-in-ul-li-thumb[data-v-c7eaaedb]:after{border:2px solid #0000;border-radius:6px;box-sizing:border-box;content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:border-color .2s;width:100%}.related-in-ul-li-title[data-v-c7eaaedb]{font-size:.9rem;line-height:1.5;text-align:left}.related-in-ul li a[data-v-c7eaaedb]{color:var(--color-text-p);display:block;-webkit-text-decoration:none;text-decoration:none}@supports (word-break:auto-phrase){.related-in-ul li a[data-v-c7eaaedb]{word-break:auto-phrase}}@media (any-hover:hover){.related-in-ul li a[data-v-c7eaaedb]:hover{color:var(--color-text-a-hover)}.related-in-ul li a:hover .related-in-ul-li-thumb[data-v-c7eaaedb]:after{border-color:var(--primary)}.related-in-ul li a:hover .related-in-ul-li-title[data-v-c7eaaedb]{-webkit-text-decoration:none;text-decoration:none}}</style> <style>.header-breadcrumb[data-v-b934bba3]{background:var(--color-bg);container-type:inline-size;top:0;width:100%;z-index:10}.header-breadcrumb__inner[data-v-b934bba3]{font-size:.75rem;margin:0 auto;max-width:960px}@container (1200px <= width){.header-breadcrumb__inner[data-v-b934bba3]{max-width:1080px}}@media (max-width:991.98px){.header-breadcrumb__inner[data-v-b934bba3]{padding-left:16px;padding-right:16px}}.header-breadcrumb__inner ul[data-v-b934bba3]{margin:0;overflow:hidden;padding:0;width:100%}.header-breadcrumb__inner ul li[data-v-b934bba3]{color:#ccc;display:inline;line-height:36px;margin-right:.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-breadcrumb__inner ul li a[data-v-b934bba3]{color:var(--color-text-p);line-height:inherit;-webkit-text-decoration:none;text-decoration:none;transition:all .3s}@media (any-hover:hover){.header-breadcrumb__inner ul li a[data-v-b934bba3]:hover{color:var(--color-text-a)}}.header-breadcrumb__inner ul li[data-v-b934bba3]:after{content:"/";margin-left:.5em}.header-breadcrumb__inner ul li[data-v-b934bba3]:last-child{margin-left:0}.header-breadcrumb__inner ul li[data-v-b934bba3]:last-child:after{content:""}.header-breadcrumb__inner ul li .date[data-v-b934bba3]{color:#888}.header-breadcrumb__inner nav[data-v-b934bba3]{line-height:36px;min-width:60px}@media (max-width:1199.98px){.header-breadcrumb__inner nav[data-v-b934bba3]{margin-right:10px}}</style> <link rel="stylesheet" href="/_nuxt/Logo.B08_Goey.css"> <link rel="stylesheet" href="/_nuxt/CopyrightFooter.QnetxqVn.css"> <link rel="stylesheet" href="/_nuxt/style.DVjyf-m9.css"> <link rel="stylesheet" href="/_nuxt/StaffItem.DNxbzzNe.css"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CimHLzkX.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/nEE18IA-.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BJfczQ26.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/C-0LdZH-.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/SsJVy9aN.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DyrHuGZd.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/B0KK5IHd.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CrLfLwun.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/3M2JxWNy.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CJSCuD5P.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DXINm9ZB.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CTIKuer1.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DHthBGao.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CMx0JrsU.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BoQVk32p.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DU2oTVfN.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DEGgh01b.js"> <link rel="dns-prefetch" href="https://ics-creative.github.io"> <link rel="prefetch" as="image" type="image/png" href="/_nuxt/logo-website.Cz5k_taM.png"> <meta name="referrer" content="unsafe-url"> <meta name="format-detection" content="telephone=no"> <meta name="author" content="株式会社ICS"> <meta name="color-scheme" content="light dark"> <meta name="theme-color" content="#eff2f5" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#202020" media="(prefers-color-scheme: dark)"> <meta name="apple-mobile-web-app-title" content="ICS MEDIA"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="icon" href="/_assets/icons/favicon.png"> <link rel="apple-touch-icon" href="/_assets/icons/apple-touch-icon.png"> <link rel="alternate" type="application/rss+xml" href="/feed/atom.xml"> <link rel="manifest" href="/_assets/manifest_static.json"> <link rel="author" href="http://www.hatena.ne.jp/ics-media/"> <meta name="description" content="テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。"> <meta property="article:author" content="https://www.facebook.com/icswebjp"> <meta property="fb:pages" content="1414915712086775"> <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="website"> <meta property="og:title" content="HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選 - ICS MEDIA"> <meta property="og:description" content="テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。"> <meta property="og:url" content="https://ics.media/entry/240801/"> <meta property="og:site_name" content="ICS MEDIA"> <meta property="og:image" content="https://ics.media/entry/240801/images/eyecatch.jpg"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:description" content="テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。"> <meta name="twitter:title" content="HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選 - ICS MEDIA"> <meta name="twitter:image" content="https://ics.media/entry/240801/images/eyecatch.jpg"> <meta name="twitter:site" content="@icsweb"> <meta property="article:published_time" content="2024-08-01T00:00:00+09:00"> <meta property="article:modified_time" content="2025-01-31T00:00:00+09:00"> <meta property="og:updated_time" content="2025-01-31T00:00:00+09:00"> <meta name="date" content="2025-01-31T00:00:00+09:00"> <meta name="robots" content="max-image-preview:large"> <link rel="canonical" href="https://ics.media/entry/240801/"> <script type="application/ld+json">{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://ics.media/entry/240801/"},"headline":"HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選","image":{"@type":"ImageObject","url":"/entry/240801/images/eyecatch.jpg","height":512,"width":1280},"datePublished":"2024-08-01","dateModified":"2025-01-31","author":{"@type":"Organization","name":"株式会社ICS"},"publisher":{"@type":"Organization","name":"株式会社ICS","logo":{"@type":"ImageObject","url":"/_assets/icons/apple-touch-icon.png","width":512,"height":512}},"description":""}</script> <script type="module" src="/_nuxt/CimHLzkX.js" crossorigin></script></head><body><div id="__nuxt"><div class="ly-top" data-v-53af800e><div class="ly-top-header" data-v-53af800e><div class="mediaHeader" data-v-53af800e data-v-c016e82a><div class="mediaHeader-row" data-v-c016e82a><h1 data-v-c016e82a><a href="/" class="" title="ICS MEDIA" data-v-c016e82a data-v-39193113><span data-v-39193113>ICS MEDIA</span></a></h1><div class="mediaHeader-row-tool" data-v-c016e82a><span class="mediaHeader-row-tool-item mediaHeader-row-tool-item_search" data-v-c016e82a><a href="/entry/search/" class="" title="サイト内を検索する" data-v-c016e82a><svg width="32" height="32" viewBox="0 0 24 24" data-v-c016e82a><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" data-v-c016e82a></path><path d="M0 0h24v24H0z" fill="none" data-v-c016e82a></path></svg></a></span></div></div></div><nav class="category" categoryid data-v-53af800e data-v-5ddcd2fd><ul class="category-list" data-v-5ddcd2fd><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/design/" class="" data-v-5ddcd2fd>UIデザイナー</a></li><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/html5/" class="" data-v-5ddcd2fd>HTMLコーダー</a></li><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/frontend/" class="" data-v-5ddcd2fd>フロントエンジニア</a></li><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/creative/" class="" data-v-5ddcd2fd>クリエイティブコーダー</a></li><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/3d/" class="" data-v-5ddcd2fd>3Dデベロッパー</a></li></ul></nav></div><div itemscope itemtype="http://schema.org/Article" style="display:none;" data-v-53af800e data-v-cb0dd5fc><div class="heroSpace_padding heroSpace" data-v-cb0dd5fc><iframe src="/_assets/top_hero/archives.html" width="100%" height="100%" tabindex="-1" aria-hidden="true" loading="lazy" data-v-cb0dd5fc></iframe><div class="heroSpace-title" data-v-cb0dd5fc><header data-v-cb0dd5fc><p data-v-cb0dd5fc></p><h1 itemprop="name" data-v-cb0dd5fc></h1></header></div></div></div><div data-v-da421125><div class="eyecatch" data-v-da421125 style="--0e97d286:eyecatch-240801;" data-v-921b35f7><div class="eyecatch-blur-container" data-v-921b35f7><img class="eyecatch-blur" fetchpriority="high" src="/entry/240801/images/eyecatch.jpg" width="1280" height="512" alt="" data-v-921b35f7></div><div class="eyecatch-inner" data-v-921b35f7><img src="/entry/240801/images/eyecatch.jpg" alt="" width="1280" height="512" class="eyecatch-inner-img" fetchpriority="high" data-v-921b35f7></div></div><main class="wrap_960" data-v-da421125 data-v-49d92408><article data-v-49d92408><h2 class="article_title" data-v-49d92408 data-v-3469d367><span class="wbr">HTMLと</span><span class="wbr">CSSで</span><span class="wbr">つくる！</span><span class="wbr"> リンクテキストの</span><span class="wbr">ホバー時アニメーション11選</span></h2><div class="article-date" data-v-49d92408><meta itemProp="datePublished" content="2024-08-01" data-v-d384dd23><span class="article-date-item" data-v-d384dd23><time itemProp="dateModified" dateTime="2025-01-31" title="2024年8月1日に公開" data-v-d384dd23>1月31日</time> 更新</span><span class="article-date-item article-date-slash" data-v-49d92408> / </span><a href="/entry/staff/sawada-naomi/" class="article-date-item" data-v-49d92408>株式会社ICS 澤田ナオミ</a></div><ul class="article-tag" data-v-49d92408><li data-v-49d92408><a href="/entry/tag/CSS/" class="" data-v-49d92408>CSS</a></li></ul><div class="sns-share" data-v-49d92408 data-v-694562d6><div data-v-694562d6><a href="https://twitter.com/intent/tweet?url=https://ics.media/entry/240801/&text=HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選 - ICS MEDIA" class="sns-share-btn _x" target="_blank" title="X（旧Twitter）でシェア" data-v-694562d6></a><span class="sns-share-badge" data-v-694562d6></span></div><div data-v-694562d6><a class="sns-share-btn _hatena" href="https://b.hatena.ne.jp/entry/s/ics.media/entry/240801/" target="_blank" title="はてなブックマークでブックマーク" data-v-694562d6></a><span class="sns-share-badge" data-v-694562d6>133</span></div></div><div class="entry" data-v-49d92408><div class="entry-article article" data-v-49d92408><section data-v-49d92408><p>テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。</p> <p>テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。</p> <p>しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。</p> <p>今回は<strong>HTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーション</strong>をテーマに実装例を紹介します。</p> <p>▼今回紹介する実装例一覧 <img srcset="/entry/240801/images/240801_demo_all.gif 1920w" src="/entry/240801/images/240801_demo_all.gif" sizes="(max-width:720px) 100vw, 720px" width="1920" height="1082" alt="" loading="lazy"></img></p> <p>とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。</p> <ul> <li>HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい</li> <li>透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい</li> </ul> <p>※今回の実装例では主にヘッダー／フッターやサイドナビゲーションで使用されるような、比較的短いワード（= 1行に収まるテキスト量）のリンクテキストを想定しています。</p> <h3 id="%E5%85%B1%E9%80%9A%E3%81%AEhtml" tabindex="-1">共通のHTML</h3> <p>実装例の紹介に入る前に、ほとんどの実装例で共通するHTMLを掲載します。<code>a</code>タグ1つのシンプルな構成です。</p> <p>実装例のうち「4. テキストにパースがつくアニメーション」のみ異なるHTMLを使用しますが、こちらは別途CSSとあわせてHTMLの掲載をします。</p> <p>▼リンクテキストのHTML</p> <pre><code class="hljs language-HTML"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text"</span>></span>LINK TEXT<span class="hljs-tag"></<span class="hljs-name">a</span>></span> </code></pre> <h3 id="%E5%85%B1%E9%80%9A%E3%81%AEcss" tabindex="-1">共通のCSS</h3> <p>次に、すべての実装例で共通するCSSを掲載します。こちらはブラウザのデフォルトスタイルを打ち消すための記述です。</p> <p>▼リンクテキストのCSS</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-tag">a</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#000</span>; <span class="hljs-attribute">text-decoration</span>: none; } </code></pre> <p>※本筋ではないですが、リンクテキストを画面に中央配置するといった表示用のスタイルについてはレイアウト用CSSファイルに記述しています。詳細は以下を参考ください。</p> <ul> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/layout.css" target="_blank">レイアウト用CSSのソースコードを確認する</a></li> </ul> <p>ここからは、各実装例を紹介します。</p> <h3 id="1.-%E5%AD%97%E9%96%93%E3%81%8C%E5%BA%83%E3%81%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">1. 字間が広がるアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/1_letter-spacing/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/1_letter-spacing/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/1_letter-spacing/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼リンクテキストのCSS抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-attribute">transition</span>: letter-spacing <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">letter-spacing</span>: <span class="hljs-number">0.05em</span>; <span class="hljs-comment">/* 字間の設定 */</span> } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC" tabindex="-1">解説</h4> <p><code>letter-spacing</code>プロパティを使用して字間を広げているシンプルな動きです。</p> <p>単位には相対値である<code>em</code>を使用しています。<code>em</code>はその要素自体に適用されているフォントサイズに依存します。今回の場合<code>font-size: 60px;</code>の指定があるので、<code>1em</code>は<code>60px</code>となります。そして、<code>0.05em</code>は<code>60 * 0.05 = 3</code>となり実質<code>letter-spacing: 3px;</code>の設定をしていることになります。</p> <p><code>em</code>を使用することで、以下のメリットがあります。</p> <ul> <li><code>px</code>等の絶対値指定と異なり、テキストのフォントサイズ変更に合わせて微調整する必要がない</li> <li>フォントサイズの異なるテキストにスタイルを適用した場合もホバー時の印象を保てる</li> </ul> <p>ちなみに、テキスト1字ごとの文字幅はフォントによって異なるので注意が必要です。</p> <ul> <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/letter-spacing" target="_blank">letter-spacing | MDN</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units" target="_blank">CSS の値と単位 | MDN</a></li> </ul> <h3 id="2.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E4%B8%8A%E4%B8%8B%E3%81%AB%E5%9B%9E%E8%BB%A2%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">2. テキストが上下に回転するアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/2_rotation/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/2_rotation/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/2_rotation/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼CSSを抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">overflow</span>: hidden; <span class="hljs-comment">/* 1つ目の影を隠す */</span> <span class="hljs-attribute">color</span>: transparent; <span class="hljs-comment">/* テキスト本体は透明にする */</span> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-comment">/* 影の設定 1つ目：Y方向の位置にマイナスに設定してテキスト本体の上に配置、ぼかしなし 2つ目：位置はテキスト本体と同じ、ぼかしなし */</span> <span class="hljs-attribute">text-shadow</span>: <span class="hljs-number">0</span> -<span class="hljs-number">1.5em</span> <span class="hljs-number">0</span> <span class="hljs-number">#000</span>, <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">#000</span>; <span class="hljs-attribute">transition</span>: text-shadow <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">text-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">#000</span>, <span class="hljs-number">0</span> <span class="hljs-number">1.5em</span> <span class="hljs-number">0</span> <span class="hljs-number">#000</span>; <span class="hljs-comment">/* 2つの影の位置を上方向に1.5emずつずらす */</span> } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-1" tabindex="-1">解説</h4> <p>アニメーションを見るとテキストが同時に2つ見えますが、これらはいずれも<code>text-shadow</code>プロパティでつくられたテキストの影です。<code>text-shadow</code>プロパティの値はカンマ区切りで複数個の影を設定できるので、構造としては影が上下に並んでいる状態です。</p> <ul> <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow" target="_blank">text-shadow | MDN</a></li> </ul> <p>そして、1つ目の影は<code>overflow: hidden;</code>の指定によって隠されています。開発ツール上で<code>overflow: hidden;</code>の指定を解除して動きを確認すると、より仕組みがわかりやすいかと思います。</p> <h3 id="3.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E4%B8%8A%E4%B8%8B%E3%81%AB%E5%9B%9E%E8%BB%A2%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%88%E8%83%8C%E6%99%AF%E8%89%B2%E3%81%A4%E3%81%8D%EF%BC%89" tabindex="-1">3. テキストが上下に回転するアニメーション（背景色つき）</h3> <p>さきほどの「2. テキストが上下に回転するアニメーション」の実装例から、さらに背景色をつけたパターンを紹介します。</p> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/3_rotation-background/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/3_rotation-background/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/3_rotation-background/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼リンクテキストのCSS抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>; <span class="hljs-comment">/* 1つ目の影を隠す */</span> <span class="hljs-attribute">overflow</span>: hidden; <span class="hljs-attribute">color</span>: transparent; <span class="hljs-comment">/* テキスト本体は透明にする */</span> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-comment">/* 影の設定 1つ目：Y方向の位置にマイナスに設定してテキスト本体の上に配置、ぼかしなし 2つ目：位置はテキスト本体と同じ、ぼかしなし */</span> <span class="hljs-attribute">text-shadow</span>: <span class="hljs-number">0</span> -<span class="hljs-number">1.5em</span> <span class="hljs-number">0</span> <span class="hljs-number">#000</span>, <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">#000</span>; <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(to bottom, <span class="hljs-number">#000</span> <span class="hljs-number">50%</span>, transparent <span class="hljs-number">50%</span>) <span class="hljs-number">0</span> <span class="hljs-number">100%</span>; <span class="hljs-attribute">background-size</span>: <span class="hljs-number">100%</span> <span class="hljs-number">200%</span>; <span class="hljs-attribute">transition</span>: text-shadow <span class="hljs-number">0.3s</span>, background-position <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-comment">/* 2つの影の位置を上方向に1.5emずつずらす */</span> <span class="hljs-attribute">text-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">#fff</span>, <span class="hljs-number">0</span> <span class="hljs-number">1.5em</span> <span class="hljs-number">0</span> <span class="hljs-number">#000</span>; <span class="hljs-comment">/* 背景の位置を動かす */</span> <span class="hljs-attribute">background-position</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span>; } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-2" tabindex="-1">解説</h4> <p><code>linear-gradient()</code>関数を使用して背景の上半分が黒で下半分が透明になるよう指定しています。カッコ内にある<code>to bottom, #000 50%, transparent 50%</code>の記述はそれぞれ以下の意味があります。</p> <ul> <li><code>to bottom</code>：上から下に向かって変化させる。これにより縦方向のグラデーションになります。</li> <li><code>#000 50%</code>：0〜50%（上半分）は黒。</li> <li><code>transparent 50%</code>：50%〜100%（下半分）は透明。</li> </ul> <p>黒と透明、互いの色が同じ50%の位置で指定されているため、グラデーションの色がはっきりと切り替わって見えます。</p> <p>サイズは<code>background-size</code>プロパティで横幅<code>100%</code>、高さ<code>200%</code>に設定しており、<code>overflow: hidden;</code>の効果で初期状態では上半分の黒背景が隠されています。</p> <p>そして、ホバー時には<code>background-position</code>プロパティで位置を調整することで、黒背景がテキストの1つ目の影と一緒に下に回転しているように見せています。</p> <h3 id="4.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AB%E3%83%91%E3%83%BC%E3%82%B9%E3%81%8C%E3%81%A4%E3%81%8F%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">4. テキストにパースがつくアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/4_perspective/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/4_perspective/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/4_perspective/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼リンクテキストのHTMLを抜粋</p> <pre><code class="hljs language-HTML"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>LINK TEXT<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> </code></pre> <p>ほかの実装例と異なり、テキスト要素を<code>span</code>タグで囲っています。</p> <p>▼リンクテキストのCSSを抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> <span class="hljs-selector-tag">span</span> { <span class="hljs-comment">/* 初期値のinlineではtransformが効かないためinline-blockを指定 */</span> <span class="hljs-attribute">display</span>: inline-block; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-attribute">transition</span>: transform <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> <span class="hljs-selector-tag">span</span> { <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">perspective</span>(<span class="hljs-number">600px</span>) <span class="hljs-built_in">rotateY</span>(-<span class="hljs-number">15deg</span>) <span class="hljs-built_in">rotateX</span>(<span class="hljs-number">20deg</span>); } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-3" tabindex="-1">解説</h4> <p>この実装例は<code>transform</code>プロパティ内で、<code>perspective()</code>関数を使用してパースをつけることで奥行きのある表現にしています。<code>perspective()</code>関数がなくとも<code>rotateY()</code>関数と<code>rotateX()</code>関数によって傾きますが、パースがつくことでより立体感が生まれます。</p> <p><code>perspective()</code>で設定する値が小さくなるほど、より奥行きが出るのでぜひ開発ツール上で試してみてください。</p> <ul> <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/perspective" target="_blank">perspective() | MDN</a></li> </ul> <p>そして、スタイルの指定は今回<code>text</code>クラスのついた<code>a</code>タグではなく、子要素の<code>span</code>タグに対して行っています。<code>transform</code>プロパティによる変形がクリック可能な領域に影響を与えないようにするためです。<code>a</code>タグに<code>transform</code>プロパティで今回の変形を適用すると、ホバー前とホバー中でクリックできる領域が変化していまいます。</p> <h3 id="5.-%E5%B7%A6%E5%81%B4%E3%81%8B%E3%82%89%E5%86%86%E3%81%8C%E7%8F%BE%E3%82%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">5. 左側から円が現れるアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/5_circle/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/5_circle/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/5_circle/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼CSSを抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">display</span>: flex; <span class="hljs-comment">/* テキストと疑似要素を横並びにする */</span> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-attribute">align-items</span>: center; <span class="hljs-comment">/* 上下中央に揃える */</span> } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>; <span class="hljs-comment">/* 初期表示は表示しないようにする */</span> <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>; <span class="hljs-attribute">background-color</span>: transparent; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">transition</span>: <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">0.25em</span>; <span class="hljs-comment">/* ホバー時に表示 */</span> <span class="hljs-attribute">height</span>: <span class="hljs-number">0.25em</span>; <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">36px</span>; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#000</span>; } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-4" tabindex="-1">解説</h4> <p>円が出現するだけでなく、あわせてテキスト全体が動くのでより目を引きます。とくに縦にリンクテキストが並んでいる場合に、ホバー中のテキストがよりわかりやすくなるでしょう。</p> <p>円は疑似要素でつくり、初期表示は非表示かつレイアウトに影響したくないので<code>width</code>プロパティと<code>height</code>プロパティは<code>0</code>にしておきます。</p> <p>上記の設定があるので<code>background-color: transparent;</code>は不要に思えますが、徐々に現れるようにしたいのでホバー時は<code>transparent</code>から<code>#000</code>に色変化するようにしています。</p> <h3 id="6.-%E4%B8%8B%E7%B7%9A%E3%81%8C%E5%B7%A6%E3%81%8B%E3%82%89%E6%B5%81%E3%82%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">6. 下線が左から流れるアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/6_underline/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/6_underline/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/6_underline/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼CSSを抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">3px</span>; <span class="hljs-comment">/* テキストと下線の間隔 */</span> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">#000</span>, <span class="hljs-number">#000</span>); <span class="hljs-attribute">background-repeat</span>: no-repeat; <span class="hljs-attribute">background-position</span>: bottom right; <span class="hljs-comment">/* 下線の初期位置 */</span> <span class="hljs-attribute">background-size</span>: <span class="hljs-number">0</span> <span class="hljs-number">1px</span>; <span class="hljs-comment">/* 下線のサイズ（横幅、高さ） */</span> <span class="hljs-attribute">transition</span>: background-size <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">background-position</span>: bottom left; <span class="hljs-comment">/* 下線のホバー時位置 */</span> <span class="hljs-attribute">background-size</span>: <span class="hljs-number">100%</span> <span class="hljs-number">1px</span>; <span class="hljs-comment">/* 下線の横幅を100%にする */</span> } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-5" tabindex="-1">解説</h4> <p><code>background-image</code>プロパティと<code>background-size</code>プロパティで高さ（太さ）<code>1px</code>の線をつくり、<code>background-position</code>プロパティの値変化で線が左から右へ流れていくように見せています。</p> <h4 id="%E4%B8%8B%E7%B7%9A%E3%81%AE%E6%B5%81%E3%82%8C%E6%96%B9%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B" tabindex="-1">下線の流れ方を変える</h4> <p><code>background-position</code>プロパティの値を少し変更すると、下線の流れ方を変えられます。</p> <p>▼右から左に流れるようにする（変更した箇所のみ抜粋）</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">background-position</span>: bottom left; <span class="hljs-comment">/* 下線の初期位置 */</span> } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">background-position</span>: bottom right; <span class="hljs-comment">/* 下線のホバー時位置 */</span> } </code></pre> <p>▼左から出て、左に戻る（変更した箇所のみ抜粋）</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">background-position</span>: bottom left; <span class="hljs-comment">/* 下線の初期位置 */</span> } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">background-position</span>: bottom left; <span class="hljs-comment">/* 下線のホバー時位置 */</span> } </code></pre> <h4 id="%E4%B8%8B%E7%B7%9A%E3%82%92%E5%BC%95%E3%81%8F%E6%96%B9%E6%B3%95%E3%81%AF%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE" tabindex="-1">下線を引く方法はさまざま</h4> <p>以下記事にて、場面に応じた記述方法や複数行に対応する方法など詳しく紹介していますので、ぜひ参考ください。</p> <ul> <li>『<a href="https://ics.media/entry/230123/">CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで</a>』</li> </ul> <h3 id="7.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%AB%E3%83%A9%E3%83%BC%E3%81%8C%E5%B7%A6%E3%81%8B%E3%82%89%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">7. テキストカラーが左から変化するアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/7_text-color-slide-in/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/7_text-color-slide-in/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/7_text-color-slide-in/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼リンクテキストのCSS抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-comment">/* 文字色は透明にして背景が見えるようにする */</span> <span class="hljs-attribute">color</span>: transparent; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-comment">/* オレンジと黒が50%の位置で切り替わるグラデーション */</span> <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(to right, orange <span class="hljs-number">50%</span>, <span class="hljs-number">#000</span> <span class="hljs-number">50%</span>) <span class="hljs-number">100%</span>; <span class="hljs-comment">/* 背景をテキストで切り抜く */</span> <span class="hljs-attribute">background-clip</span>: text; <span class="hljs-comment">/* 横幅は200%にしてグラデーションの青部分は見えないようにする */</span> <span class="hljs-attribute">background-size</span>: <span class="hljs-number">200%</span> <span class="hljs-number">100%</span>; <span class="hljs-attribute">transition</span>: background-position <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-comment">/* グラデーションの位置を移動して、オレンジ部分を見せる */</span> <span class="hljs-attribute">background-position</span>: <span class="hljs-number">0</span> <span class="hljs-number">100%</span>; } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-6" tabindex="-1">解説</h4> <p>仕組みとしては、テキストの2倍（200%）サイズの背景が左から右へ移動しているイメージです。</p> <p>「3. テキストが上下に回転するアニメーション（背景色つき）」の実装例でもコメントしていますが、グラデーションの色がパキッと切り替わっているのは、<code>linear-gradient()</code>関数内で青と黒の位置パーセンテージを同一にして境界を共有しているためです。</p> <ul> <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient" target="_blank">linear-gradient() | MDN</a></li> </ul> <p>そして、<code>background-clip</code>プロパティの値を<code>text</code>にすることで、背景を前景にあるテキストで切り抜いて表示をしています。</p> <ul> <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-clip" target="_blank">background-clip | MDN</a></li> </ul> <h3 id="8.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%AB%E3%83%A9%E3%83%BC%E3%81%A8%E8%83%8C%E6%99%AF%E8%89%B2%E3%81%8C%E5%B7%A6%E3%81%8B%E3%82%89%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">8. テキストカラーと背景色が左から変化するアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/8_background-slide-in/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/8_background-slide-in/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/8_background-slide-in/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼リンクテキストのCSS抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">position</span>: relative; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>; <span class="hljs-comment">/* 見た目調整用の余白 */</span> <span class="hljs-attribute">color</span>: <span class="hljs-number">#000</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>; <span class="hljs-attribute">mix-blend-mode</span>: difference; <span class="hljs-comment">/* difference（差分） */</span> <span class="hljs-attribute">transition</span>: <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-7" tabindex="-1">解説</h4> <p><code>mix-blend-mode</code>プロパティを使用した、要素の重なった部分の見え方が変化していく実装例です。流れる背景は疑似要素で作成しています。初期状態では<code>0</code>だった横幅（<code>width</code>プロパティ）がホバー時に<code>100%</code>に広がるというシンプルな実装です。</p> <p>ポイントとなるのが、<code>mix-blend-mode: difference;</code>の指定です。<code>mix-blend-mode</code>プロパティは要素が重なったときの見え方を変化させます。今回は疑似要素に<code>difference</code>を指定しているため、疑似要素が他要素と重なる部分は差分の色が見えるようになっています。</p> <p>そのため疑似要素の白い背景が移動するとき、白地の部分は黒く見えて、黒字テキスト部分は白く見えるという仕組みです。</p> <h3 id="9.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%AB%E3%83%A9%E3%83%BC%E3%81%A8%E8%83%8C%E6%99%AF%E8%89%B2%E3%81%8C%E5%B7%A6%E3%81%8B%E3%82%89%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%88%E7%94%BB%E5%83%8F%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A%EF%BC%89" tabindex="-1">9. テキストカラーと背景色が左から変化するアニメーション（画像背景あり）</h3> <p>白と黒ですと単純に色が反転しているように見えますが、たとえば画像などさまざまな色が含まれる要素と重ねてもおもしろい効果が得られます。</p> <p>以下は背景画像を用意して、さらにテキスト自体にも<code>mix-blend-mode</code>プロパティを設定した場合の実装例です。</p> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/9_background-mix-blend/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/9_background-mix-blend/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/9_background-mix-blend/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼背景画像とリンクテキストのCSS抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"./images/bg.jpg"</span>); <span class="hljs-attribute">background-size</span>: cover; } <span class="hljs-comment">/* テキストカラーと背景色が左から変化するアニメーション */</span> <span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">position</span>: relative; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>; <span class="hljs-comment">/* 見た目調整用の余白 */</span> <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; <span class="hljs-attribute">mix-blend-mode</span>: difference; <span class="hljs-comment">/* difference（差分） */</span> } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>; <span class="hljs-attribute">background-color</span>: white; <span class="hljs-attribute">mix-blend-mode</span>: difference; <span class="hljs-comment">/* difference（差分） */</span> <span class="hljs-attribute">transition</span>: <span class="hljs-number">0.3s</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; } </code></pre> <h3 id="10.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E4%B8%80%E7%9E%AC%E3%81%BC%E3%81%8B%E3%81%95%E3%82%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">10. テキストが一瞬ぼかされるアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/10_blur/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/10_blur/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/10_blur/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼リンクテキストのCSS抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; } <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">animation</span>: text-blur <span class="hljs-number">0.5s</span>; } <span class="hljs-comment">/* アニメーション設定 */</span> <span class="hljs-keyword">@keyframes</span> text-blur { <span class="hljs-number">0%</span> { <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">blur</span>(<span class="hljs-number">0</span>); } <span class="hljs-number">50%</span> { <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">blur</span>(<span class="hljs-number">4px</span>); <span class="hljs-comment">/* ぼかしの強さ */</span> } <span class="hljs-number">100%</span> { <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">blur</span>(<span class="hljs-number">0</span>); } } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-8" tabindex="-1">解説</h4> <p>ホバー時にテキストがぼかされてまた戻る動きをつくるため、<code>@keyframes</code>アットルールを使用しています。ぼかされた状態はテキストの可読性が落ちるので変化が起こる時間は短くしています。</p> <p>ぼかしを行っているのは<code>filter</code>プロパティで設定している<code>blur()</code>関数です。<code>0</code>で「ぼかしなし」となり、値が大きいほど強くぼかされます。</p> <ul> <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/blur" target="_blank">blur() | MDN</a></li> </ul> <h3 id="11.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E8%83%8C%E6%99%AF%E3%81%8C%E3%81%BC%E3%81%8B%E3%81%95%E3%82%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">11. テキストの背景がぼかされるアニメーション</h3> <p>▼ホバーしてお試しください</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/11_background-image-blur/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/11_background-image-blur/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/11_background-image-blur/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼リンクテキストのCSS抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-attribute">position</span>: relative; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">20px</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff8</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">60px</span>; } <span class="hljs-comment">/* テキストの疑似要素 */</span> <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">z-index</span>: -<span class="hljs-number">1</span>; <span class="hljs-comment">/* テキストより背面に表示する */</span> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>; <span class="hljs-attribute">transition</span>: <span class="hljs-number">0.3s</span>; } <span class="hljs-comment">/* テキストホバー時の疑似要素 */</span> <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span><span class="hljs-selector-pseudo">::before</span> { -webkit-backdrop-<span class="hljs-attribute">filter</span>: <span class="hljs-built_in">blur</span>(<span class="hljs-number">10px</span>); <span class="hljs-comment">/* Safari表示用 */</span> backdrop-<span class="hljs-attribute">filter</span>: <span class="hljs-built_in">blur</span>(<span class="hljs-number">10px</span>); <span class="hljs-comment">/* 背景をぼかす */</span> } </code></pre> <h4 id="%E8%A7%A3%E8%AA%AC-9" tabindex="-1">解説</h4> <p>画像等の背景要素がある場合に効果的に使える実装例です。</p> <p>さきほど紹介した「テキストが一瞬ぼかされるアニメーション」の実装例で、<code>filter</code>プロパティは指定した要素自体をぼかしましたが、今回使用している<code>backdrop-filter</code>プロパティは背面にある要素をぼかします。</p> <ul> <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter" target="_blank">backdrop-filter | MDN</a></li> </ul> <h4 id="backdrop-filter%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C%E7%8A%B6%E6%B3%81" tabindex="-1"><code>backdrop-filter</code>プロパティのブラウザ対応状況</h4> <p>ほとんどのモダンブラウザで対応していますが、2024年8月時点ではSafariのみベンダープレフィックスが必要です。2024年秋リリース予定のSafari 18.0からベンダープレフィックスが不要になります。</p> <ul> <li><a href="https://caniuse.com/css-backdrop-filter" target="_blank">CSS Backdrop Filter | Can I use…</a></li> </ul> <h3 id="%E3%81%8A%E3%81%BE%E3%81%91" tabindex="-1">おまけ</h3> <p>ここからは、サイトに適用する際に調整するとよい点を紹介します。</p> <h4 id="%E3%82%B3%E3%83%A9%E3%83%A0%EF%BC%9A%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E7%B7%A9%E6%80%A5%E3%82%92%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B" tabindex="-1">コラム：アニメーションの緩急を調整する</h4> <p>今回紹介している実装例では、<code>transition</code>プロパティの値は汎用的な設定としてアニメーション対象のプロパティ名や再生時間のみを指定していました。実装例をサイトに取り入れる際は、他に動きのある要素やサイトの雰囲気に合わせて、ぜひイージング関数を使用してアニメーションの緩急を調整してみてください。</p> <p>例として<code>cubic-bezier()</code>関数を使用して「テキストが上下に回転するアニメーション」を調整してみます。以下に調整前と調整後の両方を掲載しますのでぜひ違いを確認ください。</p> <p>▼ホバーしてお試しください（調整前）</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/2_rotation/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/2_rotation/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/2_rotation/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>▼ホバーしてお試しください（調整後）</p> <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts allow-same-origin" src="https://ics-creative.github.io/240801_link-hover-animations/extra_rotation-cubic-bezier/"></iframe> <ul> <li><a href="https://ics-creative.github.io/240801_link-hover-animations/extra_rotation-cubic-bezier/" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/240801_link-hover-animations/blob/main/extra_rotation-cubic-bezier/index.css" target="_blank">CSSのソースコード全体を確認する</a></li> </ul> <p>余韻があり調整前の実装例より凝っているような、少し上品で垢抜けた印象を持ちませんか？</p> <p>コード上では、CSSに以下の指定を追加しています。</p> <p>▼CSS追記箇所のみ抜粋</p> <pre><code class="hljs language-CSS"><span class="hljs-selector-class">.text</span> { <span class="hljs-comment">/* cubic-bezierを使用して緩急にメリハリをつける easeInOutQuartのイージング */</span> <span class="hljs-attribute">transition</span>: text-shadow <span class="hljs-number">0.4s</span> <span class="hljs-built_in">cubic-bezier</span>(<span class="hljs-number">0.76</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.24</span>, <span class="hljs-number">1</span>); } </code></pre> <p><code>cubic-bezier()</code>関数の使い方を含め、アニメーションに緩急をつけて滑らかに見せる方法（イージング）について詳しく知りたい方は、ぜひ以下記事を参考ください。</p> <ul> <li><a href="https://ics.media/entry/18730/">CSSイージングのお手本- ease-out, ease-in, linearの使い分け</a></li> </ul> <h4 id="%E3%82%B3%E3%83%A9%E3%83%A0%EF%BC%9A-%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E3%81%AF%E3%83%9B%E3%83%90%E3%83%BC%E6%99%82%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%81%9F%E3%81%8F%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AF%EF%BC%9F" tabindex="-1">コラム：スマホではホバー時のアニメーションをつけたくない場合は？</h4> <p>スマホに限らず、タッチデバイスにおいてタップ時にホバー時用アニメーションがついてしまうのは意図しない場合がほとんどかと思います。</p> <p>画面幅でデスクトップとスマホのスタイルを切り替えたとしても、大きめのタッチデバイスでタップしてアニメーションしてしまうと困りますよね。</p> <p>そんなときは<code>any-hover</code>メディア特性を使用しましょう。メディア特性とは<code>@media</code>の構文のうち、デバイス環境などを記述する箇所を指します。<code>any-hover: hover</code>の記述でホバー可能なデバイスかどうか判定できます。</p> <p>1つ目の、「字間が広がるアニメーション」の実装例を元にすると以下のように書きます。</p> <pre><code class="hljs language-CSS"><span class="hljs-comment">/* ホバー可能なデバイスのみ適用 */</span> <span class="hljs-keyword">@media</span> (<span class="hljs-attribute">any-hover</span>: <span class="hljs-attribute">hover</span>) { <span class="hljs-selector-class">.text</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">letter-spacing</span>: <span class="hljs-number">0.05em</span>; } } </code></pre> <p><code>any-hover</code>メディア特性について、以下記事の各セクションでも紹介しているのでこちらも参考ください。</p> <ul> <li><a href="https://ics.media/entry/221208/#10.-%E3%82%BF%E3%83%83%E3%83%81%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%A7%E3%81%AE%E3%83%9B%E3%83%90%E3%83%BC%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%9B%9E%E9%81%BF">タッチデバイスでのホバーアニメーションの回避 - 『リンク/ボタン/フォームをより良くするHTML・CSS 17選』</a></li> <li><a href="https://ics.media/entry/230629/#%E3%83%9B%E3%83%90%E3%83%BC%E3%81%8C%E6%9C%89%E5%8A%B9%E3%81%AA%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%AE%E3%81%BF%E3%80%81%E3%83%9B%E3%83%90%E3%83%BC%E6%99%82%E3%81%AE%E6%BC%94%E5%87%BA%E3%82%92%E8%A1%8C%E3%81%86">ホバーが有効なデバイスのみ、ホバー時の演出を行う - 『シンプルで使いやすいHTML・CSSボタンデザイン集11選』</a></li> </ul> <h3 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h3> <p>リンクテキストのホバー時アニメーションを紹介してきました。一つひとつは控えめ・シンプルな演出が多いですが、たとえばアニメーションを組み合わせることで、異なる印象を持たせることもできそうです。実装例を参考に、色々試してみていただけると嬉しいです。</p> <p>また、以下記事では1文字ずつ変化するテキストアニメーションの実装例を紹介しています。本記事よりもHTMLが少し複雑になりますが、より表現の幅が広がるような内容ですのでぜひ閲覧ください。</p> <ul> <li><a href="https://ics.media/entry/250131/">『HTMLとCSSでつくる!　1文字ずつ変化するテキストのアニメーション』</a></li> </ul> <p>ICS MEDIAでは、パーツ実装の引き出しを増やすのに役立つ記事がほかにもあります。こちらも参考ください。</p> <ul> <li><a href="https://ics.media/entry/230629/">『シンプルで使いやすい HTML・CSSボタンデザイン集11選』</a></li> <li><a href="https://ics.media/entry/240425/">『HTML・CSSで実装するかわいいフキダシのアイデア』</a></li> </ul> </section></div><div class="entry-sidebar" data-v-49d92408><div class="sidebar" data-v-49d92408><ol class="sidebarList"><li class="sidebarList_item"><a href="#top">冒頭</a></li><li data-index="0" class="sidebarList_item"><a href="#%E5%85%B1%E9%80%9A%E3%81%AEhtml">共通のHTML</a></li><li data-index="1" class="sidebarList_item"><a href="#%E5%85%B1%E9%80%9A%E3%81%AEcss">共通のCSS</a></li><li data-index="2" class="sidebarList_item"><a href="#1.-%E5%AD%97%E9%96%93%E3%81%8C%E5%BA%83%E3%81%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">1. 字間が広がるアニメーション</a></li><li data-index="3" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC">解説</a></li><li data-index="4" class="sidebarList_item"><a href="#2.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E4%B8%8A%E4%B8%8B%E3%81%AB%E5%9B%9E%E8%BB%A2%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">2. テキストが上下に回転するアニメーション</a></li><li data-index="5" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-1">解説</a></li><li data-index="6" class="sidebarList_item"><a href="#3.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E4%B8%8A%E4%B8%8B%E3%81%AB%E5%9B%9E%E8%BB%A2%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%88%E8%83%8C%E6%99%AF%E8%89%B2%E3%81%A4%E3%81%8D%EF%BC%89">3. テキストが上下に回転するアニメーション（背景色つき）</a></li><li data-index="7" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-2">解説</a></li><li data-index="8" class="sidebarList_item"><a href="#4.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AB%E3%83%91%E3%83%BC%E3%82%B9%E3%81%8C%E3%81%A4%E3%81%8F%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">4. テキストにパースがつくアニメーション</a></li><li data-index="9" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-3">解説</a></li><li data-index="10" class="sidebarList_item"><a href="#5.-%E5%B7%A6%E5%81%B4%E3%81%8B%E3%82%89%E5%86%86%E3%81%8C%E7%8F%BE%E3%82%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">5. 左側から円が現れるアニメーション</a></li><li data-index="11" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-4">解説</a></li><li data-index="12" class="sidebarList_item"><a href="#6.-%E4%B8%8B%E7%B7%9A%E3%81%8C%E5%B7%A6%E3%81%8B%E3%82%89%E6%B5%81%E3%82%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">6. 下線が左から流れるアニメーション</a></li><li data-index="13" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-5">解説</a></li><li data-index="14" class="sidebarList_item sidebarList_item__sub"><a href="#%E4%B8%8B%E7%B7%9A%E3%81%AE%E6%B5%81%E3%82%8C%E6%96%B9%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B">下線の流れ方を変える</a></li><li data-index="15" class="sidebarList_item sidebarList_item__sub"><a href="#%E4%B8%8B%E7%B7%9A%E3%82%92%E5%BC%95%E3%81%8F%E6%96%B9%E6%B3%95%E3%81%AF%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE">下線を引く方法はさまざま</a></li><li data-index="16" class="sidebarList_item"><a href="#7.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%AB%E3%83%A9%E3%83%BC%E3%81%8C%E5%B7%A6%E3%81%8B%E3%82%89%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">7. テキストカラーが左から変化するアニメーション</a></li><li data-index="17" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-6">解説</a></li><li data-index="18" class="sidebarList_item"><a href="#8.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%AB%E3%83%A9%E3%83%BC%E3%81%A8%E8%83%8C%E6%99%AF%E8%89%B2%E3%81%8C%E5%B7%A6%E3%81%8B%E3%82%89%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">8. テキストカラーと背景色が左から変化するアニメーション</a></li><li data-index="19" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-7">解説</a></li><li data-index="20" class="sidebarList_item"><a href="#9.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%AB%E3%83%A9%E3%83%BC%E3%81%A8%E8%83%8C%E6%99%AF%E8%89%B2%E3%81%8C%E5%B7%A6%E3%81%8B%E3%82%89%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%88%E7%94%BB%E5%83%8F%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A%EF%BC%89">9. テキストカラーと背景色が左から変化するアニメーション（画像背景あり）</a></li><li data-index="21" class="sidebarList_item"><a href="#10.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E4%B8%80%E7%9E%AC%E3%81%BC%E3%81%8B%E3%81%95%E3%82%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">10. テキストが一瞬ぼかされるアニメーション</a></li><li data-index="22" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-8">解説</a></li><li data-index="23" class="sidebarList_item"><a href="#11.-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E8%83%8C%E6%99%AF%E3%81%8C%E3%81%BC%E3%81%8B%E3%81%95%E3%82%8C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">11. テキストの背景がぼかされるアニメーション</a></li><li data-index="24" class="sidebarList_item sidebarList_item__sub"><a href="#%E8%A7%A3%E8%AA%AC-9">解説</a></li><li data-index="25" class="sidebarList_item sidebarList_item__sub"><a href="#backdrop-filter%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C%E7%8A%B6%E6%B3%81">backdrop-filterプロパティのブラウザ対応状況</a></li><li data-index="26" class="sidebarList_item"><a href="#%E3%81%8A%E3%81%BE%E3%81%91">おまけ</a></li><li data-index="27" class="sidebarList_item sidebarList_item__sub"><a href="#%E3%82%B3%E3%83%A9%E3%83%A0%EF%BC%9A%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E7%B7%A9%E6%80%A5%E3%82%92%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B">コラム：アニメーションの緩急を調整する</a></li><li data-index="28" class="sidebarList_item sidebarList_item__sub"><a href="#%E3%82%B3%E3%83%A9%E3%83%A0%EF%BC%9A-%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E3%81%AF%E3%83%9B%E3%83%90%E3%83%BC%E6%99%82%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%81%9F%E3%81%8F%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AF%EF%BC%9F">コラム：スマホではホバー時のアニメーションをつけたくない場合は？</a></li><li data-index="29" class="sidebarList_item"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ol></div></div></div></article></main><div class="wrap_960" data-v-da421125><div class="SnsButtons" data-v-da421125 data-v-b5cbd36c><p class="SnsButtons-head" data-v-b5cbd36c>\ SNSでシェアしよう /</p><div class="SnsButtons-sns" data-v-b5cbd36c><a href="https://twitter.com/intent/tweet?url=https://ics.media/entry/240801/&text=HTML%E3%81%A8CSS%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8B%EF%BC%81%20%E3%83%AA%E3%83%B3%E3%82%AF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E3%83%9B%E3%83%90%E3%83%BC%E6%99%82%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B311%E9%81%B8%20-%20ICS%20MEDIA" target="_blank" class="btn btn-secondary btn-sm share-x" data-v-b5cbd36c><span data-v-b5cbd36c>X（旧Twitter）でポストする</span></a><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/240801/" target="_blank" class="btn btn-secondary btn-sm share-facebook" data-v-b5cbd36c><span data-v-b5cbd36c>はてなブックマーク</span></a></div></div><div class="author-info" data-v-da421125 style="--475ed944:staff-sawada-naomi;" data-v-9742c4dd><div class="author-avatar" data-v-9742c4dd><img src="/_assets/top/staff/ics-staff-sawada-naomi.jpg" width="64" height="64" alt="" loading="lazy" data-v-9742c4dd></div><div class="author-desc" data-v-9742c4dd><div class="author-desc-name" data-v-9742c4dd><div data-v-9742c4dd>澤田ナオミ</div><div data-v-9742c4dd><a class="btn btn-secondary btn-x" target="_blank" href="https://twitter.com/naomai___" data-v-9742c4dd><svg width="16" height="16" viewbox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-9742c4dd><path d="M240 0H0V240H240V0Z" fill="black"></path><path d="M88.2 60.6602L169.46 178.81H151.42L70.16 60.6602H88.2ZM92.93 51.6602H53.04L146.68 187.81H186.57L92.93 51.6602Z" fill="white"></path><path d="M132.54 109.25L182.24 51.6602H170.99L127.55 101.99L132.54 109.25Z" fill="white"></path><path d="M105.36 127.72L53.04 188.34H64.3L110.35 134.98L105.36 127.72Z" fill="white"></path></svg>フォロー </a></div></div><p class="author-desc-script" data-v-9742c4dd>ウェブデザイナーの経験を経て、フロントエンドエンジニアとしてICSに入社しました。お絵かき、ゲーム、音楽、映画、お笑いが大好きです。</p><a href="/entry/staff/sawada-naomi/" class="btn btn-secondary" data-v-9742c4dd> この担当の記事一覧 </a></div></div></div><aside class="wrap_960 banners" data-v-da421125 data-v-84d78e6a><ul data-v-84d78e6a><li data-v-84d78e6a><a href="/entry/231120/" data-v-84d78e6a><img width="1200" height="640" class="banner-img" alt="バナー：フロントエンドの知識地図" src="/_assets/top/231120_book_banner.jpg" loading="lazy" data-v-84d78e6a></a></li><li data-v-84d78e6a><a href="https://ics-web.jp/recruit/" data-v-84d78e6a><img width="1200" height="640" class="banner-img" alt="バナー：株式会社ICS 採用サイト" src="/_assets/top/190207_recruit_banner.jpg" loading="lazy" data-v-84d78e6a></a></li></ul></aside><aside class="related" data-v-da421125 data-v-c7eaaedb><div class="related-in" data-v-c7eaaedb><h3 class="related-in-head" data-v-c7eaaedb>よく一緒に読まれている記事</h3><ul class="related-in-ul" data-v-c7eaaedb><li data-v-c7eaaedb><a href="/entry/250131/" class="" data-v-c7eaaedb><p class="related-in-ul-li-thumb" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/250131/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb></p><p class="related-in-ul-li-title" data-v-c7eaaedb>HTMLとCSSでつくる!　1文字ずつ変化するテキストのアニメーション</p></a></li><li data-v-c7eaaedb><a href="/entry/230123/" class="" data-v-c7eaaedb><p class="related-in-ul-li-thumb" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/230123/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb></p><p class="related-in-ul-li-title" data-v-c7eaaedb>CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで</p></a></li><li data-v-c7eaaedb><a href="/entry/230629/" class="" data-v-c7eaaedb><p class="related-in-ul-li-thumb" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/230629/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb></p><p class="related-in-ul-li-title" data-v-c7eaaedb>シンプルで使いやすいHTML・CSSボタンデザイン集11選</p></a></li><li data-v-c7eaaedb><a href="/entry/240425/" class="" data-v-c7eaaedb><p class="related-in-ul-li-thumb" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/240425/images/240425_eyecatch__480.jpg" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb></p><p class="related-in-ul-li-title" data-v-c7eaaedb>HTML・CSSで実装するかわいいフキダシのアイデア</p></a></li><li data-v-c7eaaedb><a href="/entry/230327/" class="" data-v-c7eaaedb><p class="related-in-ul-li-thumb" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/230327/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb></p><p class="related-in-ul-li-title" data-v-c7eaaedb>CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう</p></a></li><li data-v-c7eaaedb><a href="/entry/220602/" class="" data-v-c7eaaedb><p class="related-in-ul-li-thumb" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/220602/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb></p><p class="related-in-ul-li-title" data-v-c7eaaedb>backgruond-imageを使ったCSSのアニメーションテクニック</p></a></li><li data-v-c7eaaedb><a href="/entry/200212/" class="" data-v-c7eaaedb><p class="related-in-ul-li-thumb" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/200212/images/eyecatch__480.jpg" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb></p><p class="related-in-ul-li-title" data-v-c7eaaedb>1歩踏み込んでみる！　CSSグラデーションのマニアックな世界</p></a></li><li data-v-c7eaaedb><a href="/entry/230309/" class="" data-v-c7eaaedb><p class="related-in-ul-li-thumb" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/230309/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb></p><p class="related-in-ul-li-title" data-v-c7eaaedb>独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！</p></a></li></ul></div></aside><div class="top_link" data-v-da421125><a href="/" class="btn btn-primary" data-v-da421125>トップページに戻る</a></div><div class="header-breadcrumb" data-v-da421125 data-v-b934bba3><div class="header-breadcrumb__inner" data-v-b934bba3><ul itemscope itemtype="http://schema.org/BreadcrumbList" data-v-b934bba3><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" data-v-b934bba3><a href="/" class="" itemprop="item" data-v-b934bba3><span itemprop="name" data-v-b934bba3>ICS MEDIA</span><meta itemprop="position" content="1" data-v-b934bba3></a></li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" data-v-b934bba3><a href="/entry/category/html5/" class="" itemprop="item" data-v-b934bba3><span itemprop="name" data-v-b934bba3>HTMLコーダー</span><meta itemprop="position" content="2" data-v-b934bba3></a></li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" data-v-b934bba3><a aria-current="page" href="/entry/240801/" class="router-link-active router-link-exact-active" itemprop="item" data-v-b934bba3><span itemprop="name" data-v-b934bba3>HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選</span><meta itemprop="position" content="3" data-v-b934bba3></a></li></ul></div></div></div><footer class="site_info" data-v-53af800e data-v-63cb43db><div class="site_info-sections" data-v-63cb43db><div class="site_info-sections_item" data-v-63cb43db><h3 data-v-63cb43db>このサイトについて</h3><p data-v-63cb43db><ruby data-v-63cb43db>ICS MEDIA<rt data-v-63cb43db>アイシーエスメディア</rt></ruby>は株式会社<ruby data-v-63cb43db>ICS<rt data-v-63cb43db>アイシーエス</rt></ruby>が運営する<strong title="ICS MEDIAはブログではありません" data-v-63cb43db>オウンドメディア</strong>です。UIデザインやフロントエンドのノウハウや最新技術を掲載しています。UIデザインやフロントエンドのノウハウや最新技術を週1回のペースで掲載しています。 </p><ul data-v-63cb43db><li data-v-63cb43db><a href="/entry/about/" class="" data-v-63cb43db>About</a></li><li data-v-63cb43db><a href="https://docs.google.com/forms/d/e/1FAIpQLSdxYknUt8noNJjuuxAIFgnyNL13XpL4MuwQoOrU_inUz8MhGg/viewform?usp=sf_link" target="_blank" data-v-63cb43db> 記事に関するお問い合わせ </a></li></ul></div><div class="site_info-sections_item" data-v-63cb43db><h3 data-v-63cb43db>運営会社について</h3><p data-v-63cb43db> ICSはインタラクションデザイン専門のウェブ制作会社。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。 </p><ul data-v-63cb43db><li data-v-63cb43db><a href="https://ics-web.jp/" target="_blank" data-v-63cb43db> 会社サイト </a></li><li data-v-63cb43db><a href="https://ics-web.jp/contact/" target="_blank" data-v-63cb43db> 会社へのお問い合わせ<br class="tablet" data-v-63cb43db>（仕事の相談等） </a></li></ul><p data-v-63cb43db> インタラクションコンテンツの制作に挑戦しながら、互いにスキルを高め合えるスタッフをICSでは募集しています。 </p><ul data-v-63cb43db><li data-v-63cb43db><a href="https://ics-web.jp/recruit/" rel="noopener noreferrer" data-v-63cb43db>採用情報について</a></li></ul></div><div class="site_info-sections_item" data-v-63cb43db><h3 data-v-63cb43db>常に鮮度の高い情報を</h3><p data-v-63cb43db> ICS MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。 </p><ul data-v-63cb43db><li data-v-63cb43db><a href="/entry/all/" class="" data-v-63cb43db> すべての記事 </a></li><li data-v-63cb43db><a href="/feed/atom.xml" target="_blank" title="ICS MEDIAのRSSをリーダーに登録しよう" data-v-63cb43db> RSS </a></li><li data-v-63cb43db><a href="https://x.com/icsweb" target="_blank" title="ICSのXをフォローしよう" data-v-63cb43db> Xアカウント </a></li></ul></div></div><div class="copyright" role="contentinfo" data-v-63cb43db data-v-4b34f398> Copyright © 2025 <span itemScope="" itemProp="publisher" itemType="https://schema.org/Organization" data-v-4b34f398> ICS INC. </span><br class="mobile" data-v-4b34f398> All Rights Reserved. <br data-v-4b34f398><span class="raw-pages" data-v-4b34f398><div class="raw-pages-item" data-v-4b34f398><a href="/entry/copyright/" class="" data-v-4b34f398>利用規約・免責・著作権</a></div><div class="raw-pages-item" data-v-4b34f398><a href="/entry/privacy/" class="" data-v-4b34f398>プライバシーポリシー</a></div><div class="raw-pages-item" data-v-4b34f398><a href="/entry/quality/" class="" data-v-4b34f398>品質への取り組み</a></div></span></div></footer></div></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["ShallowReactive",1],{"data":2,"state":4,"once":6,"_errors":7,"serverRendered":9,"path":10,"prerenderedAt":11,"pinia":12},["ShallowReactive",3],{},["Reactive",5],{},["Set"],["ShallowReactive",8],{},true,"/entry/240801/",1742387293605,["Reactive",13],{"page":14,"transition":20},{"id":15,"title":16,"type":17,"line":18,"useHero":19},"html5","","top","category",false,{"current":16}]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildId:"f4489ba0-ed67-46ca-84ab-195a96e59dfb",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

CINXE.COM

HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA

HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選 - ICS MEDIA