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

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress

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

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

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうです。@It_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

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

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

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

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

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

コメントをどうぞ!

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