レッスンお疲れさまでした。
本日は、html/cssの修正を行いました。
■パララックス(視差効果)とScrollSpyの同時利用に関して
前回、パララックスとScrollSpyを同時利用すると、ScrollSpyがうまく動作しませんでした。
パララックスのCSSを少し修正することで同時利用ができました。
■スムーススクロールに関して
縦に長いページで、メニューボタンで同じページの違う場所に移動する作りの場合、一見、同一ページ内で移動しているのか、別ページに移動しているのかわかりません。
メニューボタンでをタップした場合も、一瞬で移動するのではなく、移動している(スクロールしている)ことがはっきりわかるように、スムースにスクロールさせると、見る人に親切です。
スムースにスクロールさせるには、jQueryを使います。
スマホ対応にするためにBootstrapというフレームワークを利用していますが、その中ですでにjQueryは読み込んでいるので、改めてjQueryを読み込む必要はなく、スムーススクロールに関する記述のみ追加します。
具体的な記述方法は、レッスンで紹介した通りです。
var speed = 500;
の数値を変えるとスクロールスピードが変わります。
数値を小さくすると早く、大きくするとゆっくりになります。
■余白のつけ方に関して
写真の下に文章があった場合、写真と文章の間に余白をつけるとき、写真の下に余白をつけるのと、文章の上に余白をつけるのは同じ場所に余白がつくので、どちらの方法でも可能です。
ただ、あるときは下に余白、あるときは上に余白と、バラバラにするとメンテナンス性が落ちるので、下なら下、上なら上でできるだけ統一しましょう。
■文字の左揃え、中央揃え、右揃えに関して
HTMLは文章構造
CSSは見た目のデザイン
を表現します。
文字の揃えは、見た目のデザインにあたるので、CSSで指定します。
ただ、Bootostrapを使っている場合、Bootstrapがあらかじめよく使うスタイルは用意してくれているので、HTMLにclass名を指定するだけで、文字の揃え方を変えることができます。