手作りピザの作り方とCSS

-
手作りピザの作り方とCSS

手作りピザの作り方

crast
crast

伸ばす

punch
punch

フチを作って、フォークで貫通しない穴を作る。穴を開けてはダメ。

cut
cut

焼き上がってからピザカッターが入りやすいように包丁の刃の裏などで切れ目を入れる。

pizza
pizza

焼き上がり！ボナペティ～

生地が堅く焼き上がっているため、上下左右の切れ込みが無いと、ピザカッターで切るときに勢い余って飛んでいくことも。皿から飛んで行き床に何度か落としたこともある。

トマトソース

トマトソースはトマト缶を煮込んで水分飛ばすだけ。玉ねぎの粗みじん切り、ニンニクも入れると美味しい。弱火で30分ほど煮込めば水分が飛んでマグマのように噴火したみたいになる。調味料は塩、オレガノ、バジルだけ。保存性を高めるために少量の唐辛子（出来れば粉の韓国産。中国産よりも辛さ控え目な種類が多いため。）

生地

生地は300gの強力粉、砂糖とドライイーストをそれぞれ5gづつ、水140ml、水と強力粉の分量は水が常に半分以下が失敗が少ない。粉を足して調節出来る。5分くらい捏ねて、水分の多い生地が手にくっつかなくなったらOK。手に付く生地がある場合は粉を足して一つに纏まるように捏ね続ける。
30分程発酵させ、一度ガス抜きをするために少しこねる。このときも水分が生地の表面に出てくるので、粉を振り手につかないようにする。もう一度発酵とガス抜きをし、150gづつに切り分ける。

焼き上げ

温度は高い方が早く焼き上がるが、家庭用オーブンレンジの250℃で25~30分程。焼き上がりから15分程すると、ピザだ！と分かるくらいの香りがし始めると思うのでここからはしばらく焼き上がりを見つめるといいでしょう。この辺りは使用するオーブンで違ってくるので、見極めるまで数回焼いてみるといいと思う。

Footer Plactice

===================

ここからCSSの練習メモ

===================

CSS and HTML form

CSS attribute selector don't need whitespace. If whitespace is added, attribute selector doesn't work at all.

 input [type=text] : hover {
 background-color: lightgreen;
}
This is not work properly.


 input[type=text]:focus {
 background-color: lightblue;
}
This wil work properly.

hover here

div.ho p {
 vertical-align: middle;
 line-height: 10px;
 display: inline-block;
         }
中心に持って行きたい<p>のCSSに加える。
<div>ではダメ。

tutorial background fixed-links

transition: width 2s; height 4s;
tarnsition-timing-function:
transition + transform 

img {
 display: block;
 margin-left:auto;
 margin-right: auto;
 height: 180px;
 width:250px;
 transition: width 1.2s, height 1.2s;
}
img:hover {
 width:80%;
 height: 80%;
}
CSS transition property

transition: property| duration |timing-function |delay;

display: block; margin-left: auto; margin-right: auto; でimageを真ん中に持ってくる。
<img>であるから縦か横の幅指定はどちらでもいいが、transitionさせたいので縦横共にpixelで指定。
transition: width 1.2s, height 1.2s; transitionは変化前のelementに入れる。
img:hover にtransition後の大きさを指定。ここでは、width: 80%; height: 80%;

animated search input:

#search[type=text]をtext=typeとtyping error
type miss は和製英語、typing error, typoが正しい。

CSS Image Gallery

crast
crast

伸ばす

punch
punch

フォークで貫通しない穴を作る。

cut
cut

焼き上がってからピザカッターが入りやすいように包丁の刃の裏などで切れ目を入れる。

焼き上がってからピザカッターが入りやすいように包丁の刃の裏などで切れ目を入れる。

pizza
pizza

焼き上がり！ボナペティ～

生地が堅く焼き上がっているため、左右の切れ込みが無いと、ピザカッターで切るときに勢い余って飛んでいくこともある。皿から飛んで行き床に何度か落としたこともある。

 div.gallery {
  margin: 5px;
  border:1px solid black;
  /*float: left;*/
  width:320px;
  height:auto;
  transition:width 1s, height 1s;
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.5);
 }
 img.ho {
  width: 100%;
        height: auto;
  transition:width 2s ease 0.5s, height 2s ease 0.5s;
 }

 /*img.ho:hover,*/div.gallery:hover {
  width: 55%;
  height: auto;
 }
 img.ho:hover {
  width: 100%;
  height:auto;
 }
 div.desc {
  text-align: center;
  padding:10px;
 }

