インタラクティブなサイトやWebサービスだとユーザーの入力した内容に誤りがあるときなどにボタンをガタガタ揺らすという演出をしているところがあります。

細かい演出ですが、ただエラーメッセージを出すよりもユーザーに対してエラーを伝えやすくなります。

ここではそのようなボタンをガタガタさせる演出をCSSのアニメーションプロパティとjQueryを実装する方法を解説します。

ガタガタするアニメーションの作り方

上下左右にガタガタ動くようなアニメーションを要素で実行するにはCSS3で追加されたanimation関係のプロパティを使います。

例えば次のようなボタン要素があるとします。

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

このボタンに対してガタガタ動くようなアニメーションを作るには次のCSSを適用します。

.shake_btn
{
  animation-name: shake;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
    
  background-color: rgba(255, 0, 0, 0.7);
  border-radius: 6px;
  width: 150px;
  font-weight: bold;
}

@keyframes shake
{
  from{
    transform: translateX(-5px);
  }
  
  50%{
    transform: translateX(10px);
  }
  
  to{
    transform: translateX(-5px);
  }
}

このCSSを適用したボタンには次のように左右にガタガタ震えるアニメーションが付きます。

ボタン

まずこのCSS内でアニメーションを作っているのは@keyframesでfromブロックの中で開始時の要素のCSS、toブロックの中で終了時の要素のCSSを定義しています。fromとtoブロックの間には０％～１００%の範囲でいくらでもブロックを追加できます。

またこの例ではtransformプロパティで移動関数を渡すことで要素を移動させています。移動関数には左右に移動させるtranslateX関数と上下に移動させるtranslateY関数があります。例えば左に5px、上に10px動かしたい場合はtransformプロパティに次の関数を渡します。

transform: translateX(-5px) translateY(10px);

そして@keyframesで定義したアニメーションを要素に適用しているのが次の部分です。

animation-name: shake;
animation-duration: 0.2s;
animation-iteration-count: infinite;

各アニメーションプロパティは次のような役割を持ちます。

• animation-name
  要素で実行したい@keyframesで定義したアニメーション名を渡す
• animation-duration
  １回当たりのアニメーションの実行時間。0.2sは0.2秒を表す
• animation-iteration-count
  アニメーションを何回実行するかの回数を渡す。「infinite」を渡すとループする

この例ではshakeというアニメを１回当たり0.2秒で無制限に再生するという動作になります。

またアニメーションプロパティはブラウザのバージョンによっては対応していないものもあるので各プロパティの前に「-moz-」や「-webkit-」や「-o-」などのベンダープレフィックス(接頭辞)をつけておいた方が無難です。

-webkit-animation-name: shake;
-moz-animation-name: shake;
animation-name: shake;

クリック時にアニメーションさせる

アニメーションするだけならCSSだけでできますが、クリック時にアニメーションを実行するにはjQueryなどのスクリプトを使う必要があります。次はその方法を解説します。

まず先ほどと同じくボタン要素を用意します。

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

そして次のようにCSSを定義します。

.shake_btn
{   
  background-color: rgba(255, 0, 0, 0.7);
  border-radius: 6px;
  width: 150px;
  font-weight: bold;
}

@keyframes shake
{
  from{
    transform: translateX(-5px) translateY(0px);
  }
  
  20%{
    transform: translateX(5px) translateY(0px);
  }
  
  40%{
    transform: translateX(-10px) translateY(-3px);
  }
  
  60%{
    transform: translateX(10px) translateY(0px);
  }
  
   80%{
    transform: translateX(-10px) translateY(0px);
  }
  
  to{
    transform: translateX(-5px) translateY(0px);
  }
}

このCSS内ではボタン要素に対してアニメーションは適用していません。

代わりに次のようにスクリプト内でボタンがクリックされるたびにcss関数を使ってアニメーションプロパティを設定します。

$(function(){
  $("#btn").on("click", function(){
    /** アニメーションプロパティを設定 */
    $(this).css("animation", "shake 0.3s");
    
    /** ボタン要素をコピーして古いものと置き換え */
    var copied = $(this).clone(true);
    $(this).before(copied);
    $("." + $(this).attr("class") + ":last").remove();
  });
});

細かい説明はしませんがanimationプロパティの設定は一度アニメーションが実行された後の要素には無効なので、clone関数でボタンのコピーを作りクリックでアニメーションするたびに新しいボタン要素に置き換えています。

このように作った要素はブラウザ上では次のような動作をします。ボタンをクリックすると上下左右にガタガタ震えます。

See the Pen NYqYQP by kaz1503 (@kaz1503) on CodePen.dark

以上ガタガタするアニメーションをボタンにつける方法について解説しました。

