Bootstrapを使ってみる。ヘッダー編(Jumbotron)


Bootstrapを使ってみよう。ヘッダー編(jumbotron)

前回はサイト上部にグローバルナビゲーションバーを設置。
今回はサイトのメインイメージを与えるバナーを設置してみたい。
Bootstrapでは「jumbotron」というクラス属性を使いコンテンツ幅全体に展開するブロックを作ることができる。
今回はここをヘッダー領域としてイメージ画像とテキストを配置してみる。
Bootstrap
*この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。

Bootstrapのサイトからコピー&ペーストする

Bootstrapのサイトの上部メニューよりComponentsを選択して開く。

Components画面が開いたら右サイドナビより「jumbotron」をクリック。
Bootstrap

jumbotronの項目へ移動するとイメージ画像とタグが表示されているので、タグをcopyボタン押すなどしてコピーする。

Bootstrap


ここまではいつもの通りの手順。

デフォルトのjumbotronコードをサイトに貼り付ける

前回までに作成したindex.htmlをエディターなどで開きペースト。
(自環境は「navbar」上部固定配置)
Bootstrap


前回上部固定配置にしたときbodyにpaddingを設定してるので、ナビゲーションバーとjumbotronの間に隙間がある。CSSを編集してスキマをなくす。

Bootstrap

jumbotronを画面幅いっぱいに広げるには

デモ画面を見るとわかるように「jumbotron」が「Conteiner」の横幅に収まってしまうので今回はこれを画面幅いっぱいに広げてみたい。
jumbotronを横幅いっぱいに広げるには
divのclass属性の中にdivのcontainer属性を付けてあげればよい。
これでjumbotronは幅いっぱい、コンテンツ部分は中央配置される。
(body直下にあったdiv container属性をjumbotron終了タグの下へ移動しています。)

Bootstrap

jumbotronに画像を配置しheaderタグに変更する

divの背景に画像を入れる。
テキスト画像をhtmlに記述。
imgタグにimg-responsiveクラスを付ける(親の要素に合わせて、適切にサイズを変更してくれる)
CSS「background-size: cover;」で画像を全体表示にし中央表示に設定。
それと今回はjumbotron内のh1を非表示に。

HTML

CSS

ここまで終えて
Bootstrap


デモサイトを表示

JumbotronのCheckポイント

jumbotronをconteiner内に収める標準的な使いかた

jumbotronを画面幅いっぱいに広げる使い方

次回はグリッドレイアウトについて


この投稿へのコメント

  1. beginner_n said on 2015年11月27日 at 4:35 PM

    はじめまして。
    こちらのサイトを見てBootstrap勉強中です。
    お手すきで、なおかつ、質問に答えていただけるようでしたら
    教えてください。

    読み込んでいる画像jumbo.jpgのサイズを教えてください。

    • MizuKazu said on 2015年11月27日 at 7:47 PM

      beginner_nさん、はじめまして、コメントありがとうございます。
      ご質問のjumbo.jpgの画像サイズは「1294 x 550」です。

      Chromeをお使いでしたらF12キーの開発者ツールで画像のサイズが見れたりします。
      またなにかあればお気軽に質問してください。
      お役に立てれば幸いです。

      • beginner_n said on 2015年11月30日 at 1:50 PM

        ありがとうございますw
        こちらを参考にしながらBootstrapでテストサイト作っています。
        また他の記事欄で質問するかもしれませんが、よろしくお願いします。

  2. beginner_n said on 2015年11月30日 at 4:13 PM

    すみません。また質問なのですが、以下のCCSは単独でファイルを作成し、navbar-fixed-top.cssとして読み込む、という理解で合っていますか?

    body {
    min-height: 2000px;
    padding-top: 30px;
    }
    header.jumbotron {
    height: 510px;
    background: url(“../img/jumbo.jpg”) center 0 no-repeat;
    background-size: cover;
    }
    h1.jumbotron-h1{
    text-indent:100%;
      white-space:nowrap;
      overflow:hidden;
    }
    @media (max-width: 767px){
    header.jumbotron {
    height: 410px;
    background: url(“../img/jumbo.jpg”) center no-repeat;
    background-size: cover;
    }

    • MizuKazu said on 2015年12月1日 at 7:08 PM

      beginner_nさんこんにちは。

      はい、その理解で合っています!
      bootstrap.cssまたはbootstrap.min.cssとは別に新たに作ります。
      CSSのファイル名はお好きに決めてくださいね。

      • beginner_n said on 2015年12月2日 at 9:14 PM

        ありがとうございますw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

  1. Bootstrap(Jumbotron) | numaken.net said on 2016年2月5日 at 3:12 AM

    […] http://mizukazu.minibird.jp/bootstrap-jumbotron/#comment-433 […]

トラックバック URL