ジャンボトロン(トップ見出し)の書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回は「ジャンボトロン」の書式です。
~ 目次 ~
- 基本的なジャンボトロンの書式
- ジャンボトロンの画面全幅の書式
- ジャンボトロンのカスタマイズ:背景画像を入れる
- ジャンボトロンのカスタマイズ:文字を中央寄せにする
基本的なジャンボトロンの書式
ジャンボトロン(jumbotron)は、WEBサイトのトップ見出しのデザインです。
主要コンテンツを紹介するのに適しています。
ジャンボトロンは、div要素にclass「jumbotron」を適用して、この中に見出しの内容を記述します。
その外側をdiv要素にclass「container」を適用して囲みます。
なお、ジャンボトロンは角丸となります。
実装例:HTML
<div class="container"> <div class="jumbotron"> <h1>ジャンボトロンの基本書式</h1> <p>「ジャンボトロン」とは、元はソニーが開発・製作していた大型映像表示装置の名称。<br>転じて英語圏では、大型表示ディスプレイを指す一般名詞としても使われている。</p> </div> </div>
ブラウザでの表示例は サンプルページ1の上部 をご参照ください。
ジャンボトロンの画面全幅の書式
ジャンボトロンを画面全幅に広げることも可能です。
基本書式とは逆に、div要素class「jumbotron」を外側、div要素class「container」を内側にします。
この場合、ジャンボトロンの背景色は角丸にはなりません。
実装例:HTML
<div class="jumbotron"> <div class="container"> <h1>ジャンボトロンの画面全幅の書式</h1> <p>「ジャンボトロン」とは、元はソニーが開発・製作していた大型映像表示装置の名称。<br>転じて英語圏では、大型表示ディスプレイを指す一般名詞としても使われている。</p> </div> </div>
ブラウザでの表示例は サンプルページ1 の下部をご参照ください。
ジャンボトロンのカスタマイズ:背景画像を入れる
ジャンボトロンに背景画像を入れることも可能です。
div要素class「jumbotron」にCSSで背景画像を適用します。
実装例:HTML
<div class="container"> <div class="jumbotron" style="background:url(images/bimg001.jpg); background-size:cover;"> <h1>ジャンボトロンのカスタマイズ:背景画像を入れる</h1> <p>「ジャンボトロン」とは、元はソニーが開発・製作していた大型映像表示装置の名称。<br>転じて英語圏では、大型表示ディスプレイを指す一般名詞としても使われている。</p> </div> </div>
ブラウザでの表示例は サンプルページ2 の上部をご参照ください。
ジャンボトロンのカスタマイズ:文字を中央寄せにする
ジャンボトロン内の文字を中央寄せにします。
class「jumbotron」を適用したdiv要素に、class「text-center」を追加します。
実装例:HTML
<div class="container"> <div class="jumbotron text-center"> <h1>ジャンボトロンのカスタマイズ:文字を中央寄せにする</h1> <p>「ジャンボトロン」とは、元はソニーが開発・製作していた大型映像表示装置の名称。<br>転じて英語圏では、大型表示ディスプレイを指す一般名詞としても使われている。</p> </div> </div>
ブラウザでの表示例は サンプルページ2 の下部をご参照ください。