続きを読む
どっちをいつ使う？visibility: hidden;とdisplay: none;の違いと適切な使い方
visibility: hidden;とdisplay: none;はどちらも要素を表示しないように...
WEB DESIGN
続きを読む
videoタグにautoplayを指定しても動画が自動再生されないときの対処法
ウェブサイトに動画を埋め込んだけどスマートフォンで自動再生されない…なんてときは、ブラウザに対応した...
続きを読む
真夏にぴったりな恐怖演出ボタンを作る
いつものウェブサイトを恐怖の谷底に落としてみましょう。 恐怖演出する 恐怖演出中 ユーザビリティの観...
続きを読む
バーをアニメーションさせてテキストを表示する
バーがアニメーションしてテキストが表示されるエフェクトを作ってみましょう。 こういったエフェクトは見...
続きを読む
スクロールして表示領域に入ったらアニメーションするプログレスバーを作る
スクロールして表示領域(=ビューポート)に入ったらアニメーションされるプログレスバーを作ってみましょ...
続きを読む
slick.jsを使ってスライドショーを作る
slick.jsを使ってスライドショーを作ってみましょう。 slick.jsはスピードやアニメーショ...
続きを読む
smooth-scroll.jsを使ってスムーススクロールさせる
jQueryライブラリのsmooth-scroll.jsを使って、ページ内リンクをスムーズスクロール...
続きを読む
Font Awesomeを使って外部リンクのみに特定のアイコンを自動で付ける
target=”_blank”を使って外部リンクをするときのみ、リンクの後ろ...
続きを読む
リンクをクリックしたらスクリーンを表示させてページを遷移する
リンクをクリックして他のページに遷移をするときにカーテンのようなスクリーンを表示させるリッチな演出を...
続きを読む
全ウェブデザイナー必見！デジタル庁から学ぶデザインプロセス
2023年6月現在、マイナンバーカードのトラブルで何かと世間を賑わせているデジタル庁ですが、Qiit...