タグ: JavaScript

CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法

ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。
続きを読む

Webサイトをダークモードに対応させよう

ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します!
続きを読む

メールアドレスを指定できるmailtoリンクの設定方法や便利なスクリプト

多くのWebサイトでお問い合わせにはフォームを設置しているかと思います。入力ミスのチェックなど機能のついたものも多いのですが、初心者の方には設置のハードルが高く感じるかもしれません。そんな時は手軽に導入できるmailtoリンクを使ってみましょう。リンクをクリックするとユーザーがいつも使っているメールアプリが起動するので、送信元のメールアドレスを入力する手間も省けますよ。懸念されやすい迷惑メールの対策をしているスクリプトも紹介します!
続きを読む

clipboard.jsでテキストをクリップボードにコピーする方法

以前Vue.jsでカラーコードからRGB値にサクッと変換する方法という記事で紹介した、「Quick HEX to RGB」では、値をクリックすればクリップボードにコピーする機能をつけています。これはclipboard.jsを使っているので、基本的な使い方と、あまり説明のないツールチップの加え方を紹介します。
続きを読む

Vue.jsでカラーコードからRGB値にサクッと変換する方法

色関連の解説をしたり、記事を書く時に、カラーコードのRGB値をダーッと一覧で見たい!という機会がちょこちょこありまして。グラフィックツールや既存のWebサイトでもできますが、もっとサクサク進めたくなって「Quick HEX to RGB」というツールを作りました。Vue.jsを使ってみたので、制作方法をかいつまんで紹介します。

続きを読む

JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現

Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください!
続きを読む

WebデザイナーのためのVue.js事始め

Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね!
続きを読む