今回の課題はこちら

美味しそうなメニューがならんでおります。

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

background-imageってなんだ

今回は、文字よりも画像の扱い方がポイントになっているようです。

自力でつくってみて、答え合わせをしてみると、トップ画像がbackground-imageで設定されていました。

htmlに画像が指定されていないことに動揺していますが。。。。

一行づつ精読してみましょう。

height:100vh

調べてみました。キモはここのようですね。

画像の幅をビューポートの幅に対する割合で指定するのであれば、確かに % で事足ります。しかし % の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、必ずしもビューポートの幅が基準になるとは限りません。もし画像が div といったコンテナ要素の中にあれば、そのコンテナ要素の幅に対する割合で計算されます。
さらに width は必ず親要素の width に対する割合で計算され、height は親要素の height に対する割合で計算されます。
vw, vh にはそのようなプロパティの紐付けがありません。以下のように記述すれば、画像の幅をビューポートの高さを元にした長さに指定することが出来ます。

https://dev.classmethod.jp/articles/css-length-viewport/

background-size cover

auto 自動算出します。基本は元画像の大きさそのままです。
contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。
数値(px) 明示的にpxで大きさを調整します。
数値(%) 要素に対しての割合で指定します。

https://www.sejuku.net/blog/83148

https://www.sejuku.net/blog/55771

btnの作り方

左右中央にある、「レシピ一覧を見る」というボタンを作ります。

左が模範解答で右が私のものです。

inline-blockにすることはわかったのですが、枠線の作り方です。

模範解答では、文字の周囲にpaddingを設定して枠線の大きさを決めています。

私はblockの大きさを決めてから、文字を中央に配置しました。なんだかスマートじゃないですな。

calcかぁ

画像3枚を横に並べます。高さは一定で3分割されているイメージです。

calcかぁ。そうですよね。。。

参考にしたサイト

https://willcloud.jp/knowhow/font-family/#font-family

あしたまた、自力で作ってみます。レスポンシブはそのあと。。