ページ内には広告が含まれます広告ポリシー
Webサイト内の目立たせたいボックス要素に使える汎用CSS、光の通過エフェクトの実装手順を紹介します。この記事ではコピペで使えるCSSレシピと、実際の使い方、アレンジ方法までをまとめています。
光が通過するエフェクトとは？
今回紹介するのは、通称シャインエフェクトのレシピです。指定した要素の上を光が通過するように見せるエフェクトで、画像やJavaScriptを使わず、クラスの追加とCSSだけで実装できるため、見出し・ロゴ・カード・ボタンなど、目立たせたい要素に手軽に追加できます。
このレシピのおすすめポイント
このレシピの利点は、効果をCSSクラスとして独立させている点です。特定の見出し専用、カード専用、ボタン専用として作るのではなく、shiningという汎用クラスにしておくことで、必要な場所へ同じ表現を再利用できます。
たとえば、トップページでは見出しに使い、別のページではボタンに使い、さらに記事一覧ではカードに使うといった運用ができます。CSSを何度も書いたり、複数のHTMLを指定する必要がなく、HTML側でクラスを付けるだけで同じ演出を追加できます。
また、JavaScriptを使わないため、処理の仕組みが分かりやすく、管理もしやすいです。CSSだけで完結しているため、既存のスタイルシートや、WordPressテーマのstyle.cssに追加するだけで使えます。
CSSレシピと使い方
- 任意のスタイルシートに、以下のCSSをコピペする。
- 手持ちのHTMLコード記載箇所の任意の要素に、
shiningのクラスを付与する。
基本的な使い方は、以下のCSSをスタイルシートに貼付したら、光らせたい要素にshiningというHTMLクラスを付けるだけです。HTML側の構造を大きく変える必要がなく、既存のデザインにも追加しやすいのが特徴です。
.shining{
position: relative;
overflow: hidden;
}
.shining::after{
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,.15) 35%,
rgba(255,255,255,.45) 50%,
rgba(255,255,255,.15) 65%,
transparent 100%
);
animation: shining 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes shining{
0%{
left: -120%;
}
45%{
left: -120%;
}
100%{
left: 120%;
}
}
HTML追加例
使い方はシンプルです。光を通過させたい要素にshiningクラスを追加します。
<h1 class="post-title shining">記事タイトル</h1>
<div class="post-card shining">
カードの内容
</div>
<a class="button shining" href="#">詳しく見る</a>
上記のように、既存のクラスにshiningを追加するだけで効果を追加できます。post-titleというクラスがすでに付いている見出しなら、post-title shiningのように、半角スペースを1つ置いてから、クラスを並べて指定します。
このCSSで起きていること
.shiningにはposition: relative;とoverflow: hidden;を指定しています。これは、光のレイヤーを要素内に配置しつつ、実際の位置を要素の外に隠すためです。
光そのもののデザインは.shining::afterで作っています。実際のHTMLには要素を追加せず、疑似要素で光の帯を重ねる仕組みです。position: absolute;によって、親要素である.shiningの上に重ねて配置します。
left: -120%;は、光の帯を最初に要素の左外側へ置くための指定です。その後、@keyframes shiningによってleft: 120%;まで移動させることで、左から右へ光が通過しているように見せています。
アレンジできる場所
光が通過する間隔を変える
光が流れる周期を変えたい場合は、animationの秒数を変更します。
animation: shining 4s ease-in-out infinite; animation: shining 6s ease-in-out infinite;
4sを短くすると光が頻繁に通過し、長くすると間隔がゆっくりになります。sはseconds（秒）の略で、4sの場合は4秒を示しています。より目立たせたい場合は短め、落ち着いた雰囲気にしたい場合は長めにすると使いやすくなります。
光の強さを変える
光の明るさは、rgba()の透明度で調整できます。
rgba(255,255,255,.45) rgba(255,255,255,.25)
この.45は透明度(opacity)を表していて、値が1に近づくほど透明度が低く濃い色に、0に近づくほど半透明で薄い色になります。デザイン上は数値を上げると光が強く見え、下げると控えめになります。本文中のボックスやカードに使う場合は弱め、メインビジュアルや大きな見出しに使う場合は少し強めにすると、デザインになじみやすくなります。
また、255, 255, 255は色を表しています。サンプルでは白を使っていますが、黄色い光やピンクの光など、光の色もサイトの雰囲気によって変えられます。
光の幅を変える
光の帯の幅はwidthで調整できます。
width: 60%; width: 35%;
数値を小さくすると細い光になり、数値を大きくすると広い光になります。ボタンなど小さな要素には細め、見出しや横長のカードには広めの光が向いています。
光の角度を変える
光の斜め具合は、linear-gradient()の角度で調整できます。
background: linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,.15) 35%,
rgba(255,255,255,.45) 50%,
rgba(255,255,255,.15) 65%,
transparent 100%
);
degは角度を表しています。120degの数値を変えると、光が要素内を通過する角度が変わります。45度、135度から少し外した、105degから120deg程度で調整すると、よりおしゃれに見えるのでおすすめです。
実装できない、または注意が必要なケース
基本的には、shiningクラスを付けるだけで実装できます。ただし、すでに対象要素の::afterを別の装飾で使っている場合は、その疑似要素と競合します。
たとえば、見出しの下線やアイコンを::afterで表示している場合、このレシピをそのまま適用すると、どちらか一方の装飾が上書きされる可能性があります。その場合は、対象要素の構造を分けるか、別の疑似要素を使う設計に変更する必要があります。
また、overflow: hidden;を使うため、対象要素の外側にはみ出して表示している装飾がある場合は、その部分が隠れることがあります。通常の見出し、ボタン、カード、ロゴまわりであれば大きな問題になるケースは多くありません。
その他のパターン
マウスホバー時に光を通過させるバージョン
定期的に光を通過させるのではなく、マウスを乗せたときに1回だけ光らせたい時に便利な、shineバージョンも用意しました。アレンジ方法は、shiningと同じです。
.shine{
position: relative;
overflow: hidden;
}
.shine::after{
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,.15) 35%,
rgba(255,255,255,.45) 50%,
rgba(255,255,255,.15) 65%,
transparent 100%
);
pointer-events: none;
}
.shine:hover::after{
animation: shine-once .8s ease-out 1;
}
@keyframes shine-once{
0%{
left: -120%;
}
100%{
left: 120%;
}
}
shiningは定期的に光が通過する演出、shineはホバー時に1回だけ光る演出として分けると、用途ごとに使い分けやすくなります。
まとめ
shiningクラスを使うと、目立たせたい要素に光が通過する演出を簡単に追加できます。実装はCSSだけで完結し、HTML側ではクラス名を追加するだけです。
まずは基本コードをそのまま追加し、光の強さや速度だけを調整すると、既存デザインを崩さず導入しやすいです。
