サイトレビュー8日目

いい天気なのに、とてつもなく風が強い。部屋が揺れてます。
今回は、飲料食品カテゴリーからサッポロビール様↓
https://www.sapporobeer.jp/

デザイン
・font-family: "YakuHanJP", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;　　ゴシック体が多いな。
・ロゴの黄色をアクセントにして、白や黒をバランスよく。黒は#333や#222など同じ黒でも変化をつけている。
・トップの画像の上にある黄色バーが画像が変わるタイマーがわりになっている。
・重要なお知らせ→サッポロビールの思い→商品情報→特集→キャンペーンやニュースなど。これを深堀するページ
・商品ページのところは四角で区切られていて、グループわけが分かりやすい。
・キャンペーンの画像がバナーだ。バナーって別のサイトを閲覧しているときにあるものかと思ってたら、自社サイトでも使うんだな。

コーディング
・ブレイクポイント：w769   スマホでみても違和感なし。情報量あるのにきれいにまとめられててすごい。
・最初のスライドはcssのtransformで画像分だけ、左に移動させることでスライドのアニメーションをしている。
・CSSで番号を自動で出力できるんだ。リストをかけるときに便利かも。ここでは、サッポロのこだわりの箇所のところで使われてた。参照サイト↓

意外と知らない？！CSSで文頭にナンバーを自動出力する方法 │ カルチャーアカデミア広島

content: '0' counter(lead-cnt);

気づき
・なんとなく、フォントの違いからこれは画像かな？と推測ができるようになった。
・webデザインの勉強を始めるまえは、何気なく見てたサイトやけど、こうやってレビューするようになってから、これは手がかかるとか、スマホでもこんなにきれいに見えるとか、気にするようになった。