Web制作、Web開発の歩き方

CSSフレームワークを使おう

■第11話:目を引くアニメーションを作ろう2(光るエフェクト、影)

(最終更新日:2024.11.17)

CSSフレームワークのイメージ
この記事は4分で読めます!
(絵が小さい場合はスマホを横に)

カッコいいサイトをつくりたい!

前回に引き続き、このテーマを取り上げる。 Web制作をする方なら一度は「カッコいいサイトを作りたい」と誰もが思うはずである。 しかしながら、JavaScriptを使うのは難しいし、jQueryも使いこなせない。 Web制作を始めたばかりだと、そんなお悩みも少なくない。 今回は、CSSだけでカッコよく装飾できるエフェクト、第2回をお届けする。


1.光るエフェクト

上記の画像にマウスをのせてほしい(スマートフォンの方は軽くタップする)。 すると、画像が斜めからキラっと光る。 このような効果を1つ付けるだけで、普通のWebサイトよりも、非常に印象的になる。 CSSだけで実装できるので、ぜひ自分のサイトでも試してみよう。一歩上を行くデザインになるはずだ。

上記のエフェクトはCSSだけで実装できる。下記のコードで説明する。 まずは、wrapperの外枠領域を指定する。 光る効果は白色と透明度を変化させることによって、実現できる。 shining-effect発生時の背景色を白にして、それを0.6秒、定速で1回行うようにする(コード左下)。 その際の白の変化を斜め50度から起こし、白の表示の強さを0→0.6→0.4→0.2→0と指定する(コード右)。 これにより、光を一旦強めてから弱めるように指定している。キラリと光るように見せることができる。 コードや言葉だけだと分かりにくいと思う。数字を変化させながら、実際使いながら調整しよう。 光る強さや角度の調整が実感できるはずだ。

光る効果のCSS

そして、スマホのタップにも対応させたい場合は、wrapperにontouchstartの空プロパティが必要になる(下記HTML部分)。 加えて、animation-delayでアニメーションを少し遅らせる必要がある(下記CSS部分)。 これは、そういうものだと覚えておこう。

光る効果のHTML部分

スマホ対応するためにDelayを指定

2.影をつける

影をつけるのは、非常に簡単だ。box-shadowかdrop-shadowを使えば良い。 box-shadowは、ボタン等の決まった形のものに対して影を付けるのに適している。しかし、絵の周りに影を付けることが難しい。 そこで、絵の周りに影を付ける場合は、drop-shadowが有効になる。透明化した画像であれば、境界線を認識して画像に影を付けることができる。

box-shadowとdrop-shadowのCSSの例は、その下に示す。影の方向(X:プラスは右側、Y:プラスは下側)と太さ、ぼかしの範囲、色を指定するだけで簡単に付けられる。 これも実際に数値を入れて調整すると、影の位置を理解しやすい。 mdn web docs_で実際操作できるので、試してみよう。

Image with box-shadow

box-shadow

Image with drop-shadow

drop-shadow

影の効果のCSS(box-shadowとdrop-shadowの違い)

3.まとめ

今回、CSSだけで光るエフェクトや影をつけた。 光るエフェクトはアニメーションにもなっており、かなり目を惹く表現になっている。 他とは違うキラリと光るWebサイトを作ろうと思ったときは、是非今回の内容を思い出してほしい。 ピンポイントで使うことで、きっと良い装飾ができるはずだ。


▼参考図書、サイト

  【CSS】知っておくと便利!短いコードで実装できるCSS小技20選  PHOTOSHOPVIP
  【CSS】animationプロパティの使い方解説!(アニメーション基礎)  PENGIN BLOG