2021年5月17日ページ上にリンクを設定する場合には、aタグを使用しますよね。aタグで作成されたリンクは、通常以下のように下線が引かれています。リンクテキストこの下線を「ホバーに合わせてアニメーション付きで表示したい」という場合があるかと思います。そのままでは、下線にアニメーションをつけることができません。そこで今回の記事ではlinear-gradientを使用して、リンクホバー時に下線が横に伸びるアニメーションを実装する方法を紹介します!多くの記事では擬似要素を使った方法が紹介されていますが、この記事ではCSSグラデーションを使用します。リンクテキストが改行される場合にも対応できますので、是非参考にしてみてください。目次リンクの下線が横に伸びるアニメーションの実装内容について今回の記事では、以下のようなアニメーションを実装していきます。実際に以下のリンクにマウスカーソルを当てて確認してみてください。■一行のリンクリンクテキスト■複数行のリンク長めのリンクテキスト。長めのリンクテキスト。長めのリンクテキスト。長めのリンクテキスト。長めのリンクテキスト。下線が左から右に伸びるアニメーションが確認できるかと思います。改行が必要な長めのリンクでも、しっかりアニメーションが反映されていますね。underlineにはアニメーションを設定できないCSSにはtext-decorationプロパティがあり、この値をunderlineと指定することで、文字に下線を引くことができます。ブラウザにはデフォルトのスタイルシートが用意されていて、aタグには通常以下の記述がされています。underline;しかし、このプロパティにはtransitionが効かないので、アニメーションを設定することができません。下線の表示/非表示を切り替えることはできますが、以下の例のように一瞬で切り替わってしまいます。underlineで実装したリンク【解決策】backgroundのlinear-gradientで下線を表現する今回の実装では、グラデーションを作成するCSS関数linear-gradientで下線を表現します。通常時は下線の横幅を0にして非表示にするホバー時は下線の横幅を100%にして表示するという手順で作成することで、下線にアニメーションを設定することができます!linear-gradientで実装したリンク仕組みが理解できたところで、次は実際のコードを確認していきましょう。【コピペ用】リンクの下線が横に伸びるアニメーションの実装コード以下に全体の実装コードを用意しました。コピペするだけですぐに使えるようにしてますので、自由にご利用ください。*/}実装結果リンクテキストこのままでも使えますが、次でコードの解説やカスタマイズ方法を紹介していきますので、興味がある方は次に進んでください。【解説】リンクの下線が横に伸びるアニメーションの解説ここではそれぞれのコードの解説と、カスタマイズ方法を紹介していきます。HTMLからみていきましょう。HTMLのaタグでテキストリンクを作成HTMLでは、aタグを使用してリンクを作成します。テキスト部分は自由に記入してください。class="animate-link">リンクテキスト</a>href属性には、リンク先のURLを記入します。CSSで装飾するためのanimate-linkというクラスをつけます。これでHTMLは完了です!CSSで下線が伸びるアニメーションを作成CSSでは下線のスタイルと、ホバー時に横に伸びるアニメーションを設定します。*/}コードが少し長いので、分解しつつ解説していきますね。underlineという機能があります。これを使う場合、横に伸びるアニメーションを設定することができません。今回はlinear-gradientで下線を実装するので、text-decorationの下線は非表示にしておく必要があります。text-decorationの値にnoneを指定することで、下線を非表示にすることができます。*/リンクの文字色はcolor、下線の色はbackground-imageのグラデーションで設定します。下線を単色にしたい場合は2箇所に同じ色を、グラデーションにしたい場合は別々の色を入れてください。下線の起点を指定するbackground-positionで、ホバーした時に下線が現れる起点を指定することができます。bottomが一番適していると思いますが、数パターン紹介しておきます。*/}下線の大きさは、background-sizeで指定します。縦幅の順で値を設定することができます。横幅からですが、通常時は線を隠しておきたいので、横幅のサイズを0にしておきます。これでデフォルトの状態では線は表示されません。ホバー時に100%を設定することで、下線が表示されるようになります。次に線の縦幅は、2つ目の値に指定します。縦幅は太すぎると文字が隠れてしまうので、なるべく細めにしておくといいですね。DEMOでは1pxに設定しています。*/transitionプロパティでは、線が伸びるアニメーションの実行時間を指定します。0.6sと指定していますが、これは”0.6秒かけて線の横幅を0から100%にする”という意味になりますね。この数値を変えることでアニメーションのスピードを調整できるので、各自試してみてください。今回は、テキストリンクをホバーした時の下線にアニメーションをつける方法を紹介しました。aタグで作成したリンクに動きをつけたい場合は、ぜひこの方法で実装してみてください!記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。