特訓CSS メディアクエリー編に参加しました。
初めてゼロからWebサイトを作る経験として、とても楽しかったです。
こちらが４日目に作成した、自由制作 こだわりカフェの紹介ページを作ろうのサイトです。
工夫したところ
ビューポートの幅が 600px 未満のときは SNS アイコンを非表示にし、ロゴ画像を左側、三本線のアイコンを右側に配置。
ビューポートの幅が 600px 以上、800px 未満のときは三本線のアイコンを非表示にし、SNS アイコンのみを右側に配置。
ビューポートの幅が 800px 以上のときは三本線のアイコンを非表示にし、SNS アイコンに加え、「Twitter」「Instagram」「LINE」のテキストも表示。
ヘッダー下とフッター上にぼかしを入れました。
ビューポートの幅が 600px 以上、でヘッダーアイコン画像を入れ替えしました。
ビューポートの幅が 600px 未満のときは カフェの特徴の画像と文章を縦並びにしました。
ビューポートの幅が 600px 以上の時は、カフェの特徴の画像と文章横並びにしました。
ヒーローエリアの画像と地図の画像は、画面サイズと共に大きさが変わるようにしました。