基本のカードを作る方法【HTML/CSS・サンプルコード付き】

カードUI
2026.06.29

基本のカードUIを作る方法

基本のカードUIを作る方法を紹介します。カードUIは、タイトルや説明文などの情報を1つの枠にまとめて表示するためのデザインで、ブログ記事一覧、商品一覧、サービス紹介など、さまざまなWebサイトで広く使われています。

このサンプルでは、HTMLとCSSを使って最もシンプルなカードUIを作成します。タイトルと説明文のみで構成された基本形にすることで、カードUIの構造を分かりやすく理解でき、そのまま他のデザインにも応用できます。

カードの幅、余白、枠線、背景色、文字サイズなどはCSSで自由に調整できます。まずは最小構成のカードを理解し、その後に画像付きカードやボタン付きカードなどへ発展させるのが基本的な使い方です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

カードタイトル

タイトルと説明文のみで構成された、最も基本的なカードUIのサンプルです。余計な装飾を入れず、構造を理解しやすいシンプルなデザインになっています。

このデモはカードUIの最小構成です。タイトルと説明文だけでレイアウトを確認できるようにしています。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本のカードUI</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- カードUI -->
  <div class="basic-card-ui_wrap">

    <article class="basic-card-ui_card">

      <h3>カードタイトル</h3>

      <p>
        タイトルと説明文だけで構成されたシンプルなカードUIのサンプルです。
      </p>

    </article>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルにはカードUIの構造（タイトルと説明文）を記述し、CSSファイルではカードの枠線・余白・背景色・文字サイズなどの見た目を設定します。JavaScriptは使用していないため、そのまま静的ページとして利用できます。 

sample/
├── index.html
└── style.css

ファイルを配置したらindex.htmlをブラウザで開くだけで動作します。カードの内容（タイトル・説明文）はHTMLから変更でき、デザイン（幅・余白・色・角丸など）はCSSで調整できます。最もシンプルな構造のため、他のカードUIのベースとしても利用できます。

コメント