ボタンの作り方

今回のステップでは複数パターンの基本的なボタンのコーディング方法について学んでいきます。

ボタンのコーディングは、STEP1からSTEP3までの段階で進めていきます。

STEP1：ボタンのコーディング

Step1では、下記の図のボタンをコーディングし、ボタンがどのように作られるかを学んでいきます。

コーディング

Step2では、ホバー(hover)について学んでいきます。

ホバー(hover)
ウェブサイトやアプリケーション上で、マウスカーソルを特定の要素の上に置いたときに起こる反応や動きのことを指します。

例えば、ボタンにカーソルを置くと色が変わったり、リンクにカーソルを置くと下線が表示されたりすることです。

これを「ホバーエフェクト」と呼び、ユーザーがどの部分に注目しているかを視覚的に示すためのものです。

ホバー(hover)の実装方法
ホバー(hover)はcssを使用して実装します。「:hover 」を使用して、要素がホバーされたときのスタイル変更を定義します。

それでは実際にコーディングしていきましょう。

コーディング

Step3では、複数パターンのボタンとコーディングの記述について学んでいきます。

複数パターンボタンのデザインがある場合は、CSS設計「BEM」のModifierを意識してコーディングしましょう。

また、以下のコードのようにひとまとまりにしておくと管理しやすくなります。

それでは実際にコーディングしていきましょう。

コーディング

以上が、「ボタンの作り方」についての説明でした。

次のステップで、「開発モードの活用」について説明していきます。

パーツのコーディング

全 2 動画

コーディング実践