【Bootstrap】基本的なコンポーネントの使い方を紹介

Bootstrap

今回は、UIを構成する様々なコンポーネントの使い方を紹介します(^^)

ジャンボトロン

Webサイトのトップページによくあるメインビジュアルなどの、一般的なコンテンツよりも大きくインパクトのある表示をするのに便利なコンポーネントとして、ジャンボトロンというものがあります。

基本的な使い方

ジャンボトロンをつくるには、div 要素に jumbotron クラスを追加します。

<div class="jumbotron">
  <h1 class="display-3">jumbotron</h1>
  <p class="lead">これはサンプルです。</p>
</div>

ジャンボトロンを全幅で表示

jumbotron クラスを指定した要素に jumbotron-fluid クラスを追加することで、ジャンボトロンを横幅いっぱいに表示することができます。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">jumbotron</h1>
    <p class="lead">これはサンプルです。</p>
  </div>
</div>

アラート

基本的な使い方

メッセージを囲む親要素に alert クラスalert-{ 色の種類 } クラスを追加することで、アラートを作ることができます。

また、属性 role=”alert” を追加することでスクリーンリーダーなどにこのコンポーネントの役割がアラートであることを伝えます。

<div class="alert alert-primary" role="alert">
  色を示すクラス名:alert-primary
</div>
<div class="alert alert-secondary" role="alert">
  色を示すクラス名:alert-secondary
</div>
<div class="alert alert-success" role="alert">
  色を示すクラス名:alert-success
</div>
<div class="alert alert-danger" role="alert">
  色を示すクラス名:alert-danger
</div>
<div class="alert alert-warning" role="alert">
  色を示すクラス名:alert-warning
</div>
<div class="alert alert-info" role="alert">
  色を示すクラス名:alert-info
</div>
<div class="alert alert-light" role="alert">
  色を示すクラス名:alert-light
</div>
<div class="alert alert-dark" role="alert">
  色を示すクラス名:alert-dark
</div>

リンクの色

アラート内の a 要素に alert-link クラスを追加することで、a 要素の文字色を背景色にあわせて表示することができます。

<div class="alert alert-primary" role="alert">
  alert-primary<a class="alert-link">a 要素</a>
</div>
<div class="alert alert-secondary" role="alert">
  alert-secondary<a class="alert-link">a 要素</a>
</div>
<div class="alert alert-success" role="alert">
  alert-success<a class="alert-link">a 要素</a>
</div>
<div class="alert alert-danger" role="alert">
  alert-danger<a class="alert-link">a 要素</a>
</div>
<div class="alert alert-warning" role="alert">
  alert-warning<a class="alert-link">a 要素</a>
</div>
<div class="alert alert-info" role="alert">
  alert-info<a class="alert-link">a 要素</a>
</div>
<div class="alert alert-light" role="alert">
  alert-light<a class="alert-link">a 要素</a>
</div>
<div class="alert alert-dark" role="alert">
  alert-dark<a class="alert-link">a 要素</a>
</div>

アラート内にコンテンツを追加

アラート内には、見出しや段落などを追加することができます。alert-heading クラスを追加することで見出しとして設定することができます。

<div class="alert alert-primary" role="alert">
  <h4 class="alert-heading">アラートの見出し</h4>
  <p>アラート内の文章</p>
</div>

アラートを閉じる

アラートを閉じるには、alert クラスが設定された要素に alert-dismissible クラスを追加します。

アラートを閉じるボタンは、button 要素に close クラスを追加し、JavaScript でアラートを閉じる機能を実装するために data-dismiss=”alert” を加えます。

<div class="alert alert-primary alert-dismissible" role="alert">
  閉じる→
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

ちなみに “&times;” は、”×” を表す特殊文字です。

バッジ

基本的な使い方

バッジをつくるには、span 要素に badge クラス、badge-{ 色の種類 } クラスを追加します。

バッジサイズは、親要素のフォントサイズが継承されます。

