Skip to content

コメント追加・新規レシピ追加・コメント欄CSS追加 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
betachelsea wants to merge 1 commit into
base: main
Choose a base branch
from
Open

コメント追加・新規レシピ追加・コメント欄CSS追加 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,11 @@ section.instructions li::before{

/* ========== comments ========== */
section:last-of-type > div{
margin-top: 20px;
margin-top: 12px;
padding: 14px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: #f9fafb;
}

section:last-of-type > div p{
Expand Down
9 changes: 8 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,14 @@ <h2>鶏の照り焼きのレシピ</h2>
<p>フライパンひとつで作れる定食屋さんの味。</p>
</a>
</li>

<li>
<a href="recipes/omurice.html">
<h2>オムライスのレシピ</h2>
<p>ふわふわ卵が主役。失敗しにくい定番オムライス。</p>
</a>
</li>
</ul>
</article>
</body>
</html>
</html>
4 changes: 4 additions & 0 deletions recipes/nikujyaga.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,10 @@ <h2>コメント</h2>
<p>しらたきを後から入れるの、味が濁らなくて良いですね。リピートします。</p>
<p><b>投稿者 高橋健太さん</b></p>
</div>
<div>
<p>じゃがいもがほくほくで、家庭的な味に仕上がりました。翌日もおいしく食べられました。</p>
<p><b>投稿者 山本奈緒さん</b></p>
</div>
</section>
</article>
</body>
Expand Down
85 changes: 85 additions & 0 deletions recipes/omurice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>オムライスのレシピ</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/styles.css">
</head>

<body>
<article>
<h1>オムライスのレシピ</h1>
<p>家で作る定番オムライス。ふわっとした卵と、ケチャップライスのバランスがポイントです。</p>
<p>☆の「ごはんを冷ましてから炒める」と、卵を焼きすぎないことが失敗しないコツです。</p>

<section>
<h2>レシピの作者</h2>
<p>山本アキさん</p>
</section>

<section class="ingredients">
<h2>材料 （ 2人分 ）</h2>
<ul>
<li class="star">温かいごはん 茶碗2杯分</li>
<li class="star">卵 4個</li>
<li class="star">玉ねぎ 1/4個</li>
<li>鶏もも肉 100g</li>
<li>ピーマン 1個</li>
<li>サラダ油 大1</li>
<li>バター 10g</li>
<li class="sub-ingredients">
調味料
<ul>
<li>ケチャップ 大4</li>
<li>塩こしょう 少々</li>
<li>牛乳 大2</li>
</ul>
</li>
</ul>
</section>

<section class="instructions">
<h2>作り方</h2>
<ol>
<li>☆のごはんはバットや皿に広げ、少し冷ましておきます（ベタつき防止）。</li>
<li>玉ねぎ、鶏肉、ピーマンはみじん切りにします。</li>
<li>フライパンにサラダ油を熱し、鶏肉を炒めます。</li>
<li>肉の色が変わったら玉ねぎ、ピーマンを加え、しんなりするまで炒めます。</li>
<li>ごはんを加えてほぐしながら炒め、ケチャップ・塩こしょうを加えて全体を混ぜます。</li>
<li>ケチャップライスを皿に盛り、フライパンを軽く拭きます。</li>
<li>ボウルに卵を割り入れ、牛乳を加えてよく混ぜます。</li>
<li>フライパンにバターを溶かし、卵液を流し入れます。</li>
<li>弱めの中火で混ぜながら半熟状にし、火を止めます。</li>
<li>卵をライスにかぶせ、形を整えて完成。</li>
</ol>
</section>

<section class="tips">
<h2>ポイント</h2>
<ul>
<li>ごはんを少し冷ましてから炒めると、ベタつかずパラッと仕上がります。</li>
<li>卵は火を入れすぎないのが最大のコツ。余熱で十分固まります。</li>
<li>卵液に少量の牛乳を入れると、やわらかさが長持ちします。</li>
</ul>
</section>

<section>
<h2>このレシピの生い立ち</h2>
<p>何度も失敗しがちなオムライスを、家でも安定して作れるように工程を整理しました。特別な道具なしで作れることを重視しています。</p>
</section>

<section>
<h2>コメント</h2>
<div>
<p>ごはんを冷ますだけで、こんなに違うとは思いませんでした！</p>
<p><b>投稿者 小林みほさん</b></p>
</div>
<div>
<p>卵がふわっと仕上がって大成功。子どもにも好評でした。</p>
<p><b>投稿者 田中悠斗さん</b></p>
</div>
</section>
</article>
</body>
</html>