11.athletia#1日1サイトレビュー

サイトの実装に対して決定的に苦手意識があるので、マークアップに力点をおいた「1日1サイトレビュー」(レビューというよりは備忘録)もやっていきます。

いつの間にか「サイトレビューを1日やること」が目的になってしまうとよろしくなくて、何事もアウトプットしなければ知識を吸収しても意味がないのである。

現在、自主制作でアパレルサイトも作っており、デザインや実装に「サイトレビュー」で得た知識を活用していきたい。

というわけで今回参考にさせていただくのはこちらのサイトです。

clean beauty | athletia

【概要・サービス内容】
環境に配慮したものづくりをしているブランドathletia(アスレティア)の理念や商品を紹介する

【ターゲット予想】
ESGに関心の高い消費者
　

【トップの構造】
サイトは#wrapperに包含される。今回はファーストビューのマークアップを解析する。

トップは大きく分けて「ロゴ(.sec-header)」「メインビジュアル(.sec-visual)」「お知らせ(.sec-visualSub)」の3要素に分解できる。コンテンツの最大は1366px

【ブレイクポイント】
ブレイクポイントは1025pxと641px。
641-1024px間では、最小表示端末がiPhone SE2のランドスケープ(667*375px)、最大表示端末がiPad Pro 12.9のポートレート(1024*1366)とiPad Miniのランドスケープ(1024*768)になる。
640px以下では最大表示端末がRakuten Mini(640*360)、最小表示端末はiPhone SE(320*568、Split Viewは除く)。
→ブレイクポイントに関してはhttps://hashimotosan.hatenablog.jp/entry/2020/12/06/182327を参照

【マークアップについて】
要素の横並びはflexは使っていない、.sec-visualはどの幅でも右寄せなのでmargin-right:0; margin-left:auto;
1024px以下ではロゴの下に表示されていたメニューがハンバーガーに格納される。その分だけ.sec-visualはpadding-top(52,48px)を設けている