# 横並びメディアカードのCSS実装

> サムネイルが左、テキストが右の横並びカード。flex-shrink: 0で画像の潰れを防ぎ、長いタイトルは省略記号で丸めます。

- カテゴリ: カード
- URL: https://www.css-dictionary.com/recipes/media-card/

## HTML

```html
<a href="#" class="media-card">
  <div class="thumb" aria-hidden="true"></div>
  <div class="body">
    <h3 class="title">flex-wrapの使いどころ — 折り返しの基本とカードグリッドとの使い分け</h3>
    <p class="desc">「なぜか1行に潰れて並ぶ」「余白が揃わない」を解決する、折り返し設計の考え方。</p>
  </div>
</a>
```

## CSS

```css
.media-card {
  display: flex;
  gap: 14px;
  max-width: 400px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s;
}

.media-card:hover,
.media-card:focus-visible {
  border-color: #b0413e;
}

.thumb {
  flex-shrink: 0; /* テキストが長くても画像を潰さない */
  width: 88px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(135deg, #a8b8a0, #4a7c59);
}

.body {
  min-width: 0; /* flexアイテム内で省略(…)を効かせるのに必須 */
}

.title {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #5c5445;
}
```

## 仕組みの解説

横並びカードの2大トラブルは「画像が潰れる」と「省略記号が効かない」です。前者はサムネイルに flex-shrink: 0、後者はテキスト側の flexアイテムに min-width: 0 を指定して解決します（flexアイテムのmin-widthは初期値autoのため、内容より小さくなれず ellipsis が発動しません）。タイトルの1行省略は overflow / text-overflow / white-space の3点セットです。

## 実装のポイント

カード全体をaで包むと、タップ領域が広く使いやすくなります。中に別のリンクを入れたい場合は構造を見直してください（aの入れ子は不可）。

## AIに依頼するときの文例

サムネイル左・テキスト右の横並びメディアカードを作ってください。画像はflex-shrink: 0で固定、テキスト側はmin-width: 0を指定し、長いタイトルはtext-overflow: ellipsisで1行に省略してください。

## 使っているプロパティ

- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [flex-grow-shrink-basis](https://www.css-dictionary.com/property/flex-grow-shrink-basis.md)
- [aspect-ratio](https://www.css-dictionary.com/property/aspect-ratio.md)
- [text-overflow](https://www.css-dictionary.com/property/text-overflow.md)