基本のカードを作る方法
基本のカードを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、見出しと説明文のみで構成されたシンプルなカードUIを作成します。画像やボタン、アイコンなどは使用せず、カード本体の枠線、角丸、余白、背景色、影といった基本的なデザインだけに絞っています。
カードは、サービス紹介、機能説明、お知らせ、管理画面の情報整理、会員サイトの案内など、内容をひとまとまりで見せたい場面に利用できます。見出しと説明文だけの構成なので、情報を簡潔に伝えやすく、ほかの要素を追加する前の基本形としても扱いやすいデザインです。
見出しと説明文はHTMLから変更でき、CSSではカードの横幅、内側余白、背景色、枠線、角丸、影、文字サイズ、行間などを調整できます。画面幅に合わせてカードが縮小されるため、スマートフォン・タブレット・PCで利用でき、初心者でも導入しやすい基本的なカードのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しと説明文だけで構成された、シンプルなカード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="basic-card_wrap">
<!-- カード -->
<div class="basic-card_card">
<!-- カードタイトル -->
<div class="basic-card_title">
基本のカード
</div>
<!-- カード説明文 -->
<p class="basic-card_text">
見出しと説明文だけで構成されたシンプルなカードUIです。
</p>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは見出しと説明文だけで構成されたシンプルなカードを作成し、CSSではカードの横幅、余白、背景色、枠線、角丸、影などの見た目を設定しています。JavaScriptを使用しないため、そのまま配置するだけで利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはカードの内容を作成するファイルです。カードタイトルと説明文を変更するだけで、用途に合わせたカードへ簡単に編集できます。
style.cssはカード全体のデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、影などを変更し、デザインを自由にカスタマイズできます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置してください。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くとカードが表示されます。タイトルや説明文を書き換えるだけで、案内カードや紹介カードなどへ利用できます。
カスタマイズできる内容
index.htmlではカードタイトルと説明文を自由に変更できます。サービス紹介、プロフィール、商品説明など用途に合わせて文章を書き換えられます。
style.cssではカード全体の横幅、背景色、文字色、余白、角丸、枠線、影などを変更できます。シンプルなカードをベースとして、さまざまなデザインへ発展させることができます。
数値調整
style.css
max-width:700px;
カード全体の最大横幅です。値を大きくすると全体が広がり、小さくするとコンパクトになります。
padding:32px;
カード全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
カード全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
max-width:420px;
カード本体の最大横幅です。値を大きくするとカードが横に広がり、小さくすると細く表示されます。
padding:28px;
カード本体の内側余白です。値を大きくするとタイトルと説明文の周囲に余裕が生まれます。
border-radius:14px;
カード本体の角丸です。値を大きくすると柔らかい印象になり、小さくするとシャープな印象になります。
box-shadow:0 12px 28px rgba(...)
カードの影です。数値を大きくすると影が広がり存在感が増し、小さくすると控えめな表示になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると見出しが強調され、小さくすると落ち着いた印象になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に応じてカードが自動で縮小されます。また、640px以下ではpadding:24px 18px;とpadding:24px 20px;へ変更し、スマートフォンでも余白が適切になるよう調整しています。そのため、スマートフォン・タブレット・PCで利用できます。
コメント