プログレスバーをつくる - Bootstrapのチュートリアル

このレッスンではプログレスバーに パーセンテージを定めて表示してみます。 今開いているページ、 このドキュメントには body には基本的に div 要素が１個あるだけで空っぽです。 ここにプログレスバーを 加えていきたいと思います。 プログレスバーは div 要素を ２つ入れ子にします。 まず最初の div 要素が ベースになるんですけど そこにはクラスを progress というものを指定します。 これがプログレスバーの ベースになるわけですね。 そしてその中の progress の部分、 これを中の方に入れてみます。 やはり div 要素で class は progress-bar になります。 そうすると、 このベースの部分、 グレーの部分が表示されます。 progress の部分が どうなるかというと ここで何％にしましょうか ということは決めなくちゃいけないんですね。 そこでこのプログレスバーの この中の部分に対して パーセンテージを指定します。 クラスで指定することができます。 w、width ですね。 75 とすると 75% というふうになるわけですね。 ブルーで全体の 75%。 これは場を変えればもちろん プログレスバーの全体 それから 75% のパーセンテージも 変わってきます。 ではさらにどんどん 作っていきましょう。 間に hr を入れて これをコピーしてしまいます。 ［コピー］して ［ペースト］ですね。 75 ではなんだなと もうちょっと細かい値を入れたい。 77 とすると 消えちゃうんですね。 Bootstrap、1% 単位で 100 個もクラス作っていません。 ですから w ですと 25 刻みなんですね。 ですから 77 という数字に したいなと思ったら これは残念ながら クラスでは指定できません。 でも幅を指定すればいいので CSS で別途指定しても結構ですし 要素の中に入れる場合には style 属性で 指定することができますね。 width で ここで 77% とすれば ちょっとだけパーセンテージ、 大きめに入ってますね。 ではさらにこれをコピーして 使っていきましょう。 先ほどのコピーを 使ってしまってもいいですね。 コピーが残ってるはずなので ［ペースト］ ということで 今度はパーセンテージ ちょっと変えましょうか。…