Bootstrap - カード：ビギナーズガイド

こんにちは、未来のウェブ開発者たち！今日は、Bootstrap カードの素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのが楽しみです。一緒にデジタルスクラップブックを作っていると想像してね – それが基本的にはBootstrap カードでやることです！

Bootstrap - Cards

Bootstrap カードとは？

コードに飛び込む前に、Bootstrap カードが何かを理解しましょう。柔軟なコンテナ、例えば箱のようなもの、そこにさまざまなコンテンツ – テキスト、画像、リンクなど – を入れることができます。子どもの时候に集めたトレーディングカードのデジタルバージョンだと思ってくださいが、もっとクールで多様です！

基本的なカード構造

最も基本的なカード構造から始めましょう：

<div class="card">
<div class="card-body">
<h5 class="card-title">こんにちは、私はカードです！</h5>
<p class="card-text">さまざまな興味深い情報を含むことができます。</p>
</div>
</div>

このコードは、タイトルとテキストを持つシンプルなカードを作成します。card クラスはコンテナを作成し、card-body クラスはコンテンツを囲みます。

コンテンツの種類

さまざまなコンテンツをカードに入れることができるので、探ってみましょう：

タイトル、テキスト、リンク

<div class="card">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
<p class="card-text">カードタイトルを補完する簡単な例文で、カードのコンテンツの大部分を構成します。</p>
<a href="#" class="card-link">カードリンク</a>
<a href="#" class="card-link">別のリンク</a>
</div>
</div>

この例では、サブタイトル、さらにテキスト、リンクをカードに追加する方法を示しています。デジタルスクラップブックのページにさまざまなセクションを追加するようなものです！

画像

画像で視覚的な魅力を加えましょう：

<div class="card">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">この美しい画像を見てください！</p>
</div>
</div>

card-img-top クラスは画像をカードの上部に配置します。スクラップブックのページの上に写真を貼るようなものです！

リストグループ

リストをカードに追加することもできます：

<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">一项目</li>
<li class="list-group-item">二項目</li>
<li class="list-group-item">三项目</li>
</ul>
</div>

これはリストを含むカードを作成します。タスクリストや箇条書きに最適です！

キッチンシンク

今まで学んだことをすべて合わせた「キッチンシンク」カードを作ってみましょう：

<div class="card" style="width: 18rem;">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<p class="card-text">カードタイトルを補完する簡単な例文で、カードのコンテンツの大部分を構成します。</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">一项目</li>
<li class="list-group-item">二項目</li>
<li class="list-group-item">三项目</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">カードリンク</a>
<a href="#" class="card-link">別のリンク</a>
</div>
</div>

このカードにはすべてが揃っています – 画像、タイトル、テキスト、リスト、リンク。スイスアーミーナイフのようなカードです！

ヘッダーとフッター

カードにヘッダーとフッターを追加して、より構造を追加できます：

<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">特別なタイトル処理</h5>
<p class="card-text">追加コンテンツに自然な導入を提供するサポートテキスト。</p>
<a href="#" class="btn btn-primary">どこかに行く</a>
</div>
<div class="card-footer text-muted">
2日前
</div>
</div>

ヘッダーとフッターがカードにきれいな外観を与えます。

サイズ調整

カードのサイズをグリッドクラスやカスタムCSSで調整することができます：

<div class="card w-75">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<p class="card-text">このカードは75%の幅です。</p>
</div>
</div>

このカードはコンテナの幅の75%を占めます。

グリッドマークアップの使用

Bootstrapのグリッドシステムを使ってカードを整理することができます：

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">特別なタイトル処理</h5>
<p class="card-text">追加コンテンツに自然な導入を提供するサポートテキスト。</p>
<a href="#" class="btn btn-primary">どこかに行く</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">特別なタイトル処理</h5>
<p class="card-text">追加コンテンツに自然な導入を提供するサポートテキスト。</p>
<a href="#" class="btn btn-primary">どこかに行く</a>
</div>
</div>
</div>
</div>

これはlargerスクリーンでは横に並び、smallerスクリーンでは重なる2つのカードを作成します。

<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">特別なタイトル処理</h5>
<p class="card-text">追加コンテンツに自然な導入を提供するサポートテキスト。</p>
<a href="#" class="btn btn-primary">どこかに行く</a>
</div>
</div>

これはカードの上部にナビゲーションタブを持つカードを作成します。

カードスタイル

Bootstrapはカードのさまざまなスタイルを提供しています：

背景と色

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">ヘッダー</div>
<div class="card-body">
<h5 class="card-title">プライマリーカードタイトル</h5>
<p class="card-text">カードタイトルを補完する簡単な例文で、カードのコンテンツの大部分を構成します。</p>
</div>
</div>

これは青い背景に白いテキストを持つカードを作成します。bg-primaryをbg-success、bg-warningなど他の色クラスに置き換えることもできます。

結論

そして、ここまで来ましたね、皆さん！Bootstrap カードの土地を旅しました。基本的な構造から高度なレイアウトまで。練習は完璧に近づくものです。さまざまな要素とスタイルを組み合わせて、あなた独自のカードを作成してみてください。誰 knows? あなたはウェブデザインの次のbig thingを創造するかもしれません！

以下に、今までカバーした主なBootstrap カードクラスの表を示します：

クラス	説明
.card	基本的なカードコンテナを作成します
.card-body	カードコンテンツを囲みます
.card-title	カードタイトルのスタイルを設定します
.card-text	カードテキストのスタイルを設定します
.card-link	カード内のリンクのスタイルを設定します
.card-img-top	画像をカードの上部に配置します
.card-header	カードヘッダーを作成します
.card-footer	カードフッターを作成します
.bg-*	カードの背景色を変更します
.text-*	カードのテキスト色を変更します

さあ、素晴らしいカードレイアウトを作成しましょう！ウェブ開発において、そして人生において、思考を箱から出すことがすべてです – または、この場合、カードの中です！ハッピーコーディング！

Credits: Image by storyset