<h1>h1 <span class="badge badge-primary">primary</span></h1>
<h2>h2 <span class="badge badge-secondary">secondary</span></h2>
<h3>h3 <span class="badge badge-success">success</span></h3>
<h4>h4 <span class="badge badge-danger">danger</span></h4>
<h5>h5 <span class="badge badge-warning">warning</span></h5>
<h6>h6 <span class="badge badge-info">info</span></h6>
<p>p <span class="badge badge-light">light</span></p>
<p>p <span class="badge badge-dark">dark</span></p>

カウンターの作成

先ほど作ったバッジの span 要素をカウンターとして使います。

<button type="button" class="btn btn-primary">
  通知<span class="badge badge-light">5</span>
</button>

バッジに丸みをつける

バッジの要素に badge-pill クラスを追加することで、バッジに丸みをつけることができます。

<span class="badge badge-pill badge-primary">primary</span>
<span class="badge badge-pill badge-secondary">secondary</span>
<span class="badge badge-pill badge-success">success</span>
<span class="badge badge-pill badge-danger">danger</span>
<span class="badge badge-pill badge-warning">warning</span>
<span class="badge badge-pill badge-info">info</span>
<span class="badge badge-pill badge-light">light</span>
<span class="badge badge-pill badge-dark">dark</span>

アクショナブルなバッジの作成

a 要素に badge クラス、badge-{ 色の種類 } クラスを追加することで、ホバーやフォーカスされたときに色が濃くなるようにすることができます。

<a href="#" class="badge badge-primary">primary</a>

プログレス

プログレスとは、作業の経過や進捗状況を横長のバーで示したプログレスバーを作るためのコンポーネントです。

基本的な使い方

まず、コンポーネント全体を囲む要素に progress クラスを追加し、その子要素に progress-bar クラスを追加して、このプログレスバーのブロックを作ります。

進捗状況を示すバーの長さを指定する必要があるので、progress-bar クラスを指定した要素に対し、style=”width:○○%” と指定するか、w-{ 横幅(%)} クラスを使用して、25%、50%、75%、100%の4段階で指定します。


また、アクセシビリティへの配慮のため、属性 role=”progressbar” を追加することで、スクリーンリーダーなどにこれがプログレスバーの役割であることを伝え、
aria-valuenow=”現在値”、aria-valuemin=”最小値”、aria-valuemax=”最大値” 属性を追加することでプログレスバーの状態を伝えます。

<div class="progress mb-3">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar" style="width:63%" role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

プログレスバーにテキストラベルを追加

progress-bar クラスが設定された要素にテキストを入力すると、テキストラベルが追加されます。

<div class="progress mb-3">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar" style="width:63%" role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100">63%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
  <div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>

プログレスバーの高さを変更

progress クラスを設定した要素に style=”height:○○” を追加することで、プログレスバーの高さを変更することができます。

<p>height: 1px</p>
<div class="progress mb-3" style="height:1px">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>height: 10px</p>
<div class="progress" style="height:10px">
  <div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

プログレスバーの色を変更

progress-bar クラスが設定された要素に bg-{ 色の種類 } クラスを設定することで、プログレスバーの色を変更することができます。

<p>bg-primary</p>
<div class="progress mb-3">
  <div class="progress-bar bg-primary w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>bg-secondary</p>
<div class="progress mb-3">
  <div class="progress-bar w-25 bg-secondary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>bg-success</p>
<div class="progress mb-3">
  <div class="progress-bar bg-success" style="width:63%" role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>bg-danger</p>
<div class="progress mb-3">
  <div class="progress-bar w-75 bg-danger" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>bg-warning</p>
<div class="progress">
  <div class="progress-bar w-100 bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

プログレスバーを重ねて表示

progress クラスが設定された要素の中に、progress-bar クラスを指定した要素を複数追加することで、プログレスバーを重ねて表示することができます。

