<bootstrap>cardを使っていい感じに見えるようにする

(連続してますがbootstrapネタ) (重ねていいますが、ざっくり記述する予定です)

cardを使った見やすくする方法

このエントリを書いた背景

  • cardコンポーネントの大まかな使い方をまとめて見れるようにしたい
  • カスタムするときにどうしたらいいかの参考にしたい

    そもそもcardコンポーネントで何ができる

  • ざっくりいうと見た目を美しくできる

  • 属性ごとに情報を分けて表示できる

cardコンポーネントの使い方

基本の使い方

基本的なコードの書き方はこんな感じ

<div class="card">
  <div class="card-body">
    <div class="card-title">
      <h5>card sample</h5>
    </div>
    <div class="card-text">
      <p>This is a card sample.</p>
    </div>
  </div>
</div>

f:id:poolbooyer:20181003133921p:plain

複数のカードを並べる

複数のカードを並べるときは個々のカードをcard-groupクラスでくくることでまとめて扱えます。2つのときのサンプルを下の方にかきました。

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h5>card sample</h5>
      </div>
      <div class="card-text">
        <p>This is a card sample.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h5>card sample</h5>
      </div>
      <div class="card-text">
        <p>This is a card sample.</p>
      </div>
    </div>
  </div>
</div>

f:id:poolbooyer:20181003135209p:plain gorupにすると横の隙間がなく、ビッタリ並んで配置されるんですがgroupの部分をdeckにすると隙間を持って並べられます。

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h5>card sample</h5>
      </div>
      <div class="card-text">
        <p>This is a card sample.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h5>card sample</h5>
      </div>
      <div class="card-text">
        <p>This is a card sample.</p>
      </div>
    </div>
  </div>
</div>

f:id:poolbooyer:20181003141121p:plain

カード内の見た目を整える

タイトルを強調する

カードのタイトルになる部分を表示する方法としてはcard-headerクラスでヘッダーにする文を囲むとヘッダー表示ができます

<div class="card">
  <div class="card-header">
    <p>This is card header.</p>
  </div>
  <div class="card-body">
    <div class="card-title">
      <h5>card sample</h5>
    </div>
    <div class="card-text">
      <p>This is a card sample.</p>
    </div>
  </div>
</div>

f:id:poolbooyer:20181003142038p:plain

カードの中身を中央寄せにする

カードの中身を全部中央寄せにすることもできます。

<div class="card text-center">
  <div class="card-header">
    <p>This is text-center.</p>
  </div>
  <div class="card-body">
    <div class="card-title">
      <h5>card sample</h5>
    </div>
    <div class="card-text">
      <p>This is a card sample.</p>
    </div>
  </div>
</div>

f:id:poolbooyer:20181004003542p:plain

カードの幅を変える

style属性にwidthを記述してサイズ変更できます。 ここのサンプルは省略

参考資料

getbootstrap.com