CSS でリーダー

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

作り方

  1. 下ごしらえ
    • ほうれん草をたっぷりのお湯で塩茹でする
    • 2、30秒茹でたら水で冷やして、水気を絞った後、みじん切りにする
    • 長ねぎをみじん切りにする
    • ベーコンを 5mm 角くらいに切る
  2. ベーコンを弱めの中火でちりっとするまで炒めて、取り出しておく
  3. 油を入れて、少々熱する
  4. 長ねぎを入れて香りがしてくる程度まで数秒くらい火を通す
  5. 卵を割り入れて、続けてご飯を即投入
  6. 卵をご飯にからめるようにしながら強火で炒める

    7. ご飯がほぐれて、ある程度ぱらっとするまで1分から1分半

  7. ベーコンとみじん切りにしたほうれん草を投入して、強火でさっと炒める
  8. 鶏がらスープの素、塩、胡椒で味をつける
  9. 最後に醤油をほんの少し

見た目はきれいだけれど、ほうれん草感が薄いし、「翡翠」というほど緑にならない。
更に倍？


参考にしたところ。

ベーコンとサニーレタスの炒飯

料理 炒飯

炒飯のお初（ぼくの、ではない）。

材料（1人分）

  • ごはんお茶碗1杯くらい
  • ベーコンスライス1枚くらい
  • サニーレタス2枚くらい
  • 長ねぎ5cmくらい
  • 卵1個
  • 鶏がらスープの素3本指で2回
  • 塩2本指で1回
  • 胡椒ふた振り
  • サラダオイル大さじ1弱

作り方

  1. 下ごしらえ
    • さっと洗ったサニーレタスを小さめのざく切りにする
    • ベーコンを 5mm角 くらいに切る
    • 長ねぎをみじん切りにする
    • 卵を溶いておく
  2. 弱めの中火でベーコンをちりっとする感じに炒める
  3. ベーコンを取り出す
  4. フライパンでサラダオイルを温める
  5. 溶き卵を入れて、続けてご飯をすぐに投入する
  6. 卵をご飯にからめるようにしながら強火で炒める

    7. ご飯がほぐれて、ある程度ぱらっとするまで1分くらい

  7. みじん切りにした長ねぎと、炒めて取り出しておいたベーコンをフライパンに入れる
  8. 鶏がらスープの素、塩、胡椒で味をつける
  9. サニーレタスを入れて、ざっと炒め合わせる

このときは、だいたい30分かかってる。
下準備に25分くらい。火を使いだしてから5分くらい。

レタスがちょっと大きめで、味がちょっと薄めだったか。
でも、最初にしては上出来すぎる　:-)

炒飯は、卵を使うと難易度がとても下がる。
溶き卵とご飯を順番にフライパンに入れるんじゃなくて、あらかじめ溶き卵にご飯をひたして卵かけご飯状態にしたのをフライパンに入れると、もっと簡単。

最近、作ったりしたやつらとか。
　→ 炒飯 カテゴリーの記事一覧 - おまえ、うまそうだな


　　＊　　＊　　＊

料理をするときに、まだ慣れないうちに大切だと思うこと。

火を使いだす前に、洗う・切る・混ぜるは全てやっておく

料理番組で材料の説明を映すときのあれ。
火にかけながら材料を切ったりとかできるわけないし、調味料を量りながら入れていくのも意外と時間がかかったり、何かを忘れたり。
洗い物はちょっと増えちゃうのだけれど、最初に材料はすべて切っておく。合わせ調味料は最初から混ぜ合わせておく。
手の届くところに並べておいて、火を使いだしたら順番に入れていくだけにすると失敗が少ない。

プロのレシピを参考にする

cookpad だめ。当たり外れが大きすぎるし、最初のうちは何が外れなのかが分かんない。
あそこは、基本的に他人が作るためのレシピじゃなくて、投稿者の日記だと思った方が良い。
プロ（特に、料理研究家のたぐい）は、他人が作ることを前提とした書き方をする人が多い（残念ながら、全員がそうではない）。

きょうの料理は安心できる。ビギナーズの方には動画もあるし。
やっぱり、「玉ねぎが透き通るまで」とか言われても実際に透明になるわけではないので、実物を見ておくと良い。

時間は2倍かかると思っておいた方が良い

レシピに書いてある通りの時間なんかで作れない。
自分でも最初のうちは、一時間以上も晩ごはんを待たせたりとか、しょっちゅうだった。
ごめんね　(´・ω・｀)



梅干とシラスの炒飯（卵なし）

料理 炒飯

これのリベンジ。
卵を使わないやつ。

