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

- 12月 02, 2019

手作りピザの作り方とCSS

手作りピザの作り方

トマトソース
トマトソース生地焼き上げ
生地
焼き上げ

crast

伸ばす

punch

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

cut

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

pizza

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

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

<div> tableとrow の ”考え” を入れ、前後に clear: both; の入ったelementを入れる。>

トマトソース

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

生地

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

焼き上げ

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

Footer Plactice

border-image: source slice round;

border-image-slice: 30%;
The image is sliced into 9 sections: 4 corners, 4 edges, and the middle.
9つのエリアをどれだけ分割していくかということ。
CSS Border image

Multile background image

ピザピザ

温度は高い方が早く焼き上がるが、家庭用オーブンレンジの250℃で25~30分程。焼き上がりから15分程すると、ピザだ！と分かるくらいの香りがし始めると思うのでここからはしばらく焼き上がりを見つめるといいでしょう。この辺りは使用するオーブンで違ってくるので、見極めるまで数回焼いてみるといいと思う。
background-image: url(https://imgur.com/TipkdFR.png), url(https://imgur.com/wCnb1bo.png); background-position: right bottom, left top ; background-repeat: no-repeat, repeat; padding: 20px; background-size: 100px 80px;">

background: url(), url(), url(); と複数指定する場合、順番が大切。一番最後に一番後ろに持っていきたいimageを指定する。一番・topに持っていきたい場合は一番最初に指定する。

トマトソース

background: url(https://imgur.com/wCnb1bo.png) left top no-repeat, url(https://imgur.com/TipkdFR.png) right top no-repeat,url(https://imgur.com/MSCGofP.png) left top no-repeat; background-size: 150px, 180px, auto; padding: 14px;

Full Size Background Imageに必要なもの
Use html tag { background: url() no-repeat center fixed; background-size: cover;}

html { 
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}

CSS background-origin try it changed photo.from the upper left corner of the border

CSS background-clip try it.border-box(default), padding-box, context-box

background-size: 100px 80px; width 100px height 80px

linear-gradient

To center the text of
<div> same height of height and line-height, puls text-align: center

3 colors /background-image:linear-gradient(to bottom right, blue, lightblue, yellow)

repeating-linear-gradient(45deg, rgba(0,0,255,0), rgba(0,0,255,1));

background-image: repeating-linear-gradient(45deg, blue, lightblue 10%, green 15%); color: red;

.button:hover {
box-shadow: 0px 0px 12px rgba(35, 173, 278, 0.2), 0 0 8px rgba(35, 173, 278, 1)

shadow: horizantal/ vertical/ blur/ color
text-shadow: 0px 0px 6px blue, 4px 4px 4px yellow, 1px 1px 1px black;

ellipsis 省略・省略符号

text-overflow: clip;

width: 200px; border: 1px dashed grey; overflow: hidden; text-overflow: clip;

text-overflow: ellipsis;

width: 200px; border: 1px dotted grey; overflow: hidden; text-overflow: ellipsis;

.textoverflow { overflow: hidden;}
.textoverflow:hover { overflow: visible;}

How To dropdown drpodownの練習

.nav2 {    /* バーの背景全体。 */
      background-color: grey;

}
.nav2 a {   /* バーに入っている<a> 改行などが入らなければ同じ行になる。 */
  padding: 5px 8px;
  text-align: center;
  color: white;
  text-decoration: none;
}
.dropbtn1 {  /* dropdown button. */
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
  text-decoration: none;
}
.dropdown1 {  /* .dropdown-content用のポジション。 */
  position: relative;
  display: inline-block; /* <div> に入れても前後に入るelementと同じ行・列・ブロックに入る・並ぶように。 */
}
.dropdown-content { /* dropdownで隠れる項目。 */
  display: none;
  position: absolute;
  min-width: 160px;
  padding: 5px 8px;
  background-color: #f1f1f1;
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
}
.dropdown1:hover .dropdown-content { /* dropdown menuにhover したら現れるように。 */
  display: block;
}

show1 show2

word-break property: word-break: keep-all; not good breaking word for Chinese/Japanese/Korean(CJK)
break-all; to prevent overflow, word may be break at any character

word-break にほんごちゅうごくごかんこくご

writing-mode: horizantal-lr(left to right)/ vertical-rl(right to left);
horizantal-tb(top to bottom) vertical-tb はない。rl, lrの違いが分からん。

text-overflow property needs to be in CSS with 1: white-space: nowrap; 2: overflow: hidden; . Both of them.

@ketframes "animation-name"{from{style:;} to{style:;}} / needs "animation-name" and "animation-duration".

<style>
div.example { width: 30px; height: 30px;
  background-color: red;
  animation-name: example;
  animation-duration: 12s; 
  animation-timing-function: linear;
  animation-delay: 1.5s;
  animation-iteration-count:2;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
/* shorthand animaton: example 12s linear 1.5s 2 alternate;  */
@keyframes example {
  ~~
}

@keyframes syntax
animatin: name duration timing-function delay iterraton-count derection;
animation: example 12s linear 1.5s 2 alternate;

animation-play-state: running/paused;

try it

Hover pointer animation would pause

@keyframes へのleft:0px; right:400px; だと途中で消えた。transformを使って位置を移動。
transform:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()); で指定。
animation-name の最初の文字に数字はclass id 同様使えない。
下の回転は@keyframes dd {0%{rotateZ(0deg)}} {100% {rotate(360deg)}}

transform property

Tooltip

<p style="text-align:center; margin:0 45%;" class="tooltip">Show tootip
    <span class="tooltiptext">Tooltip</span>
</p>
<p>は<div>でもいい。<span>をtootipに使うため
<p>でも出来るか実験。

.tooltip-b {
  position: relative;
  display: inline-block;
  border: 3px dotted black;
}
.tooltip-b .tooltiptext-b {
  visibility: hidden;
  width: 140px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px 0;
  position: absolute;
  top: 100%;
  right: 50%;
  margin-right: -70px;Use half of the width(140/2=70) to center the tooltip
}
.tooltip-b .tooltiptext-b::after { 矢印・色を揃えれば吹き出しに
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px; width marginの値は揃える。矢印の大きさ
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip-b:hover .tooltiptext-b{
  visibility: visible;
}
classに.tooltip-b .toolitiptext-bのように”-”が使えた。
pseudo class ::afterで付けた矢印が被らないように、矢印の大きさをmargin-left:5px; border-width: 5xp; 
.tooltip-b .tooltiptext-bのpadding: 10px 0; に調節。

centered?

<p> だと1行分ほどズレる。<div>だとズレない。

<div style="width: 500px;  height:auto;display: block; margin-right: auto; margin-left: auto;
position: relative; text-align: center;">
<p/div
  style="position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);"

Image Hover Overlay

fade in text

Pizza

 .container-2 {
  position: relative;
  width:30%;
    }
    .image-1 {
      display: block;
      width: 100%;
      height: auto;
    }
    .overlay-1 {
      position:absolute;
      top: 0;
      bottom: 0;
      left:0;
      right: 0;
      height: 100%;
      width:100%;
      opacity:0;
      transition: 0.5s ease-in-out;
      background-color: #008CBA;
    }
    .container-2:hover .overlay-1{
      opacity: 1;
    }
    .text-c1 {
      color:white;
      font-size: 1.9vw;
      position: absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%, -50%);
      text-align: center; /* textのズレを修正*/
    }

fade in box

Pizza baked

          .container-3{
      position: relative;
      width:30%;
    }
    .image-2{
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      transition: 0.5s ease-in-out;
      backface-visibility: hidden;/* バックグラウンド */
    }
    .middle-1 {
      transition: 0.5s ease-in-out;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .container-3:hover .image-2 {
      opacity: 0.3; /* hover時の不透明度*/
    }
    .container-3:hover .middle-1 {
      opacity: 1;
    }
    .text-c2 {
      background-color: #4CAF50;
      color: white;
      font-size: 1em;
      padding: 12px 25px;
      text-align: center; /* textのズレを修正*/
    }

Slide text from the top

Pizza baked Top

slide text from the bottom

Pizza baked Bottom

    .container-4 {
      position: relative;
      width: 30%;
    }
    .overlay-3 {
      position: absolute;
      bottom: 0; /* slideの開始位置*/
      left: 0;
      right: 0;
      height: 0;
      background-color: #008CBA;
      overflow: hidden;
      transition: 0.5s ease-in-out;
    }
    .container-4:hover .overlay-3 {
      height: 100%;
    }
    .text-slidebottom {
      position:absolute;
      color: white;
      top: 50%; textの位置
      left: 50%;textの位置
      transform: translate(-50%, -50%);textの位置
      overflow: hidden;
      font-size: 1.9vw;
      text-align: center;文字の位置がズレたのを修正
    }

Slide text from the left

Pizza baked Left

Slide text from the right

Pizza baked Right

    .container-6 {containerはhoverもあるので専用を用意
      position: relative;
      width: 30%;
    }
    .overlay-5 {overlayはhoverもあるので専用を用意
      position: absolute;
      height: 100%;
      width: 0;
      left: 100%;
      right: 0;
      bottom:0;
      overflow: hidden;
      background-color: #008CBA;
      transition: 0.5s ease-in-out
    }
    .container-6:hover .overlay-5 {
      width: 100%;
      left:0;slideの終端
    }
    .text-slideright {
      position: absolute;
      color: white;
      font-size: 1.9vw;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      white-space: nowrap;
    }

background-image ではなく
<button> をposition: absolute; top:50%; left:50%; transform:tranlate(-50%, -50%);

Animatied Button

    .button-a {
    display: inline-block;
    border-radius: 4px;
    border: none;
    background-color: #f4511e;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 250px;
    transition: all 0.5s; /* all */
    cursor: pointer;
    margin: 5px;
  }
  .button-a span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  .button-a span:after {
    content: '\00bb';/* '>>'を追加 */
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  .button-a:hover span {
    padding-right: 25px;
  }
  .button-a:hover span::after {
    opacity: 1;/* ::after content:'';を最前面に*/
    right: 0; /* ::after で取り付ける位置を指定*/
  }

"Pressed Effect" pseudo class :active

  .button-press {
    display: inline-block;
    padding: 15px 25px;
    font-size: 22px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none; /*見栄え良くなる*/
    color: #fff;
    background-color: hsl(16, 100%, 66%);/* coral=hsl(16, 100%, 66%)*/
    border: none;
    border-radius: 5px;
    box-shadow: 0 10px #888;/* 10px */
  }
  .button-press:hover {/* 
    background-color: hsl(16, 100%, 55%);
  }
  .button-press:active {/* "Pressed Effect" */
    background-color: hsl(16, 100%, 55%);
    box-shadow: 0 5px #444;/* :active のとき上の10pxの半分にして押した感じを表現 */
    transform: translateY(4px);
  }

"Fade in effect" opacity の差と transition で表現

Flexible Boxes

testing 1 style="width:auto;"

flex box is awesome. float is little bit difficult to handle all the time. style="width:auto;"

  .flex-container {
    display: flex;
    flex-wrap: nowrap;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }

このブログを検索

覚え書き