メニューカードを再現しよう
初段 / 目安 15分
商店街の角にできた新しいカフェ「ハレノヒ珈琲」。開店準備でばたばたしている店長の陽葵さんが、ラフを描いた紙をこちらに差し出します。「新作の抹茶ラテ、サイトに載せたいの。このラフの感じで1枚カードにできる?」。紙には、白い四角の中に商品名と値段と短い紹介文が並んでいて、角がまるく描かれています。
素材はそろっています。商品名は「抹茶ラテ」、価格は「¥580」、紹介文は「宇治の抹茶をたっぷり使った、ほんのり甘い一杯です。」です。
完成条件
- カード1枚を
class="menu-card"の要素で作る - カードの中に、商品名（
h3）・価格・紹介文の3つのテキストを入れる - カードの角をまるくする
- カードに影を付けて、背景から浮かせる
- カードの内側に余白を取り、文字が枠にくっつかないようにする
進め方
HTML の骨組みを先に作り、そのあと CSS で飾ってください。この順番を守ると、見た目が思いどおりにならないときに「構造が悪いのか、飾りが悪いのか」を切り分けられます。
角のまるさは要素の四隅をどれだけ削るかで決まります。影は「どれだけ横にずらすか、どれだけ下にずらすか、どれだけぼかすか、何色か」の4つで決まります。濃い影は一気に安っぽく見えるので、薄く広くが基本です。
手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。
課題
class="menu-card"のカード要素を1つ作る- カードの中に商品名（h3）・価格・紹介文の3つのテキストを入れる
- カードに角丸と影を付ける
- カードの内側に余白（padding）を取る
ヒント
前のヒントを開くと次が開きます。開かずに解けると未開封クリアです
ヒント 2ヒント 1 を開くと読めます
ヒント 3ヒント 2 を開くと読めます