うごメモラー 蠢く Ver2.0
鬱陶しいので鍵をかけました :-)
tl;dr
CSS でリーダー
こういう感じの項目の間を点線なんかで結ぶやつ。
トマト缶
0.5缶
パスタ
200g
HTML と CSS
こんな感じになってる。
<div class="line"> <span class="name">トマト缶</span> <span class="amount">0.5缶</span> </div> <div class="line"> <span class="name">パスタ</span> <span class="amount">200g</span> </div> <style> .line { position: relative; /* 子要素の幅の基準とする */ height: 1.5em; /* 高さを確保する */ } .line::before { content: ""; display: block; width: 100%; /* .line と同じ幅 */ position: absolute; /* 行の要素に重ねる */ margin-top: 0.5em; /* 高さの半分を上の margin にとる */ border-top: 1px dashed silver; /* リーダーの色、太さ、スタイルを指定 */ } .line .name { position: absolute; /* リーダーに重ねる */ padding-right: 1ex; /* リーダーと少し離すための隙間 */ background-color: white; /* 背景色を指定して、リーダーを隠す */ } .line .amount { right: 0; /* .line の右に寄せる */ position: absolute; /* リーダーに重ねる */ padding-left: 1ex; /* リーダーと少し離すための隙間 */ background-color: white; /* 背景色を指定して、リーダーを隠す */ } </style>
不親切な説明
行を表す要素に、リーダーを表す ::before 要素 、左の要素、右の要素を、position: absolute; を指定して重ねる。
行を表す要素の子要素は、全て absolute だから高さゼロになっちゃうので、height や display: list-item; で高さを確保する。
行を表す要素は、右側に寄せる要素の基準にしたいので、position: relative; で基準に指定する。
リーダーの線は border で表現。top か bottom の border を指定して、半分の高さに margin を設定する。
リーダーと、前後の要素に隙間が無いと見栄えが悪いので、それぞれ padding-right と padding-left を指定する。
透けちゃうとリーダーが見えちゃうので、背景色と同じものを指定する。
翡翠炒飯っぽいやつ
「翡翠炒飯」なるものを目指したのではあるけれど……
材料（1人分）
- ごはん1人分
- ベーコンスライス1枚
- ほうれん草3把（50g）
- 長ねぎ2～3cm
- 卵1個
- 鶏がらスープの素少々
- 塩少々
- 胡椒少々
- 醤油ほんの少し
- サラダ油大さじ1
作り方
- 下ごしらえ
- ほうれん草をたっぷりのお湯で塩茹でする
- 2、30秒茹でたら水で冷やして、水気を絞った後、みじん切りにする
- 長ねぎをみじん切りにする
- ベーコンを 5mm 角くらいに切る
- ベーコンを弱めの中火でちりっとするまで炒めて、取り出しておく
- 油を入れて、少々熱する
- 長ねぎを入れて香りがしてくる程度まで数秒くらい火を通す
- 卵を割り入れて、続けてご飯を即投入
- 卵をご飯にからめるようにしながら強火で炒める
- ベーコンとみじん切りにしたほうれん草を投入して、強火でさっと炒める
- 鶏がらスープの素、塩、胡椒で味をつける
- 最後に醤油をほんの少し
ご飯がほぐれて、ある程度ぱらっとするまで1分から1分半
見た目はきれいだけれど、ほうれん草感が薄いし、「翡翠」というほど緑にならない。
更に倍？
参考にしたところ。
ベーコンとサニーレタスの炒飯
炒飯のお初（ぼくの、ではない）。
材料（1人分）
- ごはんお茶碗1杯くらい
- ベーコンスライス1枚くらい
- サニーレタス2枚くらい
- 長ねぎ5cmくらい
- 卵1個
- 鶏がらスープの素3本指で2回
- 塩2本指で1回
- 胡椒ふた振り
- サラダオイル大さじ1弱
作り方
- 下ごしらえ
- さっと洗ったサニーレタスを小さめのざく切りにする
- ベーコンを 5mm角 くらいに切る
- 長ねぎをみじん切りにする
- 卵を溶いておく
- 弱めの中火でベーコンをちりっとする感じに炒める
- ベーコンを取り出す
- フライパンでサラダオイルを温める
- 溶き卵を入れて、続けてご飯をすぐに投入する
- 卵をご飯にからめるようにしながら強火で炒める
- みじん切りにした長ねぎと、炒めて取り出しておいたベーコンをフライパンに入れる
- 鶏がらスープの素、塩、胡椒で味をつける
- サニーレタスを入れて、ざっと炒め合わせる
ご飯がほぐれて、ある程度ぱらっとするまで1分くらい
このときは、だいたい30分かかってる。
下準備に25分くらい。火を使いだしてから5分くらい。
レタスがちょっと大きめで、味がちょっと薄めだったか。
でも、最初にしては上出来すぎる :-)
炒飯は、卵を使うと難易度がとても下がる。
溶き卵とご飯を順番にフライパンに入れるんじゃなくて、あらかじめ溶き卵にご飯をひたして卵かけご飯状態にしたのをフライパンに入れると、もっと簡単。
最近、作ったりしたやつらとか。
→ 炒飯 カテゴリーの記事一覧 - おまえ、うまそうだな
＊ ＊ ＊
料理をするときに、まだ慣れないうちに大切だと思うこと。
火を使いだす前に、洗う・切る・混ぜるは全てやっておく
料理番組で材料の説明を映すときのあれ。
火にかけながら材料を切ったりとかできるわけないし、調味料を量りながら入れていくのも意外と時間がかかったり、何かを忘れたり。
洗い物はちょっと増えちゃうのだけれど、最初に材料はすべて切っておく。合わせ調味料は最初から混ぜ合わせておく。
手の届くところに並べておいて、火を使いだしたら順番に入れていくだけにすると失敗が少ない。
プロのレシピを参考にする
cookpad だめ。当たり外れが大きすぎるし、最初のうちは何が外れなのかが分かんない。
あそこは、基本的に他人が作るためのレシピじゃなくて、投稿者の日記だと思った方が良い。
プロ（特に、料理研究家のたぐい）は、他人が作ることを前提とした書き方をする人が多い（残念ながら、全員がそうではない）。
きょうの料理は安心できる。ビギナーズの方には動画もあるし。
やっぱり、「玉ねぎが透き通るまで」とか言われても実際に透明になるわけではないので、実物を見ておくと良い。
時間は2倍かかると思っておいた方が良い
レシピに書いてある通りの時間なんかで作れない。
自分でも最初のうちは、一時間以上も晩ごはんを待たせたりとか、しょっちゅうだった。
ごめんね (´・ω・｀)
梅干とシラスの炒飯（卵なし）
これのリベンジ。
卵を使わないやつ。
電子レンジで冷やご飯を温めたら、日本酒を振りかけて、ご飯をバラバラにほぐす。
フライパンで油を温めて、ご飯を投入。
後は、これと一緒。
ほんの少しだけ冷やご飯が残ってたので、試すにはちょうど良いということで。
今度は、上手くできたよ :-)、
油は、もっと少なくても良い。
何かの具を炒めて、その油で十分という感じ。
＃ ご飯が少なすぎて、ポン酢醤油を入れ過ぎてしまったのは内緒だ