.gallery:hover で枠、img.ho:hover でimgを拡大。
この2つは必ず分けて、.gallery:hover で全体の大きさ、img.ho:hover はwidth: 100%; height: auto; が意図したような感じになった。

最初はimg:hoverだけにtransitionを付けたが、imgだけが拡大されたり、スムーズな動作ではなかったのでtransition-duration を調整。さらに、transition-delay でimgの開始動作を遅らせほぼ完成。.gallery:hover img:hoverを分けることでimgがcursorの位置によって拡大率が変化するのを防いだ。


CSS transition-timing-function examle CSS animation-timing-function example

body {
 counter-reset: link;
}
a::before {
 counter-increment: link 1;
 content: counter(link, upper-roman)"- ";
}

counter-reset: link; link(variables name/変数の名前)、counter-increment: link 1; 変数link とその数え方・数列のステップのようなもの。
content: counter(link)"-"; <a href="url" の前に"counterで数えた大文字のローマ数字- (whitespace)" を代入。

CSS Counters
counter-reset property

  1. item
  2. item
    1. item
    2. item
    3. item
      1. item
      2. item
      3. item
    4. item
  3. item
  4. item
  1. item
  2. item
    1. item
    2. item

ページ冒頭の練習

手作りピザの作り方

crast
crast

伸ばす

punch
punch

フチを作って、フォークで貫通しない穴を作る。穴を開けてはダメ。

cut
cut

焼き上がってからピザカッターが入りやすいように包丁の刃の裏などで切れ目を入れる。

pizza
pizza

焼き上がり！ボナペティ～

生地が堅く焼き上がっているため、上下左右の切れ込みが無いと、ピザカッターで切るときに勢い余って飛んでいくことも。皿から飛んで行き床に何度か落としたこともある。

トマトソース

トマトソースはトマト缶を煮込んで水分飛ばすだけ。玉ねぎの粗みじん切り、ニンニクも入れると美味しい。弱火で30分ほど煮込めば水分が飛んでマグマのように噴火したみたいになる。調味料は塩、オレガノ、バジルだけ。保存性を高めるために少量の唐辛子（出来れば粉の韓国産。中国産よりも辛さ控え目な種類が多いため。）

生地

生地は300gの強力粉、砂糖とドライイーストをそれぞれ5gづつ、水140ml、水と強力粉の分量は水が常に半分以下が失敗が少ない。粉を足して調節出来る。5分くらい捏ねて、水分の多い生地が手にくっつかなくなったらOK。手に付く生地がある場合は粉を足して一つに纏まるように捏ね続ける。
30分程発酵させ、一度ガス抜きをするために少しこねる。このときも水分が生地の表面に出てくるので、粉を振り手につかないようにする。もう一度発酵とガス抜きをし、150gづつに切り分ける。

焼き上げ

温度は高い方が早く焼き上がるが、家庭用オーブンレンジの250℃で25~30分程。焼き上がりから15分程すると、ピザだ！と分かるくらいの香りがし始めると思うのでここからはしばらく焼き上がりを見つめるといいでしょう。この辺りは使用するオーブンで違ってくるので、見極めるまで数回焼いてみるといいと思う。

Footer Plactice

.row::after {display: table; }使うのはtable のrow/列 ってことか。ズレたりするわけだ。
.nav1 a{ display: block;}なのは、box-sizing:border-box; /float:left; /overflow: hidden; と繋がる。

CSS Navigation Bar
CSS Website Layout
CSS Dropdowns 
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.a:hover .dropdown:hover .dropbtn {
 background-color: cornsilk;
}


li.dropdown {
 display: inline-block;
}
.hide1 {
 display: none;
 position: absolute;
 min-width: 180px;
 background-color: cornsilk;
 text-align: center;
 padding: 8px;
 z-index: 1;
}
.hide1 a {
 color: red;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
 float: none;
}
.dropdown:hover .hide1 {
 display: block;
}
この順番やelementは覚えてしまった方が早いかも。毎回時間かかる。

Hierarchy :hάɪ(ə)rὰɚki: 階層、[序列]階層,聖職政治、天使の階級
elliptical 楕円形の

border-top-left-radius:

コメント

コメントを投稿

このブログの人気の投稿

スタートアップフォルダとAmatsukazeのエンコード設定