The post クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】 first appeared on Fukuro Press.

画面をスクロールすると画面内で位置が固定されていてスクロールに合わせて追従するようなボタンはCSSだけで作ることができます。

長い記事だと右下あたりにページトップに戻るボタンがあると読者にも優しいです。

ここではそのような追従ボタンを作る方法を解説します。

知っておくべきCSSプロパティ

まずは追従ボタンを作る時に重要なプロパティについて説明します。

positionプロパティ

これは要素の位置関係を指定するプロパティです。このプロパティには次の４つの値が取れます。

• static
  positionのデフォルト値でどんな方法でもこの値が指定されている要素は位置を変えることができない
• relative
  元々表示されるはずだった場所から相対的に位置指定できる
• fixed
  viewport(PCやスマホの表示領域)に対する相対位置で配置。つまり特定の場所に要素が固定されるので画面をスクロールしても付いてくる要素が作れる
• absolute
  fixedと似ているが位置指定可能(positionプロパティがstatic、relative、absolute)で最も近い要素に対する相対位置に配置される

ここで必要なのは画面の表示領域内に対して要素の位置を指定する「fixed」です。

次の画像のようにボタン要素にだけposition:fixedを適用するとvireportに対して一固定のボタンが作ることが可能です。

top,left,bottom,rightプロパティ

この４つのプロパティは要素を配置する位置を指定するプロパティです。

ただし要素のpositionプロパティが「relative」,「absolute」,「fixed」に指定されている場合だけ有効で、「static」が指定している場合は無効になります。

これらのプロパティは基準となる位置から上下左右にどれだけ離れているかを指定します。例えばbottomプロパティに50px、rightプロパティに30pxを指定すると下部から50px、右側から離れた位置に要素の右下がきます。

追従ボタンを作るときはこのプロパティでPCやスマホの表示領域に対して位置を指定する必要があります。

追従ボタンの作り方

ここまで紹介したプロパティを使うとスクロールに追従してくるボタンが作れるようになります。

まず次のようなボタン要素を定義します。

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

そしてこのボタンに次のようなCSSを適用します。

.fixed_btn
{
  position: fixed;
  bottom: 10px; 
  right: 10px;
  padding: 6px 40px;
}

これだけで追従ボタンが作れます。

ブラウザでは次のようにビューポートの右下から10pxだけ離れた位置にボタンが表示されます。

See the Pen 追従ボタン by kaz1503 (@kaz1503) on CodePen.dark

応用例

この追従ボタンとスクリプトを応用するとクリックすると記事のトップに戻るボタンが作れます。コードは次の通りです。

HTMLコード

<button id="top_btn">記事トップ</button>

CSSコード

#top_btn
{
  position: fixed;
  bottom: 10px;
  right: 10px;
  
  border-radius: 6px;
  background-color: rgba(255, 100, 0, 0.8);
  padding: 6px 3px;
}

スクリプト(jQuery)

$(function(){
  $("#top_btn").on("click", function(){
    $("html, body").animate({scrollTop: 0 }, 1000, "swing");
  });
});

スクリプト内で追従ボタンがクリックされたらanimate関数でページトップに戻る処理を書いています。

$("html, body").animate({scrollTop: 0}, 1000, "swing");

上のコードの「500」はスクロールにかかるミリ秒で500を指定した場合は0.5秒かけて記事上までアニメーション付きでスクロールします。

コードと実行例は次の通りです。一番下までスクロールしてボタンを押してみると動作が分かります。

See the Pen トップに戻るボタン by kaz1503 (@kaz1503) on CodePen.dark

以上スクロールに合わせて追従してくるボタンをCSSで作る方法について解説しました。

The post 画面をスクロールすると追従してくるボタンをCSSだけで作る方法 first appeared on Fukuro Press.

あるリンクを強調させたい場合などはただリンクを張るだけでなく、立体的なボタンにするなどちょっとした工夫をすればクリック率が上がることがあります。

またフォーム内などでもただ無機質なボタンを設置するのではなくほんの少しだけボタンをグラデーションさせたりするとオシャレなデザインになります。

ここではCSSでグラデーションのかかった立体感のあるボタンを作る方法を解説します。

必要な知識

ボタンを作る前に今回立体的なボタンを作るのに必要なCSSのプロパティについていくつか説明します。

グラデーション(linear-gradient)について

従来の方法ではグラデーションを指定するには画像を作り、それを要素の背景に設定する方法が一般的でしたが、CSS3からは標準でグラデーションがサポートされました。

ここで使うのは線形グラデーションで次のようにbackgroundプロパティにlinear-gradient関数を渡します。

