-Mobile&Pc-L3-
-HTML-
秋です…さつまいもで満腹になりましょう?
Home
Things
About
Recipe
This month's sweet potato recipe
さつまいもパイ
1)オーブンは180℃に予熱する
2)りんごは4等分に切って芯を取り、小さく切る。耐熱容器に入れてふんわりとラップをし、600Wのレンジで4分加熱して冷ます。
3)さつまいもの皮をむき、薄切りにして鍋に入れる。さつまいもが全てかぶるように水を入れて、中火で熱し、竹串が通るやわらかさになるまで10〜15分ゆで、水気を切る。
4)鍋にさつまいもを戻し、木べらで潰しながら弱火で2〜3分熱し、粗熱をとる。ボウルに移し、砂糖、生クリームを加えて混ぜる。
5)再び鍋に移し弱火で混ぜながら、トロッとするまで加熱する。火からおろして、レーズンを加えて混ぜる。(さつまいもクリーム完成)
6)パイシートを常温に5〜10分出して柔らかくする。まな板とパイシートに打ち粉をし、3mm厚さに伸ばす。9等分に切ってシリコンカップに敷く。
7)6にさつまいもクリームを等分に入れ、卵黄を塗る。180℃に予熱したオーブンで20〜30分焼く。
次回のレシピはスイートポテトです
This month's sweet potato
丸ごとさつまいものグラタン
レシピ→
さつまいもの塩キャラメルかけ
レシピ→
さつまいもかりんとう
レシピ→
さつまいものペースト
レシピ→
-CSS-
* { margin: 0; padding: 0; } a { display: block; text-decoration: none; color: black; } span { font-size: 12px; } img { width: 100%; height: 100%; object-fit: cover; } ul { list-style: none; } h2 { margin: 10px 0 20px; } #wrap { width: calc(100% - 20px); padding: 0 10px; font-family: 'Kiwi Maru'; font-size: 14px; } /*--------- header ---------*/ header { height: 98vh; position: relative; background: url(images/bord.jpg) no-repeat right -110px top / cover; box-shadow: inset 0 0 70px 20px white; } header p { display: none; } header img { width: 226px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-90deg); } header button { width: 70px; height: 70px; background: #603813; border: none; position: absolute; top: 0; right: 0; } header button i { font-size: 3em; color: white; } header button i:last-of-type { display: none; } header nav ul { display: none; } header nav ul { width: 100%; height: 600px; background: #603813; } header nav ul li { position: relative; top: 20%; left: 0; line-height: 5; text-align: center; } header nav ul li:hover a { background: rgba(255,255,255,0.3); text-decoration: underline; color: #f9ea4f; } header nav ul li a { color: white; font-size: 20px; } /*--------- main ---------*/ section { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; } section h2 { width: 100%; font-family: 'Cherry Bomb One'; font-size: 32px; } section:first-of-type p:first-of-type { width: 30%; max-width: 200px; } section:first-of-type dl { width: calc(70% - 30px); margin-bottom: 27px; padding: 0 10px 10px 20px; } section:first-of-type dt { border-bottom: solid 1px red; font-family: 'Cherry Bomb One'; } section:first-of-type dd { margin-top: 5px; } section:first-of-type p:last-of-type { width: 100%; margin-bottom: 30px; text-indent: calc(3% + 170px); position: relative; } section:first-of-type p:last-of-type:before { content: ""; display: inline-block; width: 170px; height: 14px; background: url(images/yajirusi.png) no-repeat center center / 90%; position: absolute; top: 5px; left: 3%; } section:last-of-type > div { width: 50%; max-width: 280px; margin-bottom: 10px; } section:last-of-type > div > div { padding: 10px 0; text-align: center; } section:last-of-type > div > div > p:last-of-type { padding: 10px 15px 5px 0; text-align: right; } section:last-of-type > div > p:first-of-type { overflow: hidden; } /*--------- footer ---------*/ footer { margin-top: 10px; text-align: center; line-height: 60px; background: url(images/bord.jpg) no-repeat center center / cover; box-shadow: inset 0 0 20px 10px #fff; font-size: 10px; } /*--------- MediaQuery ---------*/ @media screen and (min-width: 601px) { header { height: 300px; background-position: left top; } header p { display: block; position: absolute; top: 50%; left: 36%; font-family: 'Potta One'; font-size: min(3vw,26px); } header img { left: 20%; } header button { display: none; } header nav ul { display: flex; width: 80%; max-width: 800px; height: 60px; background: transparent; position: absolute; top: 0; right: 0; } header nav ul li { width: 25%; max-width: 200px; line-height: 60px; position: static; } section:first-of-type p:first-of-type { max-width: 388px; } section:first-of-type dl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; height: 250px; overflow: scroll; } section:first-of-type dt { width: 100%; } section:first-of-type dl dd { width: 49%; } section:last-of-type > div { box-shadow: 5px 5px 3px rgba(0,0,0,0.25); } } @media screen and (min-width: 861px) { section { justify-content: space-between; } }
-jQuery-
$(function(){ $('button').on('click',function(){ $(this).next('ul').slideToggle(); if($(this).hasClass('on')){ $(this).children('.fa-xmark').css('display','inline'); $(this).children('.fa-bars').css('display','none'); $(this).removeClass('on'); } else { $(this).children('.fa-xmark').css('display','none'); $(this).children('.fa-bars').css('display','inline'); $(this).addClass('on'); }; }); $(window).on('load ready resize',function(){ if($(window).width() > 600){ $('ul').css('display','flex'); } else { $('ul').css('display','none'); } }); });