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によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

リセットCSS は何を使う? まとめ8選と2019年版ランキング

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

プログラミングのクラスってなぁに?

小学生からのJavaScript。クラスの概念をしっかりと理解しよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「ク

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

ファイルを分けるべよ!

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

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

コメントをどうぞ!

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