DAY17の課題は「DAY15〜DAY16 Bootstrapを使ってビジネスLP制作③④の復習」になります。
自分はDAY13、DAY14についてブログにまとめてるのでDAY15、DAY16で新しく出てきた内容と自分が理解に苦しんだところをまとめておきます。
目次
heightのサイズに指定してる「vh」って何？
CSSでheightの単位に見慣れない「vh」ってのが使われてました。今回の課題では使われていませんでしたが、「vw」っていうのもります。。
「vw」「vh」っていうのviewportに対する幅と高さを指定する場合に使用する単位とのことです。
例えば基準となるviewportの幅が320pxであった場合は「100vw = 320px」となり、10vwとした場合は32px(100vwの10分の1 = 320pxの10分の1)となります。
％指定だと親要素に対しての割合になるので、そうではなくviewportを元にしたい場合に使用することになります。
displayプロパティの値に「table」を指定するとどうなるの？
displayプロパティの値にtableが指定。
これは各要素をテーブル要素を使用しているかのように表示させることができるものとのことで、横並びのレイアウトなどを組みやすくなります。
しかし、課題の中では背景画像を指定するための要素に「display: table;」が指定されており、この意味がよくわかりませんでした・・・。
30DAYSトライアルをやられている方などで、わかる方がいれば教えてください。
clipプロパティ？
画像を切り抜くプロパティですが現在では非推奨(廃止予定)のようで今後はclip-pathプロパティを使う必要があるようです。
transformプロパティの前についてる「-webkit-」って？
ベンダープレフィックスっていうらしいです。
ベンダープレフィックスはCSS3で追加されたプロパティをブラウザベンダー各々で試験的に実装していたものを正常に表示できるようにするためにつけるものになります。
ベンダープレフィックスには以下があります。
- -webkit-：Google Chrome、Safari、Microsoft Edge
- -moz-：Firefox
- ーmsー：Internet Explorer
- -o-：Opera
しかし、現在ではほとんどのプロパティはベンダープレフィックスなしで大丈夫になってきているとのことなので、むやみやたらに付けてしまわないように注意が必要ですね。
背景画像を固定したままスクロールする方法
これがめちゃ悩みました。
ググってみると「background-attachment: fixed;」でできるって見つけたんんですが、style.cssでは指定されてないし、その他にもそれっぽいスタイルの指定もない。もちろんBootstrapのドキュメントをみてもそんな感じのものはなそそうで途方に暮れてました。
結局はfixed.cssを読み込んでいるのを見落としてて、そこで「position: fixed:」を使用して実現してたわけなんですけどね。焦るとこういう基本を見落としてしまいますよね。気をつけないと。
ちなみに「background-attachment: fixed;」を使って背景画像を固定したままスクロールするプログラムを作ってみました。
See the Pen
Bootstrap_template_1 by Jyu2 (@Jyu2)
on CodePen.
背景画像のセンスはそっとしておいてください。
同じようなことを実現しようとした時に色んな実装方法があるので、それぞれメリット、デメリットをおさえておいて、作成するレイアウトにあったプロパティを選択できるようになっていかないと・・・。
そのためには色んなレイアウトにチャレンジして、こんな感じで自分なりのテンプレート的なものの引き出しを増やして行きたいですね。
まとめ
- DAY15、16は英語のYoutubeをみながらなので、ほんとお腹いっぱいになる
- ベンダープレフィックスはむやみにつけない
- チュートリアルで書いたプログラムを自分なりに変更してみると理解が深まる。
- 焦らず落ち着かないと凡ミスには気づきにくい
