すべてのカテゴリ

本日も、自分用に作成している**献立・レシピ管理ツール**の制作を進めました。今回は主に、レシピ一覧画面のカテゴリー機能を整えています。## カテゴリーごとに色分け一覧画面には、* すべて* 主菜* 副菜* 汁物* ご飯・麺のカテゴリーを用意しました。選択中のカテゴリーだけ色が付くようにし、どのカテゴリーを表示しているのか分かりやすくしています。また、レシピカード内のカテゴリータグも同じように色分けしました。例えば、主菜はオレンジ系、汁物はブルー系、ご飯・麺はベージュ系というように、カテゴリーごとに色を変えています。## JavaScriptで絞り込み機能を追加見た目だけではなく、JavaScriptを使って実際にカテゴリーごとにレシピを絞り込めるようにしました。ボタンを押すと、* 選択したボタンに`active`クラスを付ける* その他のボタンから`active`を削除* 選択したカテゴリーと一致するレシピだけ表示* 「すべて」を選択すると全件表示という動きになります。HTMLの`data-filter`と`data-category`を使って、ボタンとレシピカードを対応させています。今回の制作を通して、JavaScriptでクラスを追加・削除する方法や、HTMLに持たせたデータを取得して処理する方法も少しずつ理解できてきました。## レシピ追加ボタンも設置一覧画面には、右下に「＋」ボタンも追加しました。スクロールしても表示されるように`position: fixed;`を使い、ここから新しいレシピを追加できるようにする予定です。次回は、この「＋」ボタンから移動する**レシピ