親要素いっぱいに広がるジャンボトロンを使う方法

Bootsrapにはデフォルトでジャンボトロン（jumbotron）が設定されています。
これは親要素の横幅いっぱいに広がるエリアで、テーマ作成などではブログヘッダーなどのカスタマイズによく使われています。

親要素いっぱいに広がるジャンボトロンを使う方法

ジャンボトロン（jumbotron）は親要素の横幅いっぱいのエリアにタイトルを表現するための「h1」タグのスタイルとリード文の記述をおこなうためのカスタマイズ「lead」クラスが定義されています。

使い方は以下のようになります。

<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>親要素いっぱに広がるジャンボトロン</h1>
<p class="lead">これは親要素の横方向いっぱいに広がるジャンボトロンです。ログのアイキャッチにも使えます。</p>

</div>
</div>

通常は先ほど書いたようにブログのヘッダー画像部分に使われることが多いので「h1」タグで問題ないのでしょうが、わたしはブログのアイキャッチに使ってみたかったので、すこしカスタマイズ用のスタイルシートを設定しました。

.jumbotron-title
{
font-size:32px;
text-align:center;
color: white !important;
}
.jumbotron
{
background-color:#663399;

}
.lead
{
color: white !important;
}

トップにあるアイキャッチのソースは以下の通りです。

<div class="jumbotron jumbotron-fluid">
<div class="container">
<p class="jumbotron-title">親要素いっぱに広がるジャンボトロン</p>
<p class="lead">これは親要素の横方向いっぱいに広がるジャンボトロンです。
ブログのアイキャッチにも使えます。</p>

</div>
</div>

これで背景色がBootstrapぽくなった四角いエリア内に記事のタイトルとリード文（説明文）を書けるようにしました。

まとめ

ジャンボトロンは背景画像などをうまく使えれば、いろいろな表現ができるのでぜひ使い方をマスタしましょう。

以上、「親要素いっぱいに広がるジャンボトロンを使う方法」でした。