カード内にカードを表示する方法
カード内にカードを表示する方法を紹介します。このサンプルでは、外側のカードの中へ別のカードを配置し、関連する情報や補足内容をひとつのカード内で分けて表示します。商品情報の補足、プロフィールの詳細、サービス内容、設定項目など、情報を階層ごとに整理したい場面で利用できます。
HTMLでは外側のカード内に内側のカードを配置して入れ子構造を作成し、CSSではそれぞれに異なる背景色や枠線、余白、角丸を設定しています。内側のカードを薄い青色で表示することで、外側の内容と区別しやすいデザインにしています。
外側と内側のカードに表示するタイトルや文章のほか、横幅、余白、背景色、枠線、角丸、影、文字サイズなどを変更できます。JavaScriptを使用せず、HTMLとCSSだけで実装できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
カードの中へ、さらに別のカードを配置できます。
補足情報や関連する内容を、ひとつのカード内で分けて表示できます。
外側のカード内に別のカードを配置した、入れ子構造のカードUIを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- スマートフォンやタブレットで画面幅に合わせて表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>カード内にカードを表示する</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 外側のカード -->
<div class="card-in-card_card">
<!-- 外側のカードタイトル -->
<div class="card-in-card_title">
外側のカード
</div>
<!-- 外側のカード説明文 -->
<p class="card-in-card_text">
カードの中へ、さらに別のカードを配置できます。
</p>
<!-- 外側のカード内へ配置する内側のカード -->
<div class="card-in-card_inner">
<!-- 内側のカードタイトル -->
<div class="card-in-card_inner-title">
内側のカード
</div>
<!-- 内側のカード説明文 -->
<p class="card-in-card_inner-text">
補足情報や関連する内容を、ひとつのカード内で分けて表示できます。
</p>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは外側のカードの中へ内側のカードを配置し、入れ子構造のカードUIを作成します。CSSでは外側と内側それぞれの横幅、余白、背景色、枠線、角丸、文字サイズなどを設定し、2つのカードを見分けやすいデザインにしています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはカード全体を構成するファイルです。「外側のカード」のタイトルと説明文、その中へ配置する「内側のカード」のタイトルと説明文を変更できます。内側のカードは外側のカード内へ直接配置されているため、補足情報や関連する内容をひとつのまとまりとして表示できます。
style.cssは外側と内側のカードのデザインを設定するファイルです。外側のカードでは最大横幅、余白、枠線、角丸、背景色、影などを設定し、内側のカードでは別の背景色や枠線を指定しています。タイトルや説明文の文字サイズ、文字色、行間もそれぞれ変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。2つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。外側のカードの中に、薄い青色の内側カードが表示されます。JavaScriptや外部ライブラリは使用しないため、HTMLとCSSだけで表示できます。
カスタマイズできる内容
index.htmlでは「外側のカード」「内側のカード」のタイトルと、それぞれの説明文を変更できます。商品情報の補足、サービス内容、プロフィール詳細、注意事項など、外側の情報に関連する内容を内側のカードへ表示できます。
style.cssでは外側のカードの最大横幅、内側余白、枠線、角丸、背景色、影を変更できます。内側のカードについても余白、背景色、枠線、角丸を調整でき、外側と内側のタイトルや説明文の文字サイズ、文字色、行間も変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。上下40px・左右20pxを指定しています。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:460px;
外側のカードの最大横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。
padding:28px;
外側のカードの内側余白です。値を大きくすると文字や内側カードとカード端との間隔が広がります。
border:1px solid #dbe3ec;
外側のカードの枠線です。1pxを大きくすると枠線が太くなります。
border-radius:14px;
外側のカードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 12px 28px rgba(15,23,42,.08);
外側のカードの影です。12pxは縦方向の位置、28pxはぼかしの広がりを表します。値を変更すると影の見え方が変わります。
margin:0 0 12px;
外側のカードタイトル下側の余白です。12pxを大きくすると説明文との間隔が広がります。
font-size:22px;
外側のカードタイトルの文字サイズです。値を大きくすると文字が大きくなります。
line-height:1.5;
外側のカードタイトルの行間です。値を大きくすると行間が広がります。
margin:0 0 20px;
外側の説明文下側の余白です。20pxを大きくすると内側カードとの間隔が広がります。
font-size:16px;
外側の説明文の文字サイズです。値を大きくすると文字が大きくなります。
line-height:1.8;
外側と内側の説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
padding:20px;
内側のカードの内側余白です。値を大きくすると内容とカード端との間隔が広がります。
border:1px solid #bfdbfe;
内側のカードの枠線です。1pxを大きくすると枠線が太くなります。
border-radius:12px;
内側のカードの角丸です。値を大きくすると丸みが強くなります。
margin:0 0 8px;
内側のカードタイトル下側の余白です。8pxを大きくすると説明文との間隔が広がります。
font-size:18px;
内側のカードタイトルの文字サイズです。値を大きくするとタイトルが大きくなります。
font-size:15px;
内側のカード説明文の文字サイズです。値を大きくすると説明文が大きくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:460pxによって、外側のカードが画面幅に合わせて縮小されます。また、画面幅640px以下では外側のカードをpadding:24px 20px;、内側のカードをpadding:18px;へ変更して余白を小さくしています。スマートフォン・タブレット・PCで利用できます。
コメント