<div class="progress">
  <div class="progress-bar bg-primary" style="width:23%" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100">23%</div>
  <div class="progress-bar bg-warning" style="width:28%" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100">28%</div>
  <div class="progress-bar bg-success" style="width:20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>

プログレスバーをストライプにする

標準的なストライプ

progress-bar クラスが設定された要素に progress-bar-striped クラスを追加することで、プログレスバーをストライプ柄にすることができます。

<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped bg-primary w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped w-25 bg-secondary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped bg-success" style="width:63%" role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped w-75 bg-danger" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped w-100 bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ストライプをアニメーションに

さらに progress-bar-animated クラスを追加することでアニメーションにすることができます。

<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated w-25 bg-secondary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:63%" role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated w-75 bg-danger" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated w-100 bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

カード

カードとは、枠で囲まれたひとかたまりのコンテンツを作るためのコンポーネントです。

この中には、画像、テキスト、リンクなどさまざまな要素を入れることができます。

基本的な使い方

コンポーネント全体を囲む要素に card クラスを追加し、その子要素に様々なクラスをつけるという形になります。

たとえば、カード上部に配置される画像には、img 要素に card-img-top クラスを追加し、カードの本文エリアとなる要素には card-body クラスを追加します。

カードの見出しとなる要素には card-title クラスを、
副見出しとなる要素には card-subtitle クラスを、
その内容となる要素には card-text クラスを追加します。

<div class="card">
  <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <h6 class="card-subtitle">副見出し</h6>
    <p class="card-text">カードの内容</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

画像の配置

カード上部に画像を配置するには card-img-top クラスを、
カード下部に画像を配置するには card-img-bottomクラスを追加します。

<div class="card">
  <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
  <div class="card-body">
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <p class="card-text">カードの内容</p>
  </div>
  <img src="https://picsum.photos/500/300" class="card-img-bottom" alt="">
</div>

リストグループの配置

list-group クラスが設定された要素に list-group-flush クラスを追加することで、カード内にリストグループを配置することができます。

<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">リスト1</li>
    <li class="list-group-item">リスト2</li>
    <li class="list-group-item">リスト3</li>
  </ul>
</div>

リンクの配置

a 要素に card-link クラスを追加することで、カード内にリンクを配置することができます。

<div class="card">
  <div class="card-body">
    <a href="#" class="card-link">カードリンク</a>
    <a href="#" class="card-link">カードリンク</a>
  </div>
</div>

ヘッダーとフッターの作成

ヘッダーとなる要素に card-header クラスを、
フッターとなる要素に card-footer クラスを追加することで、カード内にヘッダーとフッターをつくることができます。

<div class="card">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
  <div class="card-footer">
    フッター
  </div>
</div>

カードのスタイルを変更

背景色や文字色を変更

text-{ 色の種類 } クラスbg-{ 色の種類 } クラスを追加することで色を変更することができます。

<div class="card text-white bg-primary">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card text-white bg-secondary">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card text-white bg-success">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card text-white bg-danger">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card text-white bg-warning">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>

ボーダー色を変更

border-{ 色の種類 } クラスを追加することで、ボーダー色を変更できます。

<div class="card border-primary">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card border-secondary">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card border-success">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card border-danger">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>
<div class="card border-warning">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>

背景色を透明に

カードのヘッダーやフッターには、背景色にデフォルトでグレーが設定されています。

これを除去するには、card-header クラスや card-footer クラスが設定された要素に bg-transparent クラスを追加します。

<p>デフォルト</p>
<div class="card">
  <div class="card-header">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
  <div class="card-footer">
    フッター
  </div>
</div>
<p>背景色を除去</p>
<div class="card">
  <div class="card-header bg-transparent">
    ヘッダー
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
  <div class="card-footer bg-transparent">
    フッター
  </div>
</div>

カードのサイズを変更

グリッドレイアウトに組み込む

card クラスが設定された要素をグリッドレイアウトの中に組み込んで、カラムとして幅の指定を行います。

