【60日目】#codestep 入門編「レシピサイト」に挑む
今回の課題はこちら
美味しそうなメニューがならんでおります。
https://code-step.com/recipe-menu/
background-imageってなんだ
今回は、文字よりも画像の扱い方がポイントになっているようです。
自力でつくってみて、答え合わせをしてみると、トップ画像がbackground-imageで設定されていました。
htmlに画像が指定されていないことに動揺していますが。。。。
一行づつ精読してみましょう。
height:100vh
調べてみました。キモはここのようですね。
画像の幅をビューポートの幅に対する割合で指定するのであれば、確かに % で事足ります。しかし % の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、必ずしもビューポートの幅が基準になるとは限りません。もし画像が div といったコンテナ要素の中にあれば、そのコンテナ要素の幅に対する割合で計算されます。
https://dev.classmethod.jp/articles/css-length-viewport/
さらに width は必ず親要素の width に対する割合で計算され、height は親要素の height に対する割合で計算されます。
vw, vh にはそのようなプロパティの紐付けがありません。以下のように記述すれば、画像の幅をビューポートの高さを元にした長さに指定することが出来ます。
background-size cover
auto 自動算出します。基本は元画像の大きさそのままです。
https://www.sejuku.net/blog/83148
contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。
数値(px) 明示的にpxで大きさを調整します。
数値(%) 要素に対しての割合で指定します。
btnの作り方
左右中央にある、「レシピ一覧を見る」というボタンを作ります。
左が模範解答で右が私のものです。
inline-blockにすることはわかったのですが、枠線の作り方です。
模範解答では、文字の周囲にpaddingを設定して枠線の大きさを決めています。
私はblockの大きさを決めてから、文字を中央に配置しました。なんだかスマートじゃないですな。
calcかぁ
画像3枚を横に並べます。高さは一定で3分割されているイメージです。
calcかぁ。そうですよね。。。
参考にしたサイト
あしたまた、自力で作ってみます。レスポンシブはそのあと。。
