HTML/CSS：装飾と動き

box-shadowとborder-radiusが正しい

box-shadow は「横 縦 ぼかし 色」の順に書く。

<style>
  .card {
    width: 200px;
    height: 100px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
  }
</style>

<div class="card">カード</div>

薄い影で十分な立体感が出る。濃すぎる影は古い印象になるので、透明度0.1〜0.2程度に抑えるのが現代的。

解答 == B

角を「半径50%」で丸めると、どうなるか。

B

幅と高さが同じなら正円になる。アイコン・アバター・バッジなど、丸い要素はすべてこれで作れる。

border-radiusが50%

幅と高さを同じにして border-radius: 50% を指定する。

<style>
  .avatar {
    width: 60px;
    height: 60px;
    background-color: #0066cc;
    border-radius: 50%;
  }
</style>

<div class="avatar"></div>

画像を入れる場合は object-fit: cover も併用する。縦横比が違う写真でも、円形に切り抜いて表示できる。

<style>
  .btn {
    background-color: #0066cc;
    ____: background-color 0.3s;
  }

  .btn:hover {
    background-color: #004499;
  }
</style>

<button class="btn">ボタン</button>

transitionが0.3s

「移り変わり」を意味する10文字のプロパティ。

transition

transition が無いと色が瞬時に切り替わる。0.2〜0.3秒かけて変化させると、動きが自然になる。

解答 == B

マウスを離したときも滑らかに戻したい。

B

:hover に書くと、マウスを離したとき瞬時に戻る。通常の状態に書けば、行きも帰りも滑らかになる。

transitionとhoverが正しい

transition は通常の状態に書く。

<style>
  .btn {
    padding: 12px 24px;
    background-color: #0066cc;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .btn:hover {
    background-color: #004499;
  }
</style>

<button class="btn">送信する</button>

cursor: pointer も忘れない。マウスカーソルが指の形に変わることで、「押せる」と直感的に伝わる。

<style>
  .box {
    ____: translateY(-4px);
  }
</style>

<div class="box">上に移動</div>

transformが適用される

「変形」を意味する9文字のプロパティ。

transform

transform はレイアウトに影響しない。移動しても元の場所を占め続けるので、周りの要素がずれない。

解答 == B

レイアウトの再計算が起きるかどうか。

B

margin だと下の要素も一緒に動く。transform なら見た目だけが動くので、アニメーションに適している。

transformとbox-shadowが変化

transition に transform と box-shadow の両方を指定する。

<style>
  .card {
    width: 240px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
</style>

<div class="card">ホバーしてみてください</div>

影を濃くしながら少し持ち上げると、実際に浮き上がったように見える。カード型UIで最も使われる演出。

text-shadowが正しい

box-shadow ではなく text-shadow を使う。

<style>
  h1 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }
</style>

<h1>影付きの見出し</h1>

写真の上に載せる文字に有効。背景が明るくても暗くても、影があることで文字が読みやすくなる。

transitionが0.2s

a に transition、a:hover に色を指定する。

<style>
  a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s;
  }

  a:hover {
    color: #cc0000;
  }
</style>

<a href="#">詳しく見る</a>

下線を消したなら、ホバー効果は必須。何の反応も無いと、リンクだと気づかれないまま素通りされる。

transform scaleが適用

transform: scale(1.05); を :hover に指定する。

<style>
  .btn {
    padding: 12px 24px;
    background-color: #0066cc;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .btn:hover {
    transform: scale(1.05);
  }
</style>

<button class="btn">クリック</button>

1.05倍程度が上品。1.2倍などにすると動きが大げさになり、安っぽい印象を与えてしまう。

3種類のbox-shadowが正しい

ぼかしと透明度を大きくするほど、浮いて見える。

<style>
  .card {
    width: 200px;
    padding: 20px;
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 8px;
  }

  .shallow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
  .medium  { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
  .deep    { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
</style>

<div class="card shallow">浅い影</div>
<div class="card medium">中くらいの影</div>
<div class="card deep">深い影</div>

影の強さで階層を表現できる。通常のカードは浅く、モーダルやポップアップは深く——影の深さが「手前にある度合い」を伝える。

transform rotateが適用

transform: rotate(45deg); を使う。

<style>
  .icon {
    width: 60px;
    height: 60px;
    background-color: #0066cc;
    transition: transform 0.3s;
    cursor: pointer;
  }

  .icon:hover {
    transform: rotate(45deg);
  }
</style>

<div class="icon"></div>

回転は「開く・閉じる」の表現に使える。＋マークを45度回転させると×マークになるので、メニューの開閉ボタンでよく使われる。

transition allとease-in-out

all を指定すると、変化するすべてのプロパティに適用される。

<style>
  .btn {
    padding: 12px 24px;
    background-color: #ffffff;
    color: #0066cc;
    border: 2px solid #0066cc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

  .btn:hover {
    background-color: #0066cc;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
  }
</style>

<button class="btn">お問い合わせ</button>

all は便利だが、性能面では個別指定が望ましい。変化しないプロパティまで監視するため、要素が多いページでは動きが重くなることがある。

すべての装飾とtransitionが正しい

transition は通常の状態（:hover ではないほう）に書く。border-radius: 50% で円形、12px で角丸。カードとボタンで別々の transition を持たせる。

<style>
  * {
    box-sizing: border-box;
  }

  body {
    background-color: #f5f5f5;
    padding: 40px;
    margin: 0;
  }

  .card {
    width: 280px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s, box-shadow 0.25s;
  }

  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  }

  .avatar {
    width: 56px;
    height: 56px;
    background-color: #0066cc;
    border-radius: 50%;
    margin-bottom: 16px;
  }

  .badge {
    display: inline-block;
    padding: 4px 10px;
    background-color: #fff0e6;
    color: #ff6600;
    border-radius: 12px;
    font-size: 0.875rem;
  }

  .btn {
    width: 100%;
    padding: 12px;
    background-color: #0066cc;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 16px;
  }

  .btn:hover {
    background-color: #004499;
  }
</style>

<div class="card">
  <div class="avatar"></div>

  <h3>ノートPC</h3>
  <span class="badge">在庫わずか</span>

  <p>軽量で持ち運びに便利なモデルです。</p>

  <button class="btn">カートに入れる</button>
</div>

同じ内容のカードでも、装飾の有無で印象がまったく変わる。角丸・影・ホバー効果——それぞれは小さな指定だが、積み重なると「作り込まれたUI」に見える。

最も重要なのは transition を書く位置だ。.card（通常の状態）に書いているので、マウスを乗せたときも離したときも0.25秒かけて滑らかに変化する。もし .card:hover のほうに書いていたら、離した瞬間にパッと元に戻る——この不自然さは、意外と目につく。

transform: translateY(-6px) と margin-top: -6px の違いも実務的だ。transform はレイアウトを再計算しないので、カードが動いても周囲の要素は微動だにしない。margin で同じことをすると、下のカードまで一緒にずれてしまう。

影の使い分けにも意図がある。通常は 0 2px 8px と控えめ、ホバー時は 0 12px 28px と大きく——影が濃く広がるほど「浮いている」と知覚されるという、人間の視覚の性質を利用している。

いよいよ次章が最終回だ。HT01からここまでの17章すべてを統合し、1枚の完成したWebサイトを作り上げる。