read moreボタンを装飾

長い文章をそのまま表示すると、ユーザーにとって読みづらくなってしまいますよね。
そんなときに便利なのが「read more ボタン」です。
必要な情報だけをコンパクトに表示でき、ページの離脱防止にもつながります。
この問題では、実務でも使われるread moreボタンのUIを再現し、見やすく使いやすいデザインを実装していきましょう。

CSSアニメーションの問題に挑戦しよう！

問題

「read moreボタンを装飾」

「続きを読む」ボタン（read moreボタン）を作成しましょう。
クリックやホバーによって視覚的に変化するUIを再現してください。
ユーザーが続きを読みたくなる動きを意識し、見本のデザインを再現できれば成功です。

あらかじめエディタに書くコード

                    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/quot">
</head>
<body>
  <div class="readMore">続きを読む</div>
</body>
</html>
¥HTML¥

                    .readMore{
  background-color: #dddddd;
  height: 2em;
  width: 200px;
  line-height: 2em;
  text-align: center;
  position: relative;
  cursor: pointer;
}
¥CSS¥

期待する画面

解答と解説（read moreボタンを装飾）

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

今回の「続きを読むボタン（read moreボタン）」は、CSSと擬似要素を組み合わせて実装しています。
まずポイントとなるのは、Font Awesomeを利用したアイコン表示です。
font-familyに「Font Awesome 5 Free」を指定し、contentプロパティにアイコンコード（Unicode）を設定することで、疑似要素にアイコンを表示しています。
このとき、アイコンによってはfont-weightを適切に指定しないと正しく表示されず、四角形になってしまうため注意が必要です。

次に、ボタンの動きは::before擬似要素とtransformを使って制御しています。
通常時はアイコンを所定の位置に配置し、hoverされたタイミングでtranslateを使って位置を移動させることで、視覚的な変化を演出しています。
このようにtransformを使うことで、レイアウトに影響を与えずにスムーズなアニメーションを実現できます。

また、transitionを指定することで、変化が瞬時ではなく滑らかに行われるようになります。
これにより、ユーザーにとって自然で違和感のないUIになります。
今回の実装はシンプルですが、「擬似要素＋アイコン＋transform」の組み合わせは実務でもよく使われる重要なパターンです。
動きの仕組みを理解しておくことで、さまざまなボタンUIに応用できるようになります。

補足

ボタンのhoverアニメーションは、Web制作においてクリック率や視認性を高める重要なUI表現です。
今回の仕組みを理解すれば、「続きを読むボタン（read more）」のような実務でよく使われるパーツにも応用できます。
ボタンデザインの幅を広げたい方は、以下の問題にも挑戦してみましょう。

・ボタン関連問題：キラッと光るボタンを作ろう【3ステップ】
・ボタン関連問題：クリックで押したように見えるボタン
・問題集一覧：CSSアニメーション問題集
・CSSの基礎から学びたい方：CSS入門講座

↓実務で使えるread moreボタンの設計ポイントは、下で詳しく解説しています。

CSSアニメーション学習のコース一覧へ戻る

ポイント

CSSアニメーションを実務で活かすには

CSSアニメーションのスキルは、Web制作・Webデザインの両方で求められる重要な技術です。
read moreボタンのようなUIは、ユーザーの行動を促す設計として実務でも頻繁に使われます。
こうしたスキルを体系的に身につけたい方は、実務ベースで学べる環境を活用するのもおすすめです。
まずは無料で相談してみましょう。

・Web制作＆デザインコース
・無料メンター相談

さらにスキルアップしたい方は公式LINEから「CSSアニメーション」と送信すると動画が見れます。

LINE登録して動画を視聴する