サイト作成から得られた知見をまとめてみる
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は最下段が良い
SCSSやCSSについて得た知見
//サイドバーのローカルスタッキングコンテキストを作るための設定
#main-content {
position: relative;
z-index: 0;
}
// サイドバーより背面にしたい
main {
position: relative;
z-index: -1;
}
上の2つでサイドバーを前面にするための準備をしている
.content-width {
width: 90%;
margin: 0 auto;
max-width: $contentMaxWidth;
}content-widthを@extendで使うとデザインに共通性が出て良くなるのでうまく活用すると良い。
ボタンにflex-basis: 100%;を付けるとボタンの位置を調整できる(奇数のとき使える)
t
transitionプロパティでアニメーションを徐々に展開できる(なめらかになる)
bootstrap-reboot.cssでノーマライズしている。
Swiper.min.cssを使って簡単にヒーロースライダーを作ることができる。
style.scssで@importで設定を読み込んでいる。
_variables.scssで変数の定義をしている。
上のようにそれぞれのパーツごとに分けると管理しやすくなるのでオススメ。
breakpointsで画面のサイズにより設定を変えている。
基本はモバイルファーストでやる。
display: block;やdisplay: none;を使い分けることで画面サイズごとに表示したいものや表示させたくないものを分ける。
JavaScriptで得た知見
pace.jsを使って簡単にローダーを作ることができる
scroll-polyfill.jsで後方互換している
swiper.min.jsでヒーロースライダーを簡単に作ることができる
TweenMax.min.jsで簡単に複雑なアニメーションを使うことができる
機能ごとにjsを分けてあげてクラスを作りmain.jsでnew クラス名で呼んでいる。
console.log()を使って検証することで処理の流れや何が入っているかを確認することができる。