すべてのカテゴリ

今日は、昨日考えた自分用の献立・レシピ管理アプリについて、実際に制作をスタートしました。まずは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;  bac