HTMLとCSSで作る!ウェブサイトに映えるシンプルで美しいUIカードのデザイン方法

HTMLとCSSを使って、ウェブサイトにぴったりのシンプルで美しいUIカードコンポーネントをデザインする方法を解説します。さらに、linear-gradient(線形グラデーション)を活用したテクニックで、カードを暗くしすぎることなくテキストを目立たせる方法も一緒に学びましょう。

UIカードとは、ウェブサイトにおける「前菜」のような役割を果たすUIコンポーネントです。一般的なUIカードには、テキスト、写真、アイコン、そして1つ以上のインタラクティブな要素(ボタンやリンクなど)が含まれます。

UIカードは、目的に応じてシンプルにも複雑にも設計できます。

今回は、必要最小限の要素だけで構成された、とてもシンプルなUIカードをデザインしていきます。完成イメージはこちらです。

HTMLとCSSで作る!ウェブサイトに映えるシンプルで美しいUIカードのデザイン方法

このUIカードは、風景の背景画像、タイトルと説明文の2つのテキスト要素、そして大きなクリック可能なインターフェースで構成されています。ポイントは、カード全体が1つのリンクになっていることです。

なお、無料で美しい風景写真はUnsplash.comで多数見つけることができます。

ステップ1:HTML

まず、以下のHTMLをドキュメントの<body>要素内に追加してください。

<a class="card-link" href="#">
  <div class="card">
    <div class="card-overlay"></div>
    <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Landscape photography of the Northern Sea of Denmark" />
    <div class="card-text-container">
      <div class="card-text-wrapper">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful &amp; dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>
  </div>
</a>

上記のHTMLマークアップで最も重要なのは、カード全体をアンカー(<a>)要素で囲んでいる点です。このカードでは、UI全体を1つの大きなクリック可能なリンクとして動作させたいため、この構成を採用しています。

アンカーを実際のブログ記事やページ(リンク先にしたい任意のコンテンツ)に接続するには、プレースホルダーのhref="#"を実際のスラッグに置き換えるだけです。例:href="/northern-sea-of-denmark"

ステップ2:CSS

まず、このUIカードのサンプルで使用しているCSSを紹介します。その後、コードの重要なポイントを順番に解説していきます。

.card {
  position: relative;
  height: 350px;
  max-width: 400px;
}

.card-thumbnail {
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card-text-container {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-text-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 300px;
  color: white;
}
.card-title {
  font-size: 1.45rem;
  margin-bottom: 0;
}
.card-description {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-top: 0.5rem;
}

.card-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

CSSの仕組みを詳しく解説

.card: レスポンシブ対応のため、最大幅を400pxに設定しています。これによりカードの幅は柔軟に変化し、400pxより広くなることはありません。一方、画面幅が400px未満の場合は自動的に縮小します。カードの高さ(height: 350px)は固定されており、画面サイズに関わらず変わりません。
.card-thumbnail: カードのアスペクト比が変わっても背景画像が引き伸ばされて崩れないよう、object-fit: coverを使用しています。試しにこの行を削除してみてください。良い結果にはなりませんよ。
.card-text-container: 閲覧するデバイスに関係なく、テキスト要素の位置や余白を一定に保つため、bottom: 10%を指定しています。カードの高さが350pxに固定されているため、テキストとカード下端の距離をほぼ完全に一定に保つことができます。また、z-indexによって、テキスト要素がオーバーレイよりも上のレイヤーに配置されます。
.card-text-wrapper: このクラスは、タイトルと説明文の両方の最大幅を制御します。カードの幅を超えないよう300px(カードの最大幅400pxより25%小さい値)に設定しています。さらに左右に1remのパディングを設け、テキストと画面端の間に常に適度な余白が生まれるようにしています(特に小さな画面のデバイスで重要です)。
.card-overlay: 明るい背景の上に白いテキストを載せても読みにくいため、暗いコントラストが必要です。しかし、画像全体を暗くしてしまうと、せっかくの写真の魅力が損なわれてしまいます。そこでlinear-gradient関数を使い、画像の上半分(テキストがない領域)はほぼ透明のまま、下半分だけテキストが際立つ程度の暗さを持つグラデーションオーバーレイを作成しています。これが今回の「トリック」です。

UIカードデザインのヒントとアイデア

写真が主役となるこのようなUIカードでは、カードをごちゃごちゃと詰め込みすぎないことが重要です(例えば、テキストサイズには十分注意しましょう)。私自身もCSSでスタイリングする際に、常にこの点を意識していました。デザインするカードの具体的な文脈(コンテキスト)を考慮することを、習慣にしてください。

このチュートリアルのスタイルはあくまでガイドラインとして活用し、UIカードデザインの厳格なルールとしては扱わないでください。参考までに、UIカードデザインに関する普遍的なガイドラインをいくつか紹介します。

余白は非常に重要: ホワイトスペースが不足すると、デザインは窮屈で圧迫感のある印象になります。UIも人間と同じように「呼吸」が必要です。近接の法則を破らない範囲で、できるだけ余白(パディング、マージン、行間)を活用しましょう。
タイポグラフィ: フォントの種類、フォントサイズ、行間など、テキストをどのように装飾する場合でも、あらゆる画面サイズで読みやすさを確保することが大切です。フォントサイズを大きくしてスペースを消費する代わりに、.card-overlayクラスで実践したように、テキストと背景のカラーコントラストを高める方法を試してみてください。
クリックしやすいインターフェース: カード上の要素をクリックしてほしい場合は、マウスでもスマートフォンの親指でも、誰もが簡単にクリック・タップできる十分な大きさを確保しましょう。

それ以外に、UIカードデザインに絶対的なルールはありません。あるのは「文脈」だけです。あなたのデザインするカードの目的と状況に合わせて、自由に工夫してみてください。

CSSのpaddingプロパティ完全ガイド｜ショートハンドの使い方から単位の選び方まで

CSSのRGBとRGBaカラー完全ガイド：違い・使い方・実践テクニック

グラフィックカードが壊れかけているか確認する方法｜故障サインと9つの対処法
グラフィックカードは、現代のパソコンに欠かせない重要パーツです。健康な状態を保てていれば、快適なゲーム性能や高いワークステーション性能、高解像度ディスプレイ表示などを楽しめます。たとえばゲーム中、画面に表示されるすべてのピクセルの描画やフレームの出力は、グラフィックカードが担っています。しかし、ブルースクリーンや画面のフリーズといった不具合に悩まされることもあるでしょう。本記事では、グラフィックカードが壊れかけているかどうかを見分ける方法を詳しく解説します。もし故障の兆候がある場合は、記事内で紹介する対処法を試してみてください。グラフィックカードが故障しかけている兆候の見分け方 GPU(
PHPバックドアとは?Webサイトへの感染経路と検出・駆除対策を徹底解説
毎日10万件以上のWebサイトがハッキング被害に遭っていると言われています。しかも、一度侵害されたサイトは、再び攻撃を受ける確率が40%に達するとされます。その背景にあるのが、ハッカーが仕掛けていく「PHPバックドア」と呼ばれる悪意あるコードです。このマルウェアは除去が非常に難しく、管理パネルを完全にリセットしても、サイトの奥深くに潜伏し続けることがあります。「バックドア(裏口)」という名前の通り、認証を回避してサイトへ侵入するための隠し通路となるものです。現在、WordPressやMagentoなど多くの人気CMSがサーバーサイドスクリプト言語「PHP」で動作しており、Web上の80%以上の