チャットGPTを使ってみました。
非常に便利です。チャットGPTに質問するだけで夕食の献立を教えてくれます。コードは下部に公開します。<!DOCTYPE html><style> body { background-color: skyblue; } /* スクロールバーの色を赤に変更 */ ::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: red; }</style><html> <head> <meta charset="UTF-8"> <title>ランダムな料理名と調理レシピを表示する</title> </head> <body> <h1>何を作るか迷ったら</h1> <button onclick="showRandomRecipe()">ランダムに料理を表示する</button> <div id="recipe-container"></div> <script> function showRandomRecipe() { // 料理名とレシピのリスト const recipes = [ { name: "<span style='color:red'>チキンカツ</span>", recipe: "1. 鶏肉を薄くたたく\n2. 塩こしょうで下味をつける\n3. パン粉をつける\n4. オリーブオイルで揚げる" }, { name: "<span style='color:red'>から揚げ</span>", recipe: "1. 鶏肉を一口大に切る\n2. 塩こしょうで下味をつける\n3. 片栗粉をまぶす\n4. オリーブオイルで揚げる" }, { name: "<span style='color:red'>ハンバーグ</span>", recipe: "1. 牛肉・豚肉をミンチにする\n2. 玉ねぎをみじん切りにして炒める\n3. パン粉・卵・牛乳・塩こしょうを加えて混ぜる\n4. ハンバーグに成形して焼く" },{ name: "<span style='color:red'>豚肉の生姜焼き</span>", recipe: "1. 薄切りの豚肉に、しょうが、にんにく、酒、醤油で下味をつける\n2. フライパンに油を敷いて、豚肉を焼く\n3. 焼き色がついたら、みりんと醤油で味付けする\n4. ごまを振って完成" }, { name: "<span style='color:red'>鮭のムニエル</span>", recipe: "1. 鮭の切り身に塩こしょうをふり、片栗粉をまぶす\n2. フライパンに油を敷いて、鮭を皮目から焼く\n3. 焼き色がついたら、裏返してもう一度焼く\n4. バターを加え、レモン汁で味付けする\n5. パセリを散らして完成" }, { name: "<span style='color:red'>オムレツ</span>", recipe: "1. 卵をボウルに割り、塩こしょうで下味をつける\n2. フライパンに油を敷いて、卵を流し入れる\n3. 焼き色がついたら、具材（ハム、チーズ、ツナなど）をのせる\n4. ひっくり返して、もう一度焼く\n5. お好みでケチャップをかけて完成" }, { name: "<span style='color:red'>サラダ</span>", recipe: "1. 野菜を洗って切る\n2. ドレッシングをかける" }, { name: "<span style='color:red'>パスタ</span>", recipe: "1. パスタを茹でる\n2. トマトソースを作る\n3. パスタとソースを和える" }, { name: "<span style='color:red'>カレーライス</span>", recipe: "1. 玉ねぎをみじん切りにする\n2. 豚肉を炒める\n3. カレールーを加えて溶かす\n4. 煮込んで完成" },{ name: "<span style='color:red'>焼きそば</span>", recipe: "1. もやし・キャベツ・人参などの野菜を切る\n2. 豚肉を炒める\n3. めんを茹でてざるに上げる\n4. ソースで炒める" }, { name: "<span style='color:red'>納豆ご飯</span>", recipe: "1. ご飯を炊く\n2. 納豆を混ぜる\n3. 味付けをする\n4. 青ネギやワカメを加える" }, { name: "<span style='color:red'>ポテトサラダ</span>", recipe: "1. じゃがいもを茹でる\n2. にんじんを千切りにする\n3. キュウリをスライスする\n4. マヨネーズと混ぜる" },{ name: "<span style='color:red'>焼き魚</span>", recipe: "1. 魚を焼く\n2. 塩を振る" }, { name: "<span style='color:red'>おでん</span>", recipe: "1. 大根・卵・こんにゃく・牛すじ肉を煮る\n2. 味付けはお好みで" }, { name: "<span style='color:red'>トマト煮込み</span>", recipe: "1. トマトを煮る\n2. 塩こしょうで味を整える" }, { name: "<span style='color:red'>豚汁</span>", recipe: "1. 豚肉を一口大に切る\n2. 野菜をざく切りにする\n3. 鍋に水を入れて沸騰させ、野菜を入れて煮る\n4. 豚肉を加えて煮る\n5. 味噌を溶かして加える" }, { name: "<span style='color:red'>シチュー</span>", recipe: "1. 野菜を一口大に切る\n2. 牛肉を一口大に切る\n3. 鍋にバターを入れて野菜を炒める\n4. 牛肉を加えて炒める\n5. 小麦粉を加えて炒める\n6. 牛乳を加えて煮る\n7. 味を調える" }, { name: "<span style='color:red'>ポークジンジャー</span>", recipe: "1. 薄切り豚肉に片栗粉をまぶす\n2. 豚肉をフライパンで焼く\n3. 薄切りにしたしょうがを加えて炒める\n4. 酒・しょうゆ・みりんを加えて味を調える" }, { name: "<span style='color:red'>焼き肉</span>", recipe: "1. 牛肉・豚肉を用意する\n2. 塩こしょうで下味をつける\n3. 鉄板や網で焼く\n4. 前菜としてレタスを添える" }, { name: "<span style='color:red'>やきとり</span>", recipe: "1. 鶏肉を切り分ける\n2. たれを作る（しょう油・みりん・酒など）\n3. 串に刺し、網で焼く\n4. 前菜としてキャベツやレモンを添える" }, { name: "<span style='color:red'>刺身</span>", recipe: "1. 魚を用意する\n2. 切り分ける\n3. 醤油やわさびを添える\n4. お好みで大根おろしを添える" },{ name: "<span style='color:red'>すき焼き</span>", recipe: "1. 牛肉を薄く切る\n2. 野菜を切る\n3. 鍋に水・砂糖・みりん・醤油を入れて煮立てる\n4. 牛肉と野菜を入れて煮る" }, { name: "<span style='color:red'>卵かけご飯</span>", recipe: "1. ご飯を炊く\n2. 卵を割ってかき混ぜる\n3. 醤油を加える\n4. 卵をかける" }, { name: "<span style='color:red'>肉じゃが</span>", recipe: "1. じゃがいも・人参・玉ねぎを切る\n2. 豚肉を切る\n3. 鍋に水・酒・みりん・醤油・砂糖を入れて煮立てる\n4. 肉と野菜を入れて煮る" },{ name: "<span style='color:red'>ビーフシチュー</span>", recipe: "1. 牛肉を塩・こしょうで下味をつける\n2. 玉ねぎを炒める\n3. 牛肉・水・赤ワイン・トマトペースト・にんにくを加えて煮込む\n4. 野菜を加えて煮込む" }, { name: "<span style='color:red'>アスパラ巻き</span>", recipe: "1. アスパラガスを茹でる\n2. 塩こしょうをふり、豚肉で巻く\n3. オリーブオイルで焼く" }, { name: "<span style='color:red'>モヤシ炒め</span>", recipe: "1. モヤシを洗って水気を切る\n2. ニンニク・生姜を炒める\n3. モヤシを加えて炒める\n4. 醤油・みりん・酒で味付けする" },{ name: "<span style='color:red'>目玉焼き</span>", recipe: "1. 卵を割る\n2. フライパンに油を引いて熱する\n3. 卵を割いて、白身が固まるまで焼く\n4. 塩・胡椒で味付けする" }, { name: "<span style='color:red'>鮎の塩焼き</span>", recipe: "1. 鮎を下処理する\n2. 魚焼きグリルを熱して鮎を焼く\n3. 両面にこんがりと焼き色がついたら、塩を振って完成" }, { name: "<span style='color:red'>ペペロンチーノ</span>", recipe: "1. パスタを茹でる\n2. フライパンにオリーブオイル・にんにく・唐辛子を入れて熱する\n3. 茹でたパスタを加え、フライパンでからめる\n4. 塩・胡椒で味付けし、仕上げにパルメザンチーズをかける" } ]; // ランダムな料理を3つ選択する let randomIndexes = []; while (randomIndexes.length < 3) { const randomIndex = Math.floor(Math.random() * recipes.length); if (!randomIndexes.includes(randomIndex)) { randomIndexes.push(randomIndex); } } const randomRecipes = randomIndexes.map(index => recipes[index]); // レシピを表示する const recipeContainer = document.getElementById("recipe-container"); recipeContainer.innerHTML = ` <h2>${randomRecipes[0].name}</h2> <p>${randomRecipes[0].recipe}</p> <h2>${randomRecipes[1].name}</h2> <p>${randomRecipes[1].recipe}</p> <h2>${randomRecipes[2].name}</h2> <p>${randomRecipes[2].recipe}</p> `; } </script> </body></html>
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
