すぐ使えるXD Tips vol.2 - インタラクションをコーディング編｜鹿野壮

Adobe XD Advent Calendar 2019の10日目の記事です。 Adobe XDが作れるのはあくまで「プロトタイプ」です。ウェブページとして完成させるには、XDで作ったプロトタイプをウェブ技術で動作させる必要があります。本エントリーでは、前日のアドベントカレンダーの記事「すぐ使えるXD Tips vol.1 - ホバーのインタラクションをデザイン編」で作られたインタラクションを、HTML・CSSでウェブページとして実現する方法を解説します。 デザインの確認デザインのXDファイルは、前述の記事よりダウンロードできます。 、を再確認しておきましょう。マウスのホバーによって、「通常状態」「ホバー状態」の2つのデザインが切り替わるようなインタラクションです。 通常状態のコーディングまずは通常状態のコーディングをします。 HTMLコードはbuttonタグを使って次のように記述すれば