レッスンお疲れさまでした。

本日は、html/cssの修正を行いました。

■パララックス(視差効果)とScrollSpyの同時利用に関して

前回、パララックスとScrollSpyを同時利用すると、ScrollSpyがうまく動作しませんでした。

パララックスのCSSを少し修正することで同時利用ができました。

■スムーススクロールに関して

縦に長いページで、メニューボタンで同じページの違う場所に移動する作りの場合、一見、同一ページ内で移動しているのか、別ページに移動しているのかわかりません。

メニューボタンでをタップした場合も、一瞬で移動するのではなく、移動している(スクロールしている)ことがはっきりわかるように、スムースにスクロールさせると、見る人に親切です。

スムースにスクロールさせるには、jQueryを使います。

スマホ対応にするためにBootstrapというフレームワークを利用していますが、その中ですでにjQueryは読み込んでいるので、改めてjQueryを読み込む必要はなく、スムーススクロールに関する記述のみ追加します。

具体的な記述方法は、レッスンで紹介した通りです。

 var speed = 500;

の数値を変えるとスクロールスピードが変わります。

数値を小さくすると早く、大きくするとゆっくりになります。

■余白のつけ方に関して

写真の下に文章があった場合、写真と文章の間に余白をつけるとき、写真の下に余白をつけるのと、文章の上に余白をつけるのは同じ場所に余白がつくので、どちらの方法でも可能です。

ただ、あるときは下に余白、あるときは上に余白と、バラバラにするとメンテナンス性が落ちるので、下なら下、上なら上でできるだけ統一しましょう。

■文字の左揃え、中央揃え、右揃えに関して

HTMLは文章構造

CSSは見た目のデザイン

を表現します。

文字の揃えは、見た目のデザインにあたるので、CSSで指定します。

ただ、Bootostrapを使っている場合、Bootstrapがあらかじめよく使うスタイルは用意してくれているので、HTMLにclass名を指定するだけで、文字の揃え方を変えることができます。