続きを読む
どっちをいつ使う？visibility: hidden;とdisplay: none;の違いと適切な使い方
visibility: hidden;とdisplay: none;はどちらも要素を表示しないように...
ARCHIVES
続きを読む
Adobe謹製のAI画像生成ツール「Firefly」はクリエイターにおすすめ
Adobe Fireflyはクリエイター向けに作られたAIの画像生成サービスで、プロンプトだけでひと...
続きを読む
ChatGPTはもう終わり！GoogleのAIチャット「Bard」が凄すぎるって話
AIを活用したチャットツールとして有名なのが「ChatGPT」ですが、無料のGPT-3.5も有料のC...
続きを読む
videoタグにautoplayを指定しても動画が自動再生されないときの対処法
ウェブサイトに動画を埋め込んだけどスマートフォンで自動再生されない…なんてときは、ブラウザに対応した...
続きを読む
真夏にぴったりな恐怖演出ボタンを作る
いつものウェブサイトを恐怖の谷底に落としてみましょう。 恐怖演出する 恐怖演出中 ユーザビリティの観...
続きを読む
バーをアニメーションさせてテキストを表示する
バーがアニメーションしてテキストが表示されるエフェクトを作ってみましょう。 こういったエフェクトは見...
続きを読む
スクロールして表示領域に入ったらアニメーションするプログレスバーを作る
スクロールして表示領域(=ビューポート)に入ったらアニメーションされるプログレスバーを作ってみましょ...
続きを読む
slick.jsを使ってスライドショーを作る
slick.jsを使ってスライドショーを作ってみましょう。 slick.jsはスピードやアニメーショ...
続きを読む
smooth-scroll.jsを使ってスムーススクロールさせる
jQueryライブラリのsmooth-scroll.jsを使って、ページ内リンクをスムーズスクロール...
続きを読む
Font Awesomeを使って外部リンクのみに特定のアイコンを自動で付ける
target=”_blank”を使って外部リンクをするときのみ、リンクの後ろ...