background: linear-gradient(to right, red, blue);

linear-gradient関数は次のような引数をとります。

linear-gradient(方向, 開始色, 途中色..., 終了色)

まず１つめの引数の方向には次の２種類の方法でグラデーションの向きを渡します。

• 角度
  単位(deg)をつけた角度。0を指定すると上から下のグラデーションになり、90degを指定すると左から右にグラデーションする。
• to [方向を表すキーワード]
  to rightのように to のあとに方向を表すキーワードをつけるとその方向にグラデーションする。とれる引数は[left, top, right, bottom]の４つ。

例えば次のように向きを指定します。

background: linear-gradient(to right, red, blue);

このCSSを適用すると次のように左から右に赤から青でグラデーションされます。

次に２つ目以降の引数にはグラデーションに使う色を指定します。開始色と終了色は必須でその間にはいくらでも色を挟むことが可能です。

また途中色の場合はカラーコードなどの後に%を指定することでカラーストップを置くことも可能です。例えば次はカラーストップを置く例です。

background: linear-gradient(to right, red, green 20%, purple 50%, blue);

このCSSを適用すると次のように全体の20%の部分で緑に変り、全体の50%の部分から紫でグラデーションできます。

ボックスシャドウ(box-shadow)について

立体的なボタンを作るにはbox-shadowプロパティで要素に影を適用します。

box-shadowプロパティはCSS3で追加されたプロパティで例えば次のように影を指定できます。

box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5)

影は４つの値で定義され、色は最後に指定できます。影を定義する４つの値はそれぞれ順番に次の意味を持ちます。

• １番目の値
  水平方向の影のオフセット値。正の値を指定すると右に、負の値を指定すると左側に影ができる
• ２番目の値
  垂直方向の影のオフセット値。正の値を指定すると下に、負の値を指定すると上に影ができる
• ３番目の値
  影のぼかし距離。値が大きいほど影が大きくなり、０を指定するとぼかしのないくっきりした長方形になる
• ４番目の値
  影の広がり距離。正の値を指定すると影を全方向に伸ばし、負の値を指定すると内側に縮小する

例えば右方向に10px,、下方向に15px、ぼかし距離が10px、広がり距離が5pxで色が青色の影を作る場合は次のCSSを書きます。

box-shadow: 10px 15px 10px 5px blue;

このCSSを適用すると次のように要素に影が付きます。影をつける要素が青色でも影は青色にはならないので注意してください。

立体的なボタンを作る場合は要素にこのbox-shadowプロパティに加えてボーダーの角を丸めるborder-radiusプロパティを指定します。

立体的なボタンの作り方

ここまで解説したプロパティを知っていれば立体的でグラデーションのかかったボタンを作れます。

ボタンを作るときはaタグをボタンに見立ててスタイルを適用する場合とフォームで使われるbuttonタグを加工する場合がありますが、今回紹介する方法はa要素とbutton要素のどちらでも使える方法です。

次が立体的なボタンのコード例です。

HTMLコード

<a href="hogehoge" class="btn_3d">ボタン</a>

CSSコード

