カード .card
カードは、情報の関係性を明確にする役割を持ち、様々な用途で利用できる柔軟性、拡張性を持ち合わせています。
最もシンプルなカード
カードは、cardクラスのタグで囲うことで作成できます。カード内の要素は、bodyクラスのタグで囲います。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="card my-2">
<div class="body">
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>
</div>タイトル付き
bodyの中でh1タグを用いるとタイトル、h2タグを用いるとサブタイトルを作成できます。
ポラーノの広場
宮沢賢治
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="card my-2">
<div class="body">
<h1>ポラーノの広場</h1>
<h2 class="mb-1">宮沢賢治</h2>
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>
</div>固定サイズ
カードは幅や高さが設定されていないので、必要に応じてCSSを当てます。
ポラーノの広場
宮沢賢治
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="card my-2" style="max-width: 500px">
<div class="body">
<h1>ポラーノの広場</h1>
<h2 class="mb-1">宮沢賢治</h2>
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>
</div>画像
bodyの外にimgタグを配置することで、画像付きカードを作成できます。カード内に収めるため、figureタグにfluidクラスを付けます。
bottom-shadowクラスをfigureタグに付けると、画像に影が付きます。
ポラーノの広場
宮沢賢治
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="card my-2">
<figure class="fluid bottom-shadow">
<img src="https://placekitten.com/800/520" alt="cat" />
</figure>
<div class="body">
<h1>ポラーノの広場</h1>
<h2 class="mb-1">宮沢賢治</h2>
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>
</div>ヘッダー・フッター
header footer タグを使用することで、カードにヘッダーおよびフッターを追加できます。
ポラーノの広場
宮沢賢治
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="card my-2">
<header>✨おすすめのブック</header>
<div class="body">
<h1>ポラーノの広場</h1>
<h2 class="mb-1">宮沢賢治</h2>
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>
<footer>
<a class="btn" href="https://www.aozora.gr.jp/cards/000081/files/1935_19925.html" target="_blank" rel="noopener norefferer">
無料で読む
</a>
</footer>
</div>縁取りの削除
ghost クラスをカードに適用すると、縁取りがなくなります。
ポラーノの広場
宮沢賢治
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="card ghost my-2" style="max-width: 500px">
<div class="body">
<h1>ポラーノの広場</h1>
<h2 class="mb-1">宮沢賢治</h2>
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>
</div>アクリル
acrylic クラスをカードに適用すると、縁取りがなくなります。ドロップシャドウとの併用をおすすめします。
例ではあまりわかりづらいですが、背景にぼやけたような効果が適用されます。
ポラーノの広場
宮沢賢治
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="card acrylic shadow-2 my-2" style="max-width: 500px">
<div class="body">
<h1>ポラーノの広場</h1>
<h2 class="mb-1">宮沢賢治</h2>
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>
</div>