-
イメージ
スタートアップフォルダとAmatsukazeのエンコード設定 windows + R を押して shell:startup 打ち込めばスタートアップフォルダが出てくる。 今回はネットで調べず、もしかしたらwindows のヘルプも使えるんじゃないかなと思って使ってみたらバッチリだった。 対話型botのヘルプ ショートカットを作成する場合は、エクスプローラのアドレスバーを右クリックしてアドレスをコピーすればOK。 C:\Users\ user name \AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup windws help が意外と使えた。フォルダの名前が前もってわかっているのと、ここにショートカットをコピーすればいいのは知っていたからだが。 AmatsukazeServer のショートカットをここに置きたかった。EDCB で録画後のbatでエンコードする際にウィンドウのフォーカスが奪われてしまうのを防ぐため。 AmatsukazeServer を起動すると通常のAmatsukazeは起動しててもエラーが出るのでAmatsukazeClientを使う。 Amatsukaze のエンコード設定がGUIが独特でビットレート指定を弄っても、aviUtlでエンコードしたときのようにならず苦戦したので、参考に設定を載せておく。 お手軽エンコード設定。1080P TVで離れて見ても違いはわからない程度がNVEnc 2100Kbps くらいだと思う。PCの画面で近くで見るとちょっと劣化してるなぁとは感じる。特にこだわりは無く、h.264 3000Kbps でエンコードしたものと同等くらいの画質だと思う。1800~1500まで落とすとブロックノイズは無くても何か汚いなぁと感じると思う。 30分番組をCMカットして22分程度で380MBくらいのファイルが出来上がる。 TV の画質向上エンジンってすごいなぁと感じる部分でもあります。 -c hevc --profile main10 --vbrhq 2100 --vbr-quality 15 --maxbitrate 15500 --qp-init 15 --gop-len 90 git...
続きを読む

EDCB Recname_MacroのRMで文字削除がうまく行かない

-
EDCB Recname_Macro.dll EDCB Recname_Macro.dll で[]と文字を消す EDCBはxtne6fさんのものを使っています。 Read.me通りの設定で、Title2で[]でくくられている部分は削除出来るが、SSだけが欲しかったときのメモ(妥協案) Recname_Macro.dll と.iniをコピー コピーしたものは、Recname_Macro - コピー.dll と Recname_Macro.dll - コピー.ini となり、Recname_Macro.dll - コピー.iniをメモ帳などで編集。 簡単な使い方を少し Recname_Macroでタイトル内にある全角文字を半角に。サブタイトル先頭30文字を録画ファイル名に。 [SET] Macro=$ZtoH(Title2)$ $Head30(ZtoH(SubTitle))$$ZtoH(SDMM)$月$ZtoH(SDDD)$日$ZtoH(SDYYYY)$$SDW$.ts $ZtoH(Title2)$ ZtoH で全角を半角に。(Title2)で番組名（[]の括弧でくくられている部分を削除したもの）。ここで区切りをつけるため$で囲むと、$ZtoH(Title2)$ で上のは後ろに半角スペースが入っている。 $Head30(ZtoH(SubTitle))$ Head30でサブタイトル(SubTitle)の先頭30文字を指定し、先程と同じように ZtoH で全角を半角に、そして指定する対象がサブタイトル(SubTitle)。 半角に変換したサブタイトルの30文字が欲しいので()で括ると Head30(ZtoH(SubTitle)) 先頭30としたが15文字だけ欲しい場合は、Head15と変更出来る。 $ZtoH(SDMM)$月 全角から半角にした録画開始の2桁表示の月 $ZtoH(SDDD)$日 全角から半角にした録画開始の2桁表示の日にち $ZtoH(SDYYYY)$$SDW$.ts 全角から半角にした録画開始の西暦4桁 .ts で拡張子をtsに指定。 Rm/削除したい文字/ で文字を消す。 $Rm/[初][映]【最新作】/ZtoH(Title)$ 番組タイトル(Title)から[...
続きを読む

冠山トンネル周辺のライブカメラ

-
イメージ
冠山峠トンネル周辺のライブカメラ 国道303号 新城山橋 北のライブカメラ LINK 国道303号 大蔵谷橋 南のライブカメラ LINK 国道303号 道場山隧道 北のライブカメラ LINK 国道417号 藤橋根尾交差点福井方面のライブカメラ LINK 国道476号 白粟のライブカメラ LINK 福井県道2号武生美山線 清水谷のライブカメラ LINK 福井県道2号武生美山線 相木のライブカメラ >LINK> 国道476号 河原橋のライブカメラ 福井県道229号福井鯖江線 花堂のライブカメラ >LINK> 国道417号 南坂下町のライブカメラ LINK 福井県道229号福井鯖江線 赤十字病院入口のライブカメラ LINK> ...
続きを読む