system
矢口 奈果

2020.4.13HTML/CSS 

Webクリエイター

矢口 奈果

地味に覚えておくと便利！HTMLの小技

こんにちは。Webクリエイターの矢口です。
本日は個人的な備忘録も兼ねて、地味にへ～となったコーディングの小技みたいなものを2例ほど紹介したいと思います。

HTMLをランダムで表示させる方法

ボタンをクリックすると今日の運勢が表示されます。
＜DEMO＞

See the Pen
jObNmNY by Nako (@mr_nako)
on CodePen.

デモではごく簡易的なおみくじを作ってみました。
サイトのメインビジュアルなどをランダム表示させたい！という時などにもおすすめです。

 

ちなみに先ほどテストしたら三回連続大吉が出たので、今週いっぱいは口内炎ができないと思います。

 

グラデーションの背景にtransitionを効かせる方法

それぞれのボタンにマウスオーバーしてください。
＜DEMO＞

See the Pen
JjYPJgL by Nako (@mr_nako)
on CodePen.

background: linear-gradientにはtransitionプロパティが効かないため、hoverの動きがカクついてしまいます。
そこで、背景色を疑似要素+positionプロパティで重ねて置き、opacityによって色を切り替えます。
opacityにはtransitionが有効なので、綺麗に切り替わってくれます。

 

個人的に勉強になったので嬉しかったのですが、これを実装した後「でもグラデーションのボタンはそうそう使わないかな！」と言われました。

 

いかがでしたでしょうか。
地味だけどこの先絶対使わないとも言えない…という絶妙なラインの技だと思います。
気になった方はぜひ試してみてくださいね。

それでは口内炎が痛いのでこのへんで。

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら

スタッフおすすめの記事

ページTOPへ