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

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

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

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

カードの使い方の基本

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

「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、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

文字を表示するクラスを作ろう!

小学生からのJavaScript。文字を表示するクラスを作ってみよう!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

コメントをどうぞ!

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