hover と transition を使ってみよう | HTML / CSS入門

前のページでは、

レスポンシブデザイン
スマホ対応
メディアクエリ

を学びました。

今回は、

マウスを乗せたときの変化
なめらかなアニメーション

を作ってみます。

Webサイトらしい「動き」が少しずつ増えていきます。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

hover とは？

hover は、

マウスカーソルが乗った状態

を表します。

例えば、

ボタンの色を変える
少し拡大する
透明度を変える

などができます。

ボタンを作ってみよう

まずは、body の中へ以下を追加してください。

<a
  href="#"
  class="button"
>
  ボタンです
</a>

例えば、

<body>

  <div class="card">

    ...

    <a
      href="#"
      class="button"
    >
      ボタンです
    </a>

  </div>

</body>

のように追加します。

CSSを書いてみよう

次に、style.css の下へ追加してください。

.button {
  display: inline-block;

  margin-top: 20px;
  padding: 12px 24px;

  background-color: #2563eb;
  color: white;

  border-radius: 8px;

  text-decoration: none;

  transition: 0.3s;
}

.button:hover {
  background-color: #1d4ed8;
}

保存してブラウザを確認してください。

マウスを乗せてみよう

ボタンへマウスを乗せると、

色が変化

するはずです。

これが hover です。

.button:hover

.button:hover

は、

button にマウスが乗った状態

を意味しています。

transition とは？

今回、

transition: 0.3s;

を書いています。

これは、

変化をなめらかにする

設定です。

transition を消してみよう

試しに、

transition: 0.3s;

を消してみてください。

色変化が一瞬になるはずです。

transition があると自然になる

transition を使うことで、

ふわっと変化

するようになります。

現在のWeb制作では非常によく使われています。

display: inline-block

今回、

display: inline-block;

を書いています。

これは、

aタグを「箱」のように扱えるようにする

ための設定です。

何が問題なの？

a タグは、最初は「文章の一部」のような扱いになっています。

例えば、

<a href="#">リンク</a>

は、普通の文字に近い扱いです。

そのため、そのままだと、

width
height
padding

などが思った通り効かないことがあります。

inline のイメージ

通常の a タグは、

文章の途中の文字

のような扱いです。

例えば、

こんにちは Google です

の「Google」の部分に近いイメージです。

inline-block にすると？

display: inline-block;

を書くと、

文字のようにも扱えるし、
箱のようにも扱える

状態になります。

そのため、

padding
width
height
background-color

などが扱いやすくなります。

なぜ block ではなく inline-block なの？

例えば、

display: block;

にすると、

横幅いっぱいを使う要素

になります。

そのため、ボタンが横に大きく広がることがあります。

block のイメージ

block は、

などと同じような表示になります。

つまり、

1行を丸ごと使う

イメージです。

inline-block のイメージ

一方、

display: inline-block;

は、

文字サイズに近い幅のまま、
箱として扱える

状態です。

そのため、

ボタンサイズが内容に合わせて自然になる

というメリットがあります。

実際に試してみよう

例えば、

display: inline-block;

を、

display: block;

へ変更してみてください。

ボタンが横幅いっぱいに広がるはずです。

ボタンデザインでよく使われる

a タグは本来リンクですが、

実際のWeb制作では、

リンクをボタン風にする

ことが非常によくあります。

そのため、

display: inline-block;

がよく登場します。

今は「ボタン化するためによく使う」でOK

最初は、

display: inline-block;
を書くと、
aタグをボタンっぽく扱いやすくなる

くらいの理解で十分です。

display は非常に奥が深いため、少しずつ慣れていきましょう。

text-decoration: none;

通常、a タグには下線があります。

text-decoration: none;

を書くことで、下線を消しています。

border-radius

border-radius: 8px;

は、角を丸くしています。

現在のWeb制作では、角丸デザインが非常によく使われています。

hover と transition は定番表現

hover や transition は、

ボタン
メニュー
カード
画像

など、さまざまな場所で使われています。

例えば、

マウスを乗せると少し明るくなる

などもよくある表現です。

少し動くだけでも印象が変わる

最初は、

hoverで色が変わる

くらいでも十分です。

しかし、この小さな変化だけでも、

Webサイトっぽさ

がかなり増えます。

実際に数字を変えてみよう

例えば、

transition: 1s;

にすると、かなりゆっくり変化します。

逆に、

transition: 0.1s;

にすると、かなり速くなります。

実際に変更して試してみましょう。

「少しずつ試す」が大切

HTML/CSS 学習では、

色を変える
数字を変える
hover を追加する

などを試しながら、

どう変化するか

を見ることが非常に重要です。

今回学んだこと

今回学んだことは、

hover
transition
display
inline-block

などです。

特に、

hover + transition

は、現在のWeb制作で非常によく使われています。

次のページでは

次のページでは、

Google Fonts
フォント変更
デザインの雰囲気を変える方法

などを学んでいきます。

少しずつ「デザインらしさ」が増えていきます。