続きを読む
絶対やってほしい！デザインスキルを効率的に上げる方法
バナーなどのデザインを作ったときに「なんだかしっくりこない」や「なんだかダサい」と思ったことがあるの...
WEB DESIGN
続きを読む
スマホ/タブレット/パソコンで別々の画像を振り分けて表示させる
ウェブデザインではスマートフォンは基本的に縦型のディスプレイ、パソコンは基本的に横型のディスプレイと...
続きを読む
MixItUpを使ってアニメーションのあるページ内フィルターを作る
超高性能フィルターが作れるMixItUpを実装してみましょう。 MixItUpはページ内ソートができ...
続きを読む
どっちをいつ使う？visibility: hidden;とdisplay: none;の違いと適切な使い方
visibility: hidden;とdisplay: none;はどちらも要素を表示しないように...
続きを読む
videoタグにautoplayを指定しても動画が自動再生されないときの対処法
ウェブサイトに動画を埋め込んだけどスマートフォンで自動再生されない…なんてときは、ブラウザに対応した...
続きを読む
真夏にぴったりな恐怖演出ボタンを作る
真夏なので、いつものウェブサイトを恐怖の谷底に落としてみましょう。 恐怖演出する 恐怖演出中 ユーザ...
続きを読む
バーをアニメーションさせてテキストを表示する
バーがアニメーションしてテキストが表示されるエフェクトを作ってみましょう。 こういったエフェクトは見...
続きを読む
スクロールして表示領域に入ったらアニメーションするプログレスバーを作る
スクロールして表示領域(=ビューポート)に入ったらアニメーションされるプログレスバーを作ってみましょ...
続きを読む
slick.jsを使ってスライドショーを作る
slick.jsを使ってスライドショーを作ってみましょう。 slick.jsはスピードやアニメーショ...
続きを読む
smooth-scroll.jsを使ってスムーススクロールさせる
jQueryライブラリのsmooth-scroll.jsを使って、ページ内リンクをスムーズスクロール...