【62日目】 #codestep 入門編レシピサイト 精読 backgroundでつまづく

昨日からつづけて、#codestep 入門編レシピサイトの精読をすすめています。

https://code-step.com/recipe-menu/

mainvisual

さて、まずはmainvisualからつまづきました。

/* --------------------------------------
mainvisual
-------------------------------------- */
#main_visual{
  background-image: url(../img/mainvisual.jpg);
  height: 100vh; 
  /* ウィンドウの高さいっぱいに表示するよ(左上起点) */
  background-size: cover; 
  /* 縦横比はそのままで、表示するよ */
  /* 【確認】ウィンドウの左右幅を狭くしていくと、縦横比が維持できなくたったら、画像が見切れていきます */
  background-position:center top;
  /* 画像左右中心、上下は上から表示するよ */
  /* mdnを見るとこのコマンドはmain_visual要素の中でどのあたり（左寄せ、中央など）に画像を配置するかを指定するコマンドであって、画像の上の方から表示とか中央部分を表示などのコマンドではないような理解です。 */
  background-repeat: no-repeat;
  /* いままでのコマンドで「画面いっぱい表示」としているので、repeatする余裕はないのに、このコマンドは必要でしょうか */
  margin-bottom: 60px;
}

書くべき内容については理解ができたのですが、background-positionの扱いが不透明でしたので、もうすこし調べています。

pictures

/* --------------------------------------
pictures
-------------------------------------- */
#pictures{
  margin-bottom: 60px;
  display: flex;
}
#pictures li{
  width: calc(100% / 3);
}
#pictures li img{
  width: 100%;
  /* これを入れることで、余白なくli幅いっぱいに表示 */
  height: 500px;
  object-fit: cover;
}

模写2度めに、calcは使えるようになった気がします。

object-fit:cover以外は問題がありませんでした。

今回は画像の表示の仕方がテーマだったと思います。

もう数回模写して、スムーズに書けるようにしておきます。