ジャンボトロン（トップ見出し）の書式：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 の下部をご参照ください。