<div class="row">
  <div class="col-4">
    <div class="card">
      <div class="card-header">
        ヘッダー
      </div>
      <div class="card-body">
        <h4 class="card-title">見出し</h4>
        <p class="card-text">カードの内容</p>
        <a href="#" class="btn btn-primary">ボタン</a>
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
      <div class="card-header">
        ヘッダー
      </div>
      <div class="card-body">
        <h4 class="card-title">見出し</h4>
        <p class="card-text">カードの内容</p>
        <a href="#" class="btn btn-primary">ボタン</a>
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
      <div class="card-header">
        ヘッダー
      </div>
      <div class="card-body">
        <h4 class="card-title">見出し</h4>
        <p class="card-text">カードの内容</p>
        <a href="#" class="btn btn-primary">ボタン</a>
      </div>
    </div>
  </div>
</div>

Sizing ユーティリティを使用

card クラスが設定された要素に w-{ 横幅(%)} クラスを追加して横幅を指定します。

プロパティには、25、50、75、100 が入ります。

<div class="card">
  <div class="card-header">
    横幅の指定なし(親要素の幅100%)
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>
<div class="card w-50">
  <div class="card-header">
    w-50 クラス(親要素の幅50%)
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

テキストの整列

card クラスが設定された要素に text-right クラスtext-center クラスを追加することで、テキストを右揃え、中央揃えにすることができます。

<div class="card">
  <div class="card-header">
    指定なし(左揃え)
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>
<div class="card text-center">
  <div class="card-header">
    text-center (中央揃え)
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>
<div class="card text-right">
  <div class="card-header">
    text-right (右揃え)
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

ナビゲーションを組み込む

ナビゲーションをカードのヘッダー内に組み込むことができます。

タブ型ナビゲーション

カードのヘッダー内に、nav クラスnav-tabs クラスが設定された ul 要素をつくり、それに card-header-tabs クラスを追加します。

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a href="#" class="nav-link active">アクティブ</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">タブ1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">タブ2</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

ピル型ナビゲーション

カードのヘッダー内に、nav クラスnav-pillsクラスが設定された ul 要素をつくり、それに card-header-pillsクラスを追加します。

<div class="card">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a href="#" class="nav-link active">アクティブ</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">タブ1</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">タブ2</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

画像とテキストを重ねる

カード内のテキストブロックに card-img-overlay クラスを追加することで、テキストを card-img クラスが設定された画像の上に配置することができます。

<div class="card">
  <img src="https://picsum.photos/500/300" class="card-img" alt="">
  <div class="card-body card-img-overlay text-white">
    <h4 class="card-title">見出し</h4>
    <p class="card-text">カードの内容</p>
  </div>
</div>

カードをレイアウトする

カードには、カードグループ・カードデッキ・カードカラムといったコンポーネントが用意されています。

カードグループ

カードグループは、複数のカードを連結して均一のサイズでグループ化するコンポーネントです。

複数のカードの親要素に card-group クラスを追加することでグループ化し、display:flex を指定したときと同じレイアウトになります。

<div class="card-group">
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">見出し</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <div class="card-footer">
      フッター
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">見出し</h4>
      <p class="card-text">カードの内容<br><br>カードの内容</p>
    </div>
    <div class="card-footer">
      フッター
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">見出し</h4>
      <p class="card-text">カードの内容<br><br>カードの内容<br><br>カードの内容</p>
    </div>
    <div class="card-footer">
      フッター
    </div>
  </div>
</div>

カードデッキ

カードデッキは、複数のカードを連結せずに均一のサイズでグループ化するコンポーネントです。

複数のカードの親要素に card-deckクラスを追加することでグループ化し、display:flex を指定したときと同じレイアウトになります。

