16.さささ#1日1サイトレビュー

マークアップ編です。2カラムでページ下部まで展開されるサイトはあるようでないので実装部分にも興味ありました。

別件ですが、サムネイルが15回目のサイトレビューとダブってしまうので、サイト構成とマークアップ編と2種類のサムネを作成した方がいいですね(時間出来次第作ります、、）

さささ 和晒ロール

【トップの構造】
大まかに見ると全体を含む.containerの中に.movie-blockと.contents__wrapperが並存している
.movie-blockはposition : fixed;で 右寄せ、width : 50vw、height : 100vhでスクロールしても背景に固定されている感じになる
「さ」で始まるコピー部分は.contentに値する。margin-right : 50vwで映像部分がすっぽり収まるようになっている

.intro-text(さっと が縦書きで並んでいる箇所)は画面幅が1200px以上ならfont-size : 21px。375px-1200pxの間はfont-size : calc(0.36364vw + 16.63636px)、それ以下は固定で18px
こう見るとわかりますが、モバイルファーストでマークアップしているのですね。

縦書きはwriting-mode : vertical-rlで実装。これIEだと部分サポートなのでベンダープレフィックスつけないといけないみたい

→Can I Use参照

【レスポンシブ】
.container .contents__wrapper はwidth : 50vwから100vw、max-widthも700pxから100%に。marginは上下に100vh振って背景の映像用に空けている