横並びカードUIを作る方法【HTML/CSS・サンプルコード付き】

カードUI

横並びカードUIを作る方法

横並びカードUIを作る方法を紹介します。カードUIを横方向に並べるレイアウトは、サービス紹介、商品一覧、機能一覧、お知らせなど、複数の情報を見やすく整理したい場面でよく利用されます。HTMLとCSSだけで実装できるため、シンプルな構成のWebサイトにも導入しやすいレイアウトです。

このサンプルでは、複数のカードを横並びで表示する基本的なレイアウトを作成します。それぞれのカードにはタイトルと説明文を配置し、余白や枠線、背景色を設定することで、情報を区切って見やすく表示できます。JavaScriptを使用していないため、そのまま静的ページとして利用できます。

カードの幅や並ぶ枚数、余白、文字サイズ、色などはCSSから自由に変更できます。シンプルな構造になっているため、画像付きカードやリンク付きカードなど、さまざまなカードデザインのベースとしても活用しやすいサンプルです。

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

デモ

カード1

横並びで表示されるシンプルなカードUIです。

カード2

タイトルと説明文だけで構成された基本デザインです。

カード3

HTMLとCSSだけで実装できるサンプルです。

このデモでは、3枚のカードを横方向へ並べる基本的なカード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="horizontal-card-ui_wrap">

    <article class="horizontal-card-ui_card">
      <h3>カード1</h3>
      <p>横並びで表示されるシンプルなカードUIです。</p>
    </article>

    <article class="horizontal-card-ui_card">
      <h3>カード2</h3>
      <p>タイトルと説明文だけで構成された基本デザインです。</p>
    </article>

    <article class="horizontal-card-ui_card">
      <h3>カード3</h3>
      <p>HTMLとCSSだけで実装できるサンプルです。</p>
    </article>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルでは横並びで表示するカードの構造を記述し、CSSファイルではカードの横並びレイアウト、余白、枠線、背景色、文字サイズなどの見た目を設定します。JavaScriptは使用していないため、ブラウザでそのまま表示して利用できます。 

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

ファイルを配置したらsample/index.htmlをブラウザで開くだけで動作します。カードのタイトルや説明文はindex.htmlから変更でき、カードの幅、並ぶ枚数、余白、枠線、背景色などのデザインはstyle.cssで自由に調整できます。

コメント