<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>
複数のカードを並べる
複数のカードを並べるときは個々のカードを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>
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>
カード内の見た目を整える
タイトルを強調する
カードのタイトルになる部分を表示する方法としては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>
カードの中身を中央寄せにする
カードの中身を全部中央寄せにすることもできます。
<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>
カードの幅を変える
style属性にwidthを記述してサイズ変更できます。 ここのサンプルは省略
参考資料