投稿日：2019年12月16日｜最終更新日: 2019年12月14日

【Bootstrap】サイトのメインイメージを横幅いっぱい表示する！【jumbotron】

Bootstrap HTML・CSS

サイトにメインイメージを配置します。画面の横幅いっぱいに画像が表示されます。

bootstrapを使って大きなメインイメージを表示するには？
準備
ジャンボトロン基本コード
全幅ジャンボトロン
ジャンボトロンの文字を中央寄せにする
ジャンボトロン背景画像

bootstrapを使って大きなメインイメージを表示するには？

サイトの一番上部にメイン画像を表示します。その中にキャッチコピー的なテキストが乗ってるサイトを近頃よく見ます。Bootstrapでは、「jumbotron（ジャンボトロン）」というクラスで実現できます。

ブラウザの幅目一杯に表示されます。

リキッドレイアウト（スマートフォンサイズの幅に縮める）にも対応しています。

準備

特に準備する必要はありません。htmlファイルをメモ帳などで作成します。（例：index.html）

作成したhtmlファイルをダブルクリックし、ブラウザから動作を確認していきます。

環境

bootstrap	3.3.6
jQuery	1.11.1

ジャンボトロン基本コード

①index.htmlファイルをメモ帳などで作成します。以下のコードをコピペして下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<!--CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!--JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--自作CSS -->
<style type="text/css"><!--
/*ここに調整CSS記述*/
--></style>

</head>

<body>
 <!--　▼ ジャンボトロン　 -->
    <div class="container">
        <div class="jumbotron">
          <h1>見出しテキストテキスト</h1>
          <p>サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト</p>
        </div>
    </div>
<!--　▲ ジャンボトロン　 -->
</body>
</html>

②ブラウザで以下のようなページが開きます。

解説

<!--CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!--JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

「Bootstrap CDN」を記述します。

「Bootstrap CDN」は、外部からBootstrapをホスティングします。CDNは、特にファイル一式をダウンロードすることなく、htmlページにBootstrapをサイトに組み込めます。

<!--　▼ ジャンボトロン　 -->
    <div class="container">
        <div class="jumbotron">
          <h1>見出しテキストテキスト</h1>
          <p>サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト</p>
        </div>
    </div>
<!--　▲ ジャンボトロン　 -->

ジャンボトロンは、div要素にclass「jumbotron」を適用して、この中に見出しの内容を記述します。その外側をdiv要素にclass「container」を適用して囲みます。

この場合、ジャンボトロンの背景色は角丸にはなりません。ジャンボトロンを画面全幅に広げます。

全幅ジャンボトロン

基本コードでは左右上下に余白がありましたが、画面いっぱいに広げるには以下のように記述します。

①index.htmlファイルをメモ帳などで作成します。以下のコードをコピペして下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<!--CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!--JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--自作CSS -->
<style type="text/css"><!--
/*ここに調整CSS記述*/
--></style>

</head>

<body>
 <!--　▼ ジャンボトロン　 -->
    <div class="jumbotron">
      <div class="container">
        <h1>見出しテキストテキスト</h1>
        サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
      </div>
    </div>
<!--　▲ ジャンボトロン　 -->
</body>
</html>

②ブラウザで以下のようなページが開きます。

解説

<!--　▼ ジャンボトロン　 -->
    <div class="jumbotron">
      <div class="container">
        <h1>見出しテキストテキスト</h1>
        サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
      </div>
    </div>
<!--　▲ ジャンボトロン　 -->

div要素class「jumbotron」を外側、div要素class「container」を内側にします。

この場合、ジャンボトロンの背景色は角丸にはなりません。ジャンボトロンを画面全幅に広げます。

ジャンボトロンの文字を中央寄せにする

ジャンボトロン内の文字を中央寄せにします。

①index.htmlファイルをメモ帳などで作成します。以下のコードをコピペして下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<!--CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!--JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--自作CSS -->
<style type="text/css"><!--
/*ここに調整CSS記述*/
--></style>

</head>

<body>
 <!--　▼ ジャンボトロン　 -->
    <div class="container">
        <div class="jumbotron  text-center">
          <h1 style="color: #ffffff;">見出しテキストテキス</h1>
          <p class="text-muted">サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト</p>
        </div>
    </div>
<!--　▲ ジャンボトロン　 -->
</body>
</html>

②ブラウザで以下のようなページが開きます。

class「jumbotron」を適用したdiv要素に、class「text-center」を追加します。

ジャンボトロン背景画像

ジャンボトロンに背景画像を入れることも可能です。

①index.htmlファイルをメモ帳などで作成します。以下のコードをコピペして下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<!--CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!--JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--自作CSS -->
<style type="text/css"><!--
/*ここに調整CSS記述*/
--></style>

</head>
<body>
 <!--　▼ ジャンボトロン　 -->
    <div class="container">
        <div class="jumbotron" style="background:url(images/bimg001.jpg); background-size:cover;">
          <h1 style="color: #ffffff;">見出しテキストテキス</h1>
          <p class="text-muted">サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト</p>
        </div>
    </div>
<!--　▲ ジャンボトロン　 -->
</body>
</html>

②画像ファイルを配置します。以下のようにフォルダを作ってファイルを置いて下さい。

jumbotron/
index.html
images/
bimg001.jpg

③ブラウザで以下のようなページが開きます。

解説

<!--　▼ ジャンボトロン　 -->
    <div class="container">
        <div class="jumbotron" style="background:url(images/bimg001.jpg); background-size:cover;">
          <h1 style="color: #ffffff;">見出しテキストテキス</h1>
          <p class="text-muted">サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト</p>
        </div>
    </div>
<!--　▲ ジャンボトロン　 -->

background:url(画像ファイル.jpg)に背景画像を指定します。