【Studio】 ホバーすると下線が出るアニメーションの作り方
「Studioの〇〇の使い方を知りたい」などご要望がありましたら、
いいねを押した後にメッセージ欄を設けていますので、お気軽にご連絡ください！
送信中です
ホバーした時にスッと下線が出てくると、スタイリッシュで格好いいですよね。
イメージとしては下記の通りです。
そこで今回はホバーすると下線が出るアニメーションを実装していきます。手順さえ間違わなければ、初心者でも実装できる内容になっています。
ぜひ参考にしてみてください！
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安18万円〜】
集客に強い・SEO特化のホームページ制作サービス
「デザインは良いのに問い合わせが来ない」それはSEO対策がしっかりできていないことが原因かもしれません。 月間10万PVメディアを運営する現役SEOコンサルが設計するから、 GoogleにもAI（ChatGPT等）にも選ばれるホームページが作れます。
- AI×人間の分業でSEO対策が圧倒的に低価格
- 公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（テンプレート不使用）
- Studio制作で自社更新もカンタン
- ホームページ制作実績、累計50サイト以上
今なら制作費30,000円OFF（毎月3組限定）。ご相談・お見積りは無料です。
ホバー時に下線が出るアニメーションの作り方
ホバー時に下線が出るアニメーションの作り方は、下記のとおりです。
合計11枚の画像を用いながら、詳しく説明していきます。
①：テキストとボックスを用意する
まずはテキストとボックスを用意します。
ボックスの縦幅が長すぎるので、「1px」に変更します。
Kajiボックスを選択しないと、縦幅を変更することはできません！
そして、この2つの要素をグループ化しておきます。
Kajiグループ化のやり方は、シフトボタンを押しながら2つの要素を選択して、Macは「⌘＋G」、Windowsなら「Ctrl＋G」を押します！
すると、下記のようにテキストとボックスがグルーピングされたはずです。
これで一旦、下準備は完了です！
次からモーションなどの設定を行うのですが、名称が複雑なので、一旦ここで整理しておきます。
Kaji下線部分のみを「ボックス」と呼び、Type Something + 下線を「グループ」と呼びます！
②：「ボックス」にモーションを設定
ボックスを選択します。
ボックスを選択した状態で、右パネルの「変形」のタブを開き、下記のように設定します。
拡大・縮小：左側0％、右側100％
原点：左中央
これでボックスのモーション設定は完了です！
③：「グループ」にホバー時の設定をおこなう
次に、グループを選択します。
グループを選択した状態で、条件付きスタイルの部分を「なし」→「ホバー」に変更します。
ホバーになっている状態で、「不透明度：100％」を指定します。
Kaji下記のように、不透明度の部分が水色になっていればOKです！
④：「ボックス」にinホバー時のモーションを設定
再度ボックスを選択します。
条件付きスタイルが「inホバー」になっていることを確認して、「拡大・縮小：左側100％/右側100％」に変更します。
これでホバー時に下線が出るようになったはずです！
一度ライブプレビューを開いて確認してみてください！
Studioのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービスを運営しています。
サービスの強みを一言で表すなら、「集客に強いホームページが作れる」ということです。
- AI×人間の分業でSEO対策が圧倒的に安い
- SEO専門家による細部まで徹底したSEO対策（基本〜本格）
- はじめてのSEOガイド・公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（Webデザイナー専属）
- Studio製だから自社で簡単に更新できる
- ホームページ制作実績、累計50サイト以上
最安18万円〜とお手軽な価格ですが、徹底的にSEO対策されたホームページが作れます。なぜ安く作れるのか、その理由はシンプルで「人間が得意なことは人間、AIが得意なこと（リサーチなど）はAI」が担当しているためです。
オリジナルデザイン、かつ本格的に集客できるホームページがほしい方は、ぜひお気軽にご相談ください。
個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
※コメントは最大500文字、5回まで送信できます
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます