1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。

トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。
今回はそんな記事一覧ページを作るのに便利な「カード」という機能の使い方を紹介しようと思います。

目次
  1. カードの使い方の基本
  2. カードの中にタイトルを挿入する
  3. カードの中にリンクを挿入する
  4. 画像をボトムに配置する
  5. 画像の上に文字をかぶせる
  6. カードにヘッダーやフッターを作る
  7. まとめ
  8. 参考サイト

カードの使い方の基本

まず基本的なカードの使い方です。

「card」というクラスを使い、その中に画像やテキストを入れていきます。
下の例ではトップに画像を置くので、「card-img-top」というクラスをimgタグに指定します。

さらに内容部分には「card-body」クラスを指定し、テキスト部分には「card-text」クラスを指定します。
style="width: 280px;"を入れているのは、サイズを指定しないとサイズが最大になってしまうからです。

<div class="card" style="width: 280px;">
	<img class="card-img-top" src="./img/280x150.png" alt="カード画像">
	<div class="card-body">
		<p class="card-text">カードの使い方の紹介ページです。</p>
	</div>
</div>

カードの中にタイトルを挿入する

もしもブログなどの記事一覧を作成している場合は、カードの中にタイトルは必須となります。
では、カードの中にタイトルを挿入してみましょう。
追加したのは4行目です。

<div class="card" style="width: 280px;">
	<img class="card-img-top" src="./img/280x150.png" alt="カード画像">
	<div class="card-body">
		<h3 class="card-title">記事タイトル</h3>
		<p class="card-text">カードの使い方の紹介ページです。</p>
	</div>
</div>

また、「card-subtitle」クラスを使うことで、サブタイトルを挿入することもできます。
文字のサイズや色などは、各自設定する必要があります。

<div class="card" style="width: 280px;">
	<img class="card-img-top" src="./img/280x150.png" alt="カード画像">
	<div class="card-body">
		<h3 class="card-title">記事タイトル</h3>
		<h4 class="card-subtitle">サブタイトル</h3>
		<p class="card-text">カードの使い方の紹介ページです。</p>
	</div>
</div>

カードの中にリンクを挿入する

カードの中にリンクを挿入する場合は「card-link」クラスを使います。
2つリンクを挿入することで、後ろ側のリンクにスタイルが当てられ、前後の間に隙間をあけることができます。

<div class="card" style="width: 280px;">
	<img class="card-img-top" src="./img/280x150.png" alt="カード画像">
	<div class="card-body">
		<h3 class="card-title">記事タイトル</h3>
		<h4 class="card-subtitle">サブタイトル</h3>
		<p class="card-text">カードの使い方の紹介ページです。</p>
		<a href="#" class="card-link">リンク1</a>
		<a href="#" class="card-link">リンク2</a>
	</div>
</div>

画像をボトムに配置する

いままで画像をトップに配置していましたが、ボトムに持っていきたい場合、「card-img-bottom」クラスを使います。

<div class="card" style="width: 280px;">
	<div class="card-body">
		<h3 class="card-title">記事タイトル</h3>
		<p class="card-text">カードの使い方の紹介ページです。</p>
	</div>
	<img class="card-img-bottom" src="./img/280x150.png" alt="カード画像">
</div>

画像の上に文字をかぶせる

画像の上に文字をかぶせるには、「card-img-overlay」クラスを使います。

<div class="card" style="width: 280px;">
	<img class="card-img" src="./img/280x150.png" alt="カード画像">
	<div class="card-img-overlay">
		<h3 class="card-title">記事タイトル</h3>
		<p class="card-text">カードの使い方の紹介ページです。</p>
	</div>
</div>

カードにヘッダーやフッターを作る

「card-header」クラスを使うと、カードにヘッダーを作ることができます。

<div class="card" style="width: 280px;">
	<h3 class="card-header">記事タイトル</h3>
	<div class="card-body">
		<p class="card-text">カードの使い方の紹介ページです。</p>
	</div>
</div>

また、「card-footer」クラスを使うと、フッターも作ることができます。

<div class="card" style="width: 280px;">
	<h3 class="card-header">記事タイトル</h3>
	<div class="card-body">
		<p class="card-text">カードの使い方の紹介ページです。</p>
	</div>
	<div class="card-footer">
		記事フッター
	</div>
</div>

まとめ

Bootstrapには便利な機能がたくさんあります。今回のカードもその一つです。
カードの機能を使うと、記事一覧ページなどをつくるのに役立ちます。その他工夫を加えて、かっこいいWebサイトを作っていきましょう。

以上、Bootstrap4でのカードの使い方についての紹介でした。

参考サイト

参考サイト : Bootstrap 公式ページ

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. 【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

コメントをどうぞ!

メールアドレスが公開されることはありません。