<div class="card-deck">
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">見出し</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <div class="card-footer">
      フッター
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">見出し</h4>
      <p class="card-text">カードの内容<br><br>カードの内容</p>
    </div>
    <div class="card-footer">
      フッター
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">見出し</h4>
      <p class="card-text">カードの内容<br><br>カードの内容<br><br>カードの内容</p>
    </div>
    <div class="card-footer">
      フッター
    </div>
  </div>
</div>

カードカラム

カードカラムは、カードの列をタイル状にレイアウトするコンポーネントです。

複数のカードの親要素に card-columns クラスを追加することで実装できます。

<div class="card-columns">
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">card1</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">card2</h4>
      <p class="card-text">Lorem ipsum dolor </p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">card3</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">card4</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">card5</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">card6</h4>
      <p class="card-text">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">card7</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/300" class="card-img-top" alt="">
    <div class="card-body">
      <h4 class="card-title">card8</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">card9</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
    </div>
  </div>
</div>

メディアオブジェクト

メディアオブジェクトは、横並びの画像と本文で構成されています。

基本的な使い方

まず、div 要素に media クラスを設定し、メディアオブジェクトの外枠を作ります。

その中に画像と本文を配置し、本文となる要素に media-body クラスを追加します。

<div class="media">
  <img src="https://picsum.photos/60/60" alt="">
  <div class="media-body">
    <h4>見出し</h4>
    <p>本文がここに入ります。</p>
  </div>
</div>

メディアオブジェクトの入れ子

media-body クラスが設定された要素の中に media クラスを設定した要素を配置することで、メディアオブジェクトを入れ子にすることができます。

<div class="media">
  <img src="https://picsum.photos/60/60" alt="">
  <div class="media-body">
    <h4>見出し</h4>
    <p>本文がここに入ります。</p>
    <div class="media">
      <img src="https://picsum.photos/60/60" alt="">
      <div class="media-body">
        <h4>見出し</h4>
        <p>本文がここに入ります。</p>
      </div>
    </div>
  </div>
</div>

メディアの整列

align-self-{ 位置 } クラスをメディアオブジェクト内の要素に追加することで、整列させることができます。

“位置”には、start(上揃え)center(中央揃え)end(下揃え)が入ります。

<div class="media">
  <img src="https://picsum.photos/60/60" class="align-self-start" alt="">
  <div class="media-body">
    <h4>align-self-start</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>
<hr>
<div class="media">
  <img src="https://picsum.photos/60/60" class="align-self-center" alt="">
  <div class="media-body">
    <h4>align-self-center</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>
<hr>
<div class="media">
  <img src="https://picsum.photos/60/60" class="align-self-end" alt="">
  <div class="media-body">
    <h4>align-self-end</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

メディアの並べ替え

order-{ 順番 } クラスをメディアオブジェクト内の要素に追加することで、画像と本文の見た目上の順序を入れ替えることができます。

<div class="media">
  <img src="https://picsum.photos/60/60" class="align-self-start" alt="">
  <div class="media-body">
    <h4>通常のレイアウト</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>
<hr>
<div class="media">
  <img src="https://picsum.photos/60/60" class="align-self-center order-2" alt="">
  <div class="media-body order-1">
    <h4>入れ替えたレイアウト</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

メディアオブジェクトをリスト化

ul ・ol 要素の中の li 要素 media クラスを追加して、これまでと同様にメディアを配置することで、メディアオブジェクトをリスト化することができます。

<ul class="list-unstyled">
  <li class="media">
    <img src="https://picsum.photos/60/60" class="align-self-start" alt="">
    <div class="media-body">
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
  </li>
  <li class="media">
    <img src="https://picsum.photos/60/60" class="align-self-start" alt="">
    <div class="media-body">
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
  </li>
  <li class="media">
    <img src="https://picsum.photos/60/60" class="align-self-start" alt="">
    <div class="media-body">
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
  </li>
</ul>






今回は以上になります。

ご覧いただきありがとうございました(^^)
続きはこちら↓

コメント

コンタクトフォーム

    タイトルとURLをコピーしました