DAY14の課題は「Bootstrapを使ってビジネスLP制作②」になります。
DAY13の内容も一部含みますが、YoutubeのBootstrapチュートリアルで学んだことをまとめます。
イメージスライダーの作成方法
Webのトップページなどでよく見かけるイメージスライダー(画像のスライドショー)もBootstrapを使用すれば簡単に実現が可能です。
Bootstrapでイメージスライダーを使用する場合はcarouselクラスを使用するので、公式ドキュメントをcarouselで検索すると使用方法が確認できますが、その中からスライダーのパターンをいつか書き出してみました。。
See the Pen
Bootstrap_slider by Jyu2 (@Jyu2)
on CodePen.
ちなみにcarouselはアメリカなどではメリーゴーラウンドのことを指すようです。公式ドキュメントやググったりしたら文法などは確認できるので暗記する必要はありませんが、このように名前の意味や由来を考えると頭に残りやすくなりますね。
カードの作成方法
ブログのトップページなど色々なところでよく見かけるカード。これもBootstarpで定義が用意されており、cardクラスを指定することで使用可能です。
以下に例を記述しますが、「div.card>img.card-img-top+card-body>h4+p」と入力してEmmetを発動させればカードの基本系はできてしまいます。Bootstrapもですが、Emmetも使い始めるとほんと便利です。
See the Pen
Bootstrap_card by Jyu2 (@Jyu2)
on CodePen.
カードを使用する場合は例のようにgridを使うことが多くなると思います。レスポンシブにも対応しやすくなりますし。
その他にもカードにヘッダーやフッターをつけたりもできるので、基本ですが公式ドキュメントは要チェックです。
その他
-
- container-fulidクラス
containerクラスはブレイクポイントによってmax-widthが変わりますが、container-fulidクラスにするとブレイクポイント(viewport？)の幅いっぱい(width100%)となる
-
- sticky-topクラス
固定ヘッダーとなる
-
- figure(フィギア)要素(Bootstarpではないけど・・・)
figure要素で囲んだ内容が写真や図表であることを表す要素で、figure要素で囲んだ内容は単体で独立した(内容を切り取ってもHTMLとして成立する)ものとならないといけない。また、内容にfigcaption要素をつけることで画像や図表に対するキャプション(説明など)を追加できる。sction要素やnav要素のようにより明確に文章構造を定義できるようにHTML5で追加された要素みたいですね。
まとめ
- クラス名などの意味を調べると実際の処理とリンクして頭に残りやすい
- イメージスライダーもカードもよく見るのでしっかりとおさえておく
- 動画をみたあとに復習でコーディングしてみる(自分の場合はcodepen)としっくりくる
- Bootstrapと関係ない部分でも分からない箇所が出てきたらきちんと調べる必要がある
- 上記したもの以外は各セクションでグリッドを使って実現してたので、グリッドの大事さ、便利さを実感
