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

スポンサードリンク

関連コンテンツ

オススメ記事

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

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

Scratchで じゃんけんゲームを作ろう!

小学生から始めるScratch入門。じゃんけんゲームを作ろう!

小学生から始めるScratch入門です。 前回、スクラッチでシューティングゲームを作りました。 今回はじゃんけんゲームを作ってみましょう。 プロローグ [serif icon=

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第7弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変

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

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

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

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

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

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

コメントをどうぞ!

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