◎ Webデザイン後編/練習問題(下)

【有印良品2019】(メインイメージ切替)②

ヒーローヘッダー

某良品ウェブサイト母の日特集をサンプルに練習します。
サンプルにする公式サイトはこちら(2019年度版)

大きいイメージを用いて、ヒーローヘッダー部分を作成します。公式サイトは、<img src="">、z-indexを使って重ねる手法を取り入れていましたが、練習では、background-sizeを使って再現してみます。


練習しやすいオリジナルサンプルを用意しました。
▶ 【有印良品:母の日】サンプルを見る


「おかあさん、ありがとう」のメッセージ部分は、公式サイト同様に画像を用います。背景にヒーローイメージを敷きその上に重ねるように配置します。