【Bootstrap】Jumbotronの書き方

みなさんこんにちは さくちゃんです。
本日は「Jumbotron」の書き方についてやって行きます。

では早速やって行きましょう！

Jumbotronの書き方

公式サイトの確認

まずは、公式サイトを確認していきましょう。

公式サイトのタブの「Documentation」をクリックします。

次に左サイドバーの「Components」をクリックします。

そして「Components」の中の「Jumbotron」をクリックすると参照できます。

Jumbotronとは？

そもそも「Jumbotron」とは何か？というと、サイトに主要なマーケティングメッセージを表示できるものです。簡単にいうと下のような図です。

よくTOPページで見ることが多いのではないでしょうか？
こういったものをBootstrapでは作成することができます。

では実際に、書き方について見て行きましょう。

書き方

「Jumbotron」は下のように書きます。

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, ・・・</p>
  <hr class="my-4">
  <p>It uses utility classes for typography ・・・</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

ぶっちゃけ親要素の<div>タグに「jumbotron」とクラス名で指定するだけで、書けます。
他のタグは基本<p>タグ、<h1>タグで書けるようになっています。
それぞれに指定されているクラス名は、文字の大きさを変えたり、目立たせたりするようなクラス名になっています。詳しく見たい方はこちらをご覧ください。

また自分のお好みで「ボタン」をつけたり、背景には色、写真を指定することできます。

是非試してみてください！
では本日以上になります。