電子レンジで冷やご飯を温めたら、日本酒を振りかけて、ご飯をバラバラにほぐす。
フライパンで油を温めて、ご飯を投入。
後は、これと一緒。


ほんの少しだけ冷やご飯が残ってたので、試すにはちょうど良いということで。
今度は、上手くできたよ　:-)、


油は、もっと少なくても良い。
何かの具を炒めて、その油で十分という感じ。


＃ ご飯が少なすぎて、ポン酢醤油を入れ過ぎてしまったのは内緒だ

梅干しとシラスの炒飯

料理 炒飯

これのリベンジ。
卵を使う方を試してみた。

材料（1人分）

  • ごはん1人分
  • シラス7～80gくらい
  • 梅干し1個
  • 大葉4～5枚
  • 卵1個
  • ポン酢醤油少々
  • 胡椒少々
  • サラダ油大さじ1

作り方

  1. 下ごしらえ
    • 大葉の軸を取って細かく切る
    • 梅干の種を取って、適当な大きさにちぎる
  2. ごはんを電子レンジで温める
  3. 油を入れて、少々熱する
  4. 卵を割り入れて、続けてご飯を即投入
  5. 卵をご飯にからめるようにしながら強火で炒める

    6. ご飯がほぐれて、ある程度ぱらっとするまで1分から1分半

  6. シラスを即投入して、強火でさっと炒める
  7. 梅干を入れて絡める
  8. ポン酢醤油で味をつけて、胡椒で味を調整
  9. 火を止めて、大葉を入れてざっと和える




やっぱり、卵を使うと作りやすさが全然違う。

卵が入っているので味的に梅干しが前面にくる感じにはならないけれど、ポジティブにとらえれば、甘さと酸味のバランスが取れているとも言える。

さて、卵を使わないのを試してみたものかどうか……


大葉はもっと多くても良いかも。
ポン酢醤油の万能感は、ここでも　:-)、

梅干の炒飯

料理 炒飯

質問を上げたときから、卵を使わない炒飯にチャレンジしてみようと思っていたのだ。

材料（1人分）

  • ごはん1人分
  • ベーコン1枚
  • 梅干し1個
  • 小ねぎ1本
  • レタス1枚
  • ポン酢醤油少々
  • 胡椒少々
  • サラダ油小さじ1
油を吸ってくれる卵を使わないので、油は少なめ。 レタスは、たまたま余ってるのがあったから使っただけ。

作り方

  1. 下ごしらえ
    • ベーコンを細切りにする
    • 小ねぎを小口切りにする
    • レタスを小さめにちぎる
    • 梅干の種を取って、適当な大きさにちぎる
  2. ごはんを電子レンジで温める
  3. ベーコンを弱めの中火で炒める

    4. 香りがしてきて、飛び跳ねてくるまで1分くらい

  4. 油を入れて、少々熱する
  5. ご飯を投入
  6. ご飯がほぐれて、ある程度ぱらっとするまで1分から1分半くらい強火で炒める
  7. 小ねぎとレタスを入れて炒める
  8. 梅干を入れて絡める
  9. ポン酢醤油で味をつけて、胡椒で味を調整


卵を使わないと、難易度が一気にアップする。
なかなかご飯がほぐれなくて、前に作ってた あのモタっとした感じのあれだ。

味付けのポン酢醤油で、少しほぐれた感じになる。
事前にご飯を洗っておくとか、油やマヨネーズをまぶすとかの効果がこれなんだな、きっと。

cookpad で「しらす チャーハン 梅」なんかで探してみても、卵を使ってないのは、大半がダマになってる。
でも、割りときれいにほぐれているのも、ないわけじゃない。
何だ、この差は。

ここでアップしている写真も、見た目にはモタっと感は少ないか。
そうか、そういうことなんだろうな。


味としては、まあまあイケる。

本当は、シラスと大葉を使いたかったんだけど、冷蔵庫に無かった。
いや、日曜日にはあったんだけど、食われちまってた　(´・ω・｀)


んで、次に作るときにどうすんだい、という話。

炒めるのに使う油は小さじ1 でも、ちょっと多いなあ。
食べてるときには気にならなかったけど、お皿ぎとぎと。多分、これが上限。
と、思うと、油をまぶしておくのはナシだろうなあ。
卵を使えばいいんだろうけど、いつものやつと似たり寄ったりになってしまうかもしれないし。

日本酒で ほぐしてみるか。
水で洗うよりは、水分が飛ぶのが早そうだし。
1人分で、小さじ1～1.5 くらいかな。

あと、卵と合わせるのは、一応、やってみよう。


炒飯道爆進中　:-)、


リベンジ