【Bootstrap基礎学習19】カードを作成してみよう!




こんにちは、かつコーチです。

僕は現在、プログラミングを学習していて、その学習の中で理解したことを、

リアルタイムで発信しています。

今回は、CSSのフレームワークであるBootstrapを使って、

カードを作成する方法をご紹介します。

カードとは?

カードとは、枠で囲まれたひとまとまりのコンテンツのことです。

見た方が分かりやすいです。

こんなやつです。

Webサイトなどでよくみかける画像とテキストが入ったやつですね。

これをカードと呼びます。

基本的な作成方法

カードなので、cardクラスがたくさん用意されています。

クラス 概要
card-title カードのタイトルを作成
card-subtitle カードのサブタイトルを作成
card-body カードの本文を作成
card-text カードのテキストを作成
card-link カードにリンクを作成
card-img-top カードの上部に画像を配置
card-img-bottom カードの下部に画像を配置
card-header カードのheaderエリアを作成
card-footer カードのfooterエリアを作成

これを踏まえて、先ほどのカードのコードは以下のようになります。

  <h1 class="my-5">Card Components</h1>
  <div class="container">
    <h2 class="my-5">カード</h2>
      <div class="card" style="max-width: 25rem;">
        <img class="card-img-top" src="img/img1.jpg" 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>
  </div>

まず、cardクラスでカードの枠を作ります。

大きさを指定できて、ここでは幅に対して25remにしています。

img要素の画像は、card-img-topで画像を上に配置します。

タイトルはcard-title、サブタイトルはcard-subtitle、本文はcard-bodyで、

それぞれ指定しています。

カードに色をつける

次に、カードのスタイルを変更する方法をご紹介します。

カードの文字色や背景色を設定する

まずは、文字色や背景色など色の設定です。

文字色を変える場合はtext-{色の指定}、背景色を変える場合はbg-{色の指定}、

で、それぞれ変えることができます。

<h1 class="my-5">Card Components</h1>
<div class="container">
  <h2 class="my-5">カードの色の変更</h2>
  <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Secondary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3" style="max-width: 18rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Success card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Danger card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Warning card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Info card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Light card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title">Dark card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
</div>

カードのボーダーの色を変える

次に、カードのボーダーを色を変えるには、border-{色の指定}で変えることができます。

  <h1 class="my-5">Card Components</h1>
  <div class="container">
    <h2 class="my-5">カードのボーダーの色の変更</h2>
    <div class="card border-primary mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body text-primary">
          <h5 class="card-title">Primary card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-secondary mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body text-secondary">
          <h5 class="card-title">Secondary card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-success mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body text-success">
          <h5 class="card-title">Success card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-danger mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body text-danger">
          <h5 class="card-title">Danger card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-warning mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body text-warning">
          <h5 class="card-title">Warning card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-info mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body text-info">
          <h5 class="card-title">Info card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-light mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
          <h5 class="card-title">Light card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-dark mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body text-dark">
          <h5 class="card-title">Dark card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>

カードグループによるレイアウト

カードが複数あるときのレイアウトを考えてみます。

こういうやつですね。

複数扱うときは、card-groupクラスを使います。

コードで書くと以下のようになります。

<h1 class="my-5">Card Components</h1>
<div class="container">
  <h2 class="my-5">複数のカードのレイアウト</h2>
  <div class="card-group">
      <div class="card">
        <img src="img/img1.jpg"" class="card-img-top" alt="与論島の百合ヶ浜">
        <div class="card-body">
          <h5 class="card-title">与論島</h5>
          <p class="card-text">鹿児島県大島郡与論町にある百合ヶ浜</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        <img src="img/img2.jpg" class="card-img-top" alt="北海道の中富良野">
        <div class="card-body">
          <h5 class="card-title">中富良野</h5>
          <p class="card-text">富良野にあるファーム富田</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        <img src="img/img3.jpg" class="card-img-top" alt="富山の立山">
        <div class="card-body">
          <h5 class="card-title">立山</h5>
          <p class="card-text">立山山頂から。</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
    </div>

カードデッキによるレイアウト

カードグループは連結していますが、連結しないで表示したい場合は、

card-deckクラスを使います。

先程のコードのcard-groupをcard-deckに変えるだけで、連結しない表示になります。

まとめ

以上、今回はカードを作成する方法をご紹介しました。

カードとかナビゲーションとかを勉強すると、

「WebサイトがBootstrapで作られてるのか」と気づくことが多い(笑)。

まだまだいろんな機能がありますが、基本的なことを抑えて応用していければと思います。

プログラミング学習において参考になれば幸いです。

学習の参考になるサイト

今やプログラミングの学習はネットで学ぶことができます。

僕もここから始めています。

ネット上にはたくさんの学習サイトがありますが、おすすめとしては、

この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です!

無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、

有料プランへ変更すれば良いと思います。

有料プランはどちらも月額980円(税込)です。

まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、

こちらからやってみることをおすすめします。

Bootstrap公式サイト

学習する際は、Bootstrap公式サイトを見てみるのも良いでしょう。

英語ではありますが、だいたいこういうことができるんだとというのが分かります。

Bootstrap公式サイト・・・https://getbootstrap.com/

初心者へおすすめの入門書籍(※2019年8月13日追記)

ある程度、動画で学んだら、もっとしっかり学びたくなるもの。

そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。

僕のおすすめの書籍は、以下の1冊のみです。

いろんな書籍あるけど、Bootstrapはこれ1冊で十分です。

Bootstrapについては、ドットインストールなどでの紹介もちょっと弱い感じがします。

僕も最初勉強したとき、よくわかりませんでした。

いろいろ考慮している内にこの本にたどり着きました。

勿論、動画などで勉強した後に、手に取ってみるべきですが、

これ1冊でほぼ全てを網羅できると思うので、辞書感覚でも使えると思います。

こちらも最後には1つのサイトを作成するまでを学べます。

スクールを検討してみよう(※2019年9月13日追記)

  • 独学でやっていると、結局やらなくなってしまいそうで不安。
  • もっと効率よく早く学びたい。

と心配になる方もいるかもしれません。

そんな方は、一度スクールを検討してみることをお勧めします。

スクールでの学習なら、挫折が怖いという方もサポートを受けることが出来るので安心です。

自分の目標やゴールを、プロが一緒に設定してくれ、今後のキャリアの話もできます。

とはいえ、いきなりスクールに通うのもかなり不安ですし、それは絶対おすすめしません。

スクールに通うとなると高いお金を払うことになるので、

まずは無料体験レッスンを受けてみることをおすすめします。

たくさんあるスクールの中で僕がおすすめするのは、僕も通っている侍エンジニア塾です。

僕は、効率よくより早く学びたかったので、通うことに決めたのですが、

侍エンジニア塾を選んだ理由としては、圧倒的なコンサルタント力です。

実際に、僕も悩んだことがありますが、対応が早く、不安や心配にしっかり耳を傾けて、

解決へと導いてくれます。

講師だけでなく、周りのスタッフもサポートしてくれる点は大きいです。

「とりあえず話をしてみたいかも…」と思った方は、

無料体験レッスンを受けてみてはいかがでしょうか?