サイト作成から得られた知見をまとめてみる
index.htmlで得た知見(ざっとで)
headタグ
headタグの中でサイトのタイトル、説明、ロゴが設定できる
スタイルシートの読み込みもできて読み込む順番が重要である
pace.jsもここで読み込み
Googleフォントもここで読み込める
<body>から
global-containerはローダーの設定やモバイルメニューで必要。
<divclass="mobile-menu__cover"></div> <divclass="nav-trigger"></div>
この2つはスクロール監視とモバイルメニューのカバーのためにある
基本的に親要素__innerをつくり@extend.flex;など使うことによってレスポンシブ対応する
<h2 class="main-title tween-animate-title">Pick up</h2>
上のようにtween-animate-titleを付けてテキストアニメーションの準備をしている
©でコピーライトのマークが作れる
を使うことでスペースを表現できる
スクリプトを読み込むときmain.jsは最下段が良い