MENU
  1. ホーム
  2. Gallery
  3. ブログ

ブログ

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

画像比率の固定：aspect-ratioとobject-fitによる画像自体の歪み・ボケ防止

ポイント: 異なるサイズ（1200×630等）の画像が設定されても、デザインカンプで指定された360:220の比率を維持し、画像が上下左右に引き伸ばされて歪まないように制御しています。

.blog-thumbnail img {
  aspect-ratio: 360/220;
  object-fit: cover;
}

解説: 実務において、運用者がアップロードする画像の縦横比が常にデザイン通りとは限りません。ここで重宝するのが aspect-ratio と object-fit: cover; の組み合わせです。aspect-ratio: 360/220; によって画像を表示する領域の比率をカンプ通りに厳格に固定し、そこに object-fit: cover; を適用することで、画像本来の比率を保ったまま領域いっぱいにトリミングして表示させています。これにより、どのような比率の画像が設定されても、Webサイトのレイアウトが崩れたり画像が不自然に歪んだりするのを防ぐことができます。また、HTML側で decoding="async" を指定して画像の非同期デコードを行っており、ページの描画速度（パフォーマンス）の向上にも配慮しています。

カード全体リンク：aタグのブロック化とoverflow: hiddenによる外枠の制御

ポイント: カード全体を囲む <a> タグの中にブロック要素を適切に配置し、カードの外枠からはみ出る要素を overflow: hidden で防ぐことで、UIの直感的な操作性と美しいデザイン維持を両立しています。

.blog {
  max-width: 360px;
  margin-inline: auto;
  box-shadow: 6px 6px 0 rgba(100, 130, 166, 0.25);
  border-radius: 16px;
  overflow: hidden;
}

解説: 現在のWeb標準（HTML5以降）に準拠し、カード要素全体を <a> タグで包むことで、カードのどこをクリックしても記事ページへ遷移できる直感的なユーザー体験（UX）を提供しています。ここで注意すべきは、カード全体の角を丸める（border-radius: 16px）と、中の画像（.blog-thumbnail img）がその丸みからはみ出してしまい、角丸が綺麗に表現されないという問題です。このバグを防ぐために、親要素である .blog に overflow: hidden; を記述し、枠線からはみ出た画像の四隅を強制的にマスク（非表示に）しています。これにより、カンプ通りの滑らかな角丸と、クリック可能な領域の最大化を安全に実現しています。

カテゴリ要素のインライン制御：display: blockによる上部余白（margin-top）の正常化

ポイント: デフォルトでインライン要素である <span> タグを display: block でブロック要素化し、直下のタイトル（h2）との距離感を正確に制御できるようにしています。

.blog-category {
  color: var(--color-nord10);
  font-size: 14px;
  font-weight: bold;
  display: block;
}

.blog-title {
  margin-top: 6px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
}

解説: カテゴリ名に使用している <span> タグは、初期状態では「インライン要素」です。インライン要素のままだと、上下の正確なマージンやパディングを受け付けにくく、直後のタイトルとの正確な位置調整（カンプ通りの6pxの隙間）にズレが生じる原因になります。そこで display: block; を指定して明示的にブロックレベル要素へと変換しています。これにより、要素の幅が親いっぱいに広がり、直後の .blog-title に設定した margin-top: 6px; がブラウザ間でブレることなく正確に機能するようになります。

Gallery
目次