Startify-UI

カード

Startify-UIで提供されるカードのコンポーネントです。

カードアイテム

カードアイテムのコンポーネントにはsu-cardのクラス名を付与し、下記のようにサムネイルやカード内のテキスト、リンク要素をマークアップします。

カードアイテム要素自体はdiv要素を用いてマークアップしますが、カードアイテム内の要素については文脈に合わせて適切な要素を用いてマークアップします。ただし、適切なレイアウトを維持するために、su-card要素の直下には、su-card-outerlinkと、su-card-innerlinkの2つの要素を配置します。

カードアイテム要素でリンクを設定する場合、su-card-outerlinkはカード要素全体がリンク対象となり、カードアイテム要素に内包されるリンクを配置する場合にはsu-card-innerlink内に含めるようにすることで、カードアイテム下部に配置され、別のリンクとして機能します。

カードアイテムを構成する要素として、サムネイルとなるsu-card-thumbnailと、日付表示としてのテキストのsu-card-datetime、カードタイトルとしてのテキストのsu-card-title、カードタグとしてのテキストのsu-card-tagsがあり、これらのクラス名を付与することで、適切なデザインが適用されます。

日付や時刻として表示するテキストです。本文テキストとは異なるコードであることが明示できるようスタイリングされます。デフォルトではインラインで表示されます。

カードタイトル
タグ1 タグ2 タグ3 
<div class="su-card">
  <a href="/posts/1234" class="su-card-outerlink">
    <figure class="su-card-thumbnail">
      <img src="https://exmaple.com/image.jpg" alt="">
    </figure>
    <div class="su-card-content-top">
      <time class="su-card-datetime" datetime="2025-01-01" aria-label="December 31, 2025">2025.12.31</time>
    </div>
    <div class="su-card-content-bottom">
      <p class="su-card-title">カードタイトル</p>
    </div>
  </a>
  <div class="su-card-innerlink">
    <div class="su-card-tags">
      <a href="/tags/1">タグ1</a>
      <a href="/tags/2">タグ2</a>
      <a href="/tags/3">タグ3</a>
    </div>
  </div>
</div>

カードアイテムのデフォルト幅や境界線の色、各種内包要素のサイズや比率、余白などはCSS変数を使って変更することが可能です。 

.su-card {
  --su-color-border-card: red;
  --su-size-radius-card: 50px;
  --su-size-base-width-card: 100px;
  --su-size-text-card: 20px;
  --su-size-gutter-card-item: 5px;
  --su-ratio-aspect-thumbnail-card: 1 / 1;
  --su-prefix-tag-card: '◆';
}

カードコンテナ

カードコンテナ要素にはsu-card-containerのクラス名を付与します。カードアイテム要素はカードコンテナ要素の中に含めることで、グリッドレイアウトで配置することができ、カードアイテム要素内にある、サムネイルやタイトルテキストなどは、異なる高さであっても行内に並ぶカードアイテム要素に合わせて自動的に整列されるようになります。

カードタイトル

カードタイトルが長いテキストカードタイトルが長いテキストカードタイトルが長いテキスト

タグ1 タグ2 タグ3

カードタイトル
タグ1 タグ2 タグ3 タグ4 タグ5 タグ6 
<div class="su-card-container">
  <div class="su-card">...</div>
  <div class="su-card">...</div>
  <div class="su-card">...</div>
</div>

カードコンテナ要素を使ってカードアイテムを配置する際の列数については、カードアイテム要素のデフォルト幅をCSS変数で設定することで、カードアイテム要素の幅に応じて列数を調整することができます。 

.su-card-container {
  --su-size-base-width-card: 240px;
}

また、カードコンテナの内のカードアイテム間の余白サイズはCSS変数を使って変更することが可能です。 

.su-card-container {
  --su-size-gutter-card-container: 4px;
}

アクセシビリティの支援

カードアイテムならびにカードコンテナはアクセシビリティの対応として、role属性を使って、カードコンテナやカードアイテムが特定のセクションとして独立したコンテンツであることを示すことができます。また、aria-labelledby属性を使って、カードアイテムのタイトルを示すことができます。 

<div class="su-card-container" role="region">
  <div class="su-card" role="article" aria-labelledby="card-title">
    <a href="#" class="su-card-outerlink" role="link">
      <figure class="su-card-thumbnail">
        <img src="https://exmaple.com/image.jpg" alt="">
      </figure>
      <div class="su-card-content-top">
        <time class="su-card-datetime" datetime="2025-01-01T00:00:00+09:00" aria-label="2025年12月31日">2025.12.31</time>
      </div>
      <div class="su-card-content-bottom">
        <p class="su-card-title" id="card-title">カードタイトル</p>
      </div>
    </a>
    <div class="su-card-innerlink">
      <div class="su-card-tags">
        <a href="#tag1">タグ1</a>
        <a href="#tag2">タグ2</a>
        <a href="#tag3">タグ3</a>
      </div>
    </div>
  </div>
  ...
</div>

その他、日時情報を示す要素に対しては、日付・時刻テキスト同様に、datetime属性でISO形式の日付や時刻を示すことで、スクリーンリーダーがISO形式や標準的な読み上げに対応するようにします。