画像の上にポインタが来た時に、画像を変化させる表現をロールオーバーと言います。ロールオーバーの実装方法はいくつかありますが、CSSの:hoverを使う基礎的な方法をご紹介します。:hoverを使ってマウスオーバー時に表示を切り替える方法基本的なマウスオーバーマウスオーバー時に画像の表示を切り替える基本的な方法としては、２種類の画像を用意し、ポインタがふれてる時とそうでない時で画像を切り替える方法で……
CSSには、文章の折り返しに関するプロパティに２種類あります。word-wrapとword-breakです。似ていて少しややこしいので、使い方を間違わないよう注意が必要です。word-wrapは文章が長くなってしまって折り返しが必要な場合、単語の途中でも折り返すかどうかを指定するプロパティです。対して、word-breakは単語に関わらず行の改行についての指定を行うプロパティです。今回は、word……
サイトのアクセシビリティを改善したい場合、新たな機能を追加したり、アクセシビリティ改善用に新たにコンテンツを複製する必要はありません。重要なのは、自分たちのサイトやコンテンツをデザインする際に、ユーザーによってはアクセス可能なデバイスが限られていることや、見たり読んだりする能力に違いがあるということをしっかりと理解することです。サイトを１から作る場合、アクセシビリティの高いものを作ったとしても、そ……
近年アプリ制作者の間では、UIだけでなくアプリのUXを検証すべく、プロトタイピングツールの需要が年々高まっています。国内ではPrott、国外ではInvisionやPixate、Flintoなどがありますが、最近だとAdobeもAdobe XDというツールを発表するなど、大手も積極的に業界に参戦しています。 そんな中、Facebookの開発者向けイベント「F8」にてFacebookのプロトタイ……
Google Apps Scriptでスプレッドシートを操作する時に基本となるセルの取得と書き換えについて説明します。 【Google Apps Script入門】 第１回 Google Apps Scriptとは？ 第２回 スクリプトエディタの基本操作 第３回 セルの取得・変更をする スプレッドシートを操作する基本 Google Apps Scriptでセルを操作するには、以下のような手順が必……
Google Apps Scriptのコードを書くことができるスクリプトエディタの使い方を説明します。スクリプトエディタの基本操作と、Google Apps Script独自のオブジェクトを覚えれば、あとは通常のJavaScriptと大きな差はなくコーディングすることができます。 今回は、Googleスプレッドシートからスクリプトエディタを使う例を紹介していきます。 【Google Apps ……
Googleスプレッドシートを使って毎日のKPI管理をしている時などに使うと便利な「Google Apps Script」の基礎と使い方について説明していきます。 【Google Apps Script入門】 第１回 Google Apps Scriptとは？ 第２回 スクリプトエディタの基本操作 第３回 セルの取得・変更をする Google Apps Scriptとは Google Apps ……
デザインという言葉は今日では一般的ですが、デザインという言葉がなかったような過去の古典美術の世界でもデザインの概念はありました。絵画というと、デザインというよりファインアートの印象が強いですが、過去の画家たちから学ぶことも多くあります。そこで、今回は古典絵画から学ぶデザインについて説明します。 絵の情報量 モチーフの置き方で変化するもの こちらに2枚の絵があります。 Aは木の隣に猫がいます。Bは……
任意の文字列を特定の区切り文字で複数の文字列に分解したい場合には、JavaScriptではsplit関数を使用します。関数を実行した結果は、文字列の配列として返されます。返される文字列には指定した区切り文字は含まれません。split関数の使い方split関数の書式は以下の通りです。分割したい文字列.split(["区切り文字"[, 分割する最大数]])「区切り文字」には、文字列、正規表現を指定する……
文字列に含まれている特定の文字列を置換する場合にはreplace関数を使用します。replace関数は特定の文字列または正規表現のパターンで指定された文字列を特定の文字列または関数を使用して作成された文字列で置き換えることができます。関数の結果としては、置換された文字列が返されます。replace関数の使い方replace関数の書式は以下の通りです。置換対象を含んだ文字列.replace(置換対象……