【Web制作学習】献立・レシピ管理アプリ制作をスタートしました

今日は、昨日考えた自分用の献立・レシピ管理アプリについて、実際に制作をスタートしました。

まずはMAMPを使ってローカル環境を立ち上げ、htdocsの中に今回のアプリ用フォルダを作成。

そこから、最初の画面となる**「My Recipe」のレシピ一覧画面**をHTML・CSSで作り始めました。

まずはレシピ一覧画面から制作

最初に作ったのは、登録したレシピを一覧で確認する画面です。

今回の一覧では、

カテゴリー

料理名

材料の一部

料理写真

をカード形式で表示するデザインにしました。

材料はすべて表示すると長くなってしまうため、一覧画面ではニュース記事の抜粋のように、途中まで表示する予定です。

詳細な材料については、今後作成するレシピ詳細画面で確認できるようにします。

横長のカードデザインに

スマートフォンでも料理を探しやすくするため、カードは

左側に料理情報、右側に写真

という横長レイアウトにしました。

CSSではdisplay:flex;を使って、文字部分と画像部分を横並びにしています。

画像には、

object-fit: cover;

を指定。

これによって、元の写真の縦横比を崩さずに、決めたサイズの中へきれいに表示することができます。

また、カードには角丸と薄い影を付けて、少しアプリらしい見た目になるように調整しました。

カテゴリーをタグ風に表示

料理のカテゴリーである「主菜」は、普通の文字ではなくタグのようなデザインにしています。

.recipe-category{

  display:inline-block;

  font-size:14px;

  padding:5px 10px;

  color:#fff;

  background:black;

  border-radius:20px;

}

display:inline-block;を使うことで、文字の大きさに合わせて背景色を付けられるようになります。

border-radiusを使い、丸みのある小さなラベルにしました。

今後、アプリ全体のテーマカラーが決まったら、現在の黒から別の色に変更しても良さそうです。

CSSが反映されないトラブルも

制作途中で、カテゴリーのCSSを書き換えても見た目が変わらない場面がありました。

最初はセレクタの書き方を確認しましたが、最終的にはブラウザ側が更新されていなかったことが原因でした。

Web制作ではコードが間違っていなくても、

「保存されているか」

「ブラウザが最新の状態になっているか」

を確認することも大切だと改めて感じました。

現在のレシピ一覧画面

現在は、ダミーデータとして「鶏の照り焼き」を3件並べて、カードが複数表示されたときのバランスを確認しています。

画面上部には「My Recipe」というタイトルを配置し、その下にレシピカードが縦に並ぶ構成です。

まだ機能は付いていませんが、まずはHTML・CSSで画面の土台を作っています。

完成後は、この部分をPHPとMySQLにつなげて、

データベースに登録した料理を自動で一覧表示する

仕組みにしていく予定です。

次回やりたいこと

次回は、レシピ一覧画面をもう少し完成形に近づけていきたいと思います。

予定しているのは、

カテゴリーによる絞り込み

レシピ追加ボタン

スマートフォン表示の調整

レシピカードをタップして詳細画面へ移動する仕組み

などです。

まずは見た目を整え、そのあとレシピ追加画面やPHP・MySQLとの連携へ進んでいく予定です。

まとめ

昨日は「こんなアプリが欲しい」というアイデアを整理するところから始まりましたが、今日は実際にMAMPを使って制作を開始することができました。

これまでのホームページ制作と同じように、最初はHTML・CSSで画面を作っていますが、今後はPHPやMySQLを使って、

登録する・保存する・表示する・献立へ追加する

というWebアプリならではの機能を実装していきます。

まだ最初の一歩ですが、自分が実際に使いたいアプリなので、少しずつ完成させていきたいと思います。