スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



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

Bootstrapのコードを少しずつまとめていきます。
今回は「ジャンボトロン」の書式です。

~ 目次 ~

  1. 基本的なジャンボトロンの書式
  2. ジャンボトロンの画面全幅の書式
  3. ジャンボトロンのカスタマイズ:背景画像を入れる
  4. ジャンボトロンのカスタマイズ:文字を中央寄せにする

基本的なジャンボトロンの書式

ジャンボトロン(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 の下部をご参照ください。