Udemyのこちらのコースを受けながら、疑問に思ったこと、調べた結果、大事なことをまとめていきます。
part1-3 Bootstrapでnavbarを作成
bootstrapのnavbarのexampleがここに。
自己課題
- navbarを導入し、BrandとLinkのみにせよ。
- link部分を複製し、「シッターになる」「利用の流れ」「アカウント作成」「ログイン」を作成せよ。
part1-4 さらにBootstrapを使ってみる
jumbotron（ジャンボトロン）とは？
サイトのトップページに横幅いっぱいに画像が広がっているデザインをよく見ませんか？それです。bootstrapに内蔵されているクラスjumbotronを使えば簡単に実現できるのだ。
ここがリンクです。
cssを解読
.class{----}
.classでclassというクラスにこのCSSが適応される。
padding-top: --px;
上のpadding,つまり要素内の上の余白を決める。よく混合するものにmarginがあるがこれは要素間の余白を決めるもの。
background: linear-gradient(上の色, 下の色 ), url(---.jpg);
背景をグラデーションできる。第一引数が上の色で第二引数が下の色。urlは画像のURL。imageフォルダがデフォルトになっている。
background-size: cover;
背景画像のサイズを決めるときに使う。
auto
自動的に算出される（初期値）
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
長さ
背景画像の幅・高さを指定する
パーセンテージ
背景領域に対する背景画像の幅・高さのパーセンテージを指定する
参照 http://www.htmq.com/css3/background-size.shtml
background-position: 50% 50%;
背景画像の位置を決めるもの。50% 50%だと左から50% 上から50%の位置が真ん中に来る。
background-position: 50px 100px;
だと、左に右に50px、上から100px下に動く。
height: 100px;
高さが１００pxになる。
z-index: 10;
この値が大きい方が上に来る。重なったときの優先順位を決めるための値。
.navbar > li > a {}
これは、navberクラスの中にあるliの中にあるaに適応される。
自己課題
- jumbotronを導入。
- pタグを決して、中にnavbarを配置せよ。
- 画像をダウンロード、cssを適用させよ。