【Web制作学習】献立・レシピ管理ツールの制作を進めました

本日も、自分用に作成している**献立・レシピ管理ツール**の制作を進めました。

今回は主に、レシピ一覧画面のカテゴリー機能を整えています。

## カテゴリーごとに色分け

一覧画面には、

* すべて

* 主菜

* 副菜

* 汁物

* ご飯・麺

のカテゴリーを用意しました。

選択中のカテゴリーだけ色が付くようにし、どのカテゴリーを表示しているのか分かりやすくしています。

また、レシピカード内のカテゴリータグも同じように色分けしました。

例えば、

主菜はオレンジ系、汁物はブルー系、ご飯・麺はベージュ系

というように、カテゴリーごとに色を変えています。

## JavaScriptで絞り込み機能を追加

見た目だけではなく、JavaScriptを使って実際にカテゴリーごとにレシピを絞り込めるようにしました。

ボタンを押すと、

* 選択したボタンに`active`クラスを付ける

* その他のボタンから`active`を削除

* 選択したカテゴリーと一致するレシピだけ表示

* 「すべて」を選択すると全件表示

という動きになります。

HTMLの`data-filter`と`data-category`を使って、ボタンとレシピカードを対応させています。

今回の制作を通して、JavaScriptでクラスを追加・削除する方法や、HTMLに持たせたデータを取得して処理する方法も少しずつ理解できてきました。

## レシピ追加ボタンも設置

一覧画面には、右下に「＋」ボタンも追加しました。

スクロールしても表示されるように`position: fixed;`を使い、ここから新しいレシピを追加できるようにする予定です。

次回は、この「＋」ボタンから移動する**レシピ追加画面**を作成していきます。

料理名・カテゴリー・写真・元レシピURL・材料・メモなどを入力できるフォームを作り、最終的にはPHPとMySQLを使って保存できるようにしていきたいと思います。

↓↓まだ余白調整が終わってませんがデザインはこんな感じです！！