30DAYSトライアル1st

30DAYSトライアルのまとめ【DAY14】

DAY14の課題は「Bootstrapを使ってビジネスLP制作②」になります。

DAY14課題

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と関係ない部分でも分からない箇所が出てきたらきちんと調べる必要がある
  • 上記したもの以外は各セクションでグリッドを使って実現してたので、グリッドの大事さ、便利さを実感
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す