[CSS]たった1行!サイト内のリンクを乱暴にふわっとかわいい感じにするカスタマイズ

リンクをふわっとさせるカスタマイズ

カーソルを合わせたときにふわっと色が変わるリンク。意外と簡単にできるんです。

隠れかわいいもの好き。よっひー(@yosiakatsuki)です。

たった1行CSSを追加するだけでサイト内のリンクをふわっとさせるカスタマイズ方法を紹介します!

ふわっと変わるリンクにしてみよう!

主にPCから見たときになりますが、リンクにカーソルを当てたとき、「ふわっと」色が変わるサイトってあるじゃないですか!

「ふわっと」色が変わったり、大きさが変わったり、左右に動くとちょっと印象が違いますよね!

最初はjavascriptやjQueryでアニメーションをつけるものと思ってましたが、CSSだけで簡単にできたんです!

ちょっと乱暴なカスタマイズになりますが、サイト内のリンクをふわっとさせるやり方を紹介します!

ふわっとしたリンクの作り方

transitionプロパティを使う!

ふわっとしたリンクを作りたいときに覚えておくCSSのプロパティは「transition」です!

transitionはふわっとさせるためのものだけではありませんが、簡単にふわっとしたアニメーションを作れるので、覚えておくとカスタマイズの幅が広がります!

このtransitionは4つに分けて書くことが出来るのですが、「上下左右」みたいにシンプルな別れ方をするわけじゃないので、transitionに4つ値を指定する形で覚えちゃったほうがわかりやすいと思います!

実際に何を指定するのか。僕の覚え方を紹介します!

transitionに指定する値

transitionの覚え方

僕は上の図のような覚え方をしています!

とりあえずここでは「ふわっと」させる事にフォーカスして説明してみますね!

1つ目は「何をふわっとさせるか」です。

ここにはcolorとかbackground-colorなんかのCSSプロパティが入ります。

2つ目は「何秒かけてふわっとさせるか」です。

例えば0.5sと指定すれば0.5秒かけて文字色が赤から青に変わるみたいなアニメーションになります。

小さすぎると全然ふわっとしてくれないし、大きすぎるとなかなか変化しないなど、好みに合わせて調整が必要な部分です!

3つ目は「どんな感じにふわっとさせるか」です。

指定できるのは次の6つ

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier()

cubic-bezier()を使うといくつでもパターンを作れるのですが、話が難しくなるので今回は無しで!

僕は変化の具合が一定なlinearがクセがなくていいかなぁと思って多用してます。

迷ったらlinearって感じです。デフォルトはeaseなんですけどね…

4つ目は「どれだけ遅らせてふわっとさせ始めるか」です。

ここに「2s」とか指定すると2秒遅れてからふわっとし始めます。

細かいアニメーションをさせるときは使うようになると思いますが、特別な狙いがなければ0でいいと思いますよ。

ではでは、実際にサイト内のリンクを乱暴にふわっとさせるサンプルを紹介します。

サイト内のリンクを乱暴にふわっとさせるサンプルコード

サイト内のリンクを乱暴にふわっとさせるコードはこちら

a {
    transition : all 0.5s linear 0s;
}

サイト内全体に適用されるaタグのスタイルにtransitionを1行足せばOKです。

サンプルでは、「何をふわっとさせるか」にallを指定しているので、何でもかんでもふわっとします!

例えふわっとさせるつもりなかったところのリンクもふわっとするのでかなり乱暴なカスタマイズですね!

いいか悪いかは別にして、なんとなく「ふわっと」させたいと思っているならちょっと参考にしてみてください!

参考

transitionプロパティについては次のページをいつも参考にしています。

僕が「ふわっと」させるカスタマイズに目覚めるきっかけになったのは次のページです。

かなりボリュームありますが色々と参考になります!

よっしーのひとこと

よっひー

アニメーションもやりすぎるとうっとおしくなるのでほどほどに!

簡単に(そして乱暴に)ふわっとかわいいリンクにカスタマイズしてみてください!

ではまた。