.btn_3d
{
  background: linear-gradient(to left, #F11, #F55); 
  box-shadow: 0px 9px 0px #a00;  
  border-radius: 10px; 
  border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; 
  border-bottom: 1px solid #F00;
  border: none;
  display: inline-block;
  padding: 15px 80px; 
  text-decoration:none;
  font-size: large;
}

このボタンはブラウザ上では次のように表示されます。この画像のように左から薄い赤から濃い赤にグラデーションするような見た目になっています。

またbuttonタグに同じスタイルを適用した場合は次のようになります。

ちなみにグラデーションを入れない場合は次のようにフラットな見た目のボタンになります。フラットデザインのサイトにはこっちのボタンの方が良いかもしれません。

ボタンをクリックしたときの動作を追加する

こういう立体的なボタンを作ってもクリックしたときに何の動作がないと味気ないです。そこで仕上げとして次のようなactive疑似クラスを追加します。

.btn_3d:active, 
{
    box-shadow: 0px 0px 0px #a00; 
    transform: translateY(9px);
}

active疑似クラスを定義するとクリックしたときにその疑似クラス内で定義したスタイルが適用されます。

まずクリックされたときにbox-shadowを消します。しかしそれだと影がなくなるだけでボタンを押したという感じがありません。

そこでtransform属性にtranslateX関数を渡すことで消えた影の長さ分の9pxだけ下方向にボタンを移動しています。これで実際にボタンを押すという動作を再現することが可能です。

以下がコードと実行例です。実際にボタンを押すとどのように動くのかが分かります。

See the Pen CSSだけでクリックできる立体ボタン by kaz1503 (@kaz1503) on CodePen.dark

以上CSSでグラデーション有りの立体的なボタンを作る方法について解説しました。読者がクリックしたくなるようなボタンを作ってみてください。

The post CSSでグラデーション有りの立体的なボタンを作る方法 first appeared on Fukuro Press.

要素を大きくしたり色を徐々に変えたりするなどのアニメーションをする場合はjQueryを使ってスクリプトから要素を操作する以外にCSSだけでアニメーションさせることも可能です。

どうやるかというとCSS3から追加されたanimationプロパティを使います。このプロパティを使うと要素がクリックされたり、ホバーされたりした場合にアニメーション効果をつけることができます。

animationプロパティを使えばただのリンクボタンではなく、クリックやホバーでアニメーションしながら拡大縮小する読者の目を引くようなボタンが作れます。その作り方をここでは解説します。

必要なCSS知識

アニメーションプロパティについて

アニメーションを設定するには@keyframesという@規則で定義されたアニメーション名をanimation-nameプロパティに、アニメーションする時間(秒)をanimation-durationプロパティに渡します。

button
{
  animation-name: button_anime;
  animation-duration: 3s;
}

@keyframes button_anime { from { background-color: rgba(0, 255, 0, 0.7); } to { background-color: rgba(0, 0, 255, 0.7); } }

@keyframesではfromに開始時のスタイル、toブロックの中に終了時のスタイルを記述します。fromは0%、toは100%に置き換えることも可能です。

上のCSSをボタンなどに適用すると次のようにボタンの背景色が変化します。以下の例ではリピート設定が有効になっていますが、何も設定しない場合は一回しかアニメーションは起こりません。

See the Pen NyQMEE by kaz1503 (@kaz1503) on CodePen.dark

transfromプロパティ

animationプロパティ単独でも大きさや色などのアニメーションは可能ですが、transformプロパティを使うと要素を移動・拡大縮小・回転・傾斜して変形させることができます。

transformプロパティには次の４つの変形関数が渡せます。

• translate(移動関数)
• scale(拡大縮小関数)
• rotate(回転関数)
• skew(傾斜関数)

関数を渡す場合は次のようにtransformプロパティに各関数をスペースで区切って記述します。

transform: translateX(10px) translateY(20px) rotate(20deg);

上の例ではこのtransformプロパティが適用された要素に対してX方向に10px、Y方向に20px、20度回転するという変形が加えられます。

これをアニメーションを定義する@keyframesのfromブロックとtoブロックの中で使えば要素を変形させることが可能です。

アニメーションするリンクボタンの作り方

今まで紹介したアニメーションプロパティとtransformプロパティを利用すればホバー時やクリック時にアニメーションしながら拡大縮小するボタンが作れます。

まず次のようなリンクを作ります。(buttonタグでも可)

<a href="" class="btn">ボタン</a>

次のCSSを適用すると形状がボタンのリンクが作れます。

.btn
{
  background-color: #F33;
  border: none;
  border-radius: 6px;
  padding: 12px 40px;
  display: inline-block;
}

このリンクボタンがマウスなどのホバー時に縮小するアニメーションを適用するのが次のCSSです。

.btn:hover
{
  animation: big 0.1s;
  animation-fill-mode: forwards;
}

@keyframes big 
{
  0% {transform: scale(1); }
  100% {transform: scale(1.1);}
}

:hoverは要素にマウスなどがホバーしたときに適用される疑似クラスです。その疑似クラスに要素が元のサイズから1.1倍になるようにtransformプロパティでscale関数を使って設定しています。

またanimation-fill-modeプロパティにforwardsを渡すことでホバーしている間はアニメーション後の状態を保つようにしています。

次にクリックされたときのアニメーションは次のように定義します。

.btn:active
{
  animation: small 0.1s;
  animation-fill-mode: forwards;
}

@keyframes small 
{
  100% {transform: scale(0.9);}
}

:activeはクリック時やタッチ時などに要素に適用される疑似クラスです。ここではホバーの時とは逆に要素を0.9倍に縮小しています。

ブラウザではこのボタンは次のように動作します。実際にボタンをクリックなどして動作を確かめてみてください。

See the Pen ホバーやクリックするとアニメーションするボタン by kaz1503 (@kaz1503) on CodePen.dark

ここではボタンを拡大縮小していますが、transformプロパティに渡す関数を変えれば面白いアニメーションをするボタンも作れると思います。

以上ボタンのクリック時などにアニメーションを適用する方法を解説しました。読者の興味を引くようなボタンを作ってみてください。

The post クリック・ホバーで縮小拡大するリンクボタンをCSSだけで作る方法 first appeared on Fukuro Press.