Bloggerデザイン : レスポンシブ対応グリッドレイアウト

1. デザインのタイプ

【CSS Grid Responsive Card Layout】
CSS Gridの auto-fill と minmax を活用した、レスポンシブ対応のカード型オーソドックスなグリッドレイアウトです。画面幅に合わせてカードの並びが自動調整され、かつ各カードの高さがコンテンツ量に応じて柔軟に保たれる、機能的で美しいニュース・ブログ向けのレイアウトです。

Tokyo Performance Foll

Tokyo Performance Doll also known as TPD (東京パフォーマンスドール) is a J-pop idol girl group that existed from 1990 to 1996 and was revived in 2013.

Inspired by Onyanko Club, it had seven main members and several other "trainees" for live performances, a formula later followed by Morning Musume, Hello! Project and AKB48. TPD was based in Tokyo, and launched sister-bands in other cities: Osaka Performance Doll in 1993 and Shanghai Performance Doll in 1996.

東京パフォーマンスドール

東京パフォーマンスドール（とうきょうパフォーマンスドール、略称：TPD）は、日本のガールズグループ、女性アイドルグループ。

第1期TPD（1990年〈平成2年〉〜1996年〈平成8年〉）は、多人数でスタイリッシュに歌って踊る女性アイドルグループのスタイルを、日本の音楽史上において初めて確立した。

Card Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque

Card Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

2. デザインの特徴

• 数学的に計算された自動配置
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) により、メディアクエリを細かく書かずとも、スマホ・タブレット・PCで最適な列数に自動で切り替わります。
• フレキシブルなコンテンツ対応
  カード内のテキスト量が異なっても、flex-direction: column を活用したカード構造により、崩れることなくスマートな外観を維持します。
• 洗練されたシャドウと余白
  box-shadow による控えめな浮遊感と、計算されたパディングにより、Bloggerの標準テンプレート上でも際立つモダンな質感を提供します。

3. 紹介コード

<div class="blog-card-grid-wrapper">
  <div class="cards">
    <!-- Card 1 -->
    <div class="cards__card">
      <img alt="" src="画像URL" />
      <div class="cards__description">
        <h2>タイトル</h2>
        <p>本文</p>
        <p>本文</p>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="cards__card">
      <img alt="" src="画像URL" />
      <div class="cards__description">
        <h2>タイトル</h2>
        <p>本文</p>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="cards__card">
      <img alt="" src="画像URL" />
      <div class="cards__description">
        <h2>タイトル</h2>
        <p>本文</p>
      </div>
    </div>
    <!-- Card 4 -->
    <div class="cards__card">
      <img alt="" src="画像URL" />
      <div class="cards__description">
        <h2>タイトル</h2>
        <p>本文</p>
      </div>
    </div>
  </div>
</div>

<style>
.blog-card-grid-wrapper {
    max-width: 1170px;
    margin: 0 auto;
    padding: 20px;
    color: #2d4152;
    line-height: 1.414;
}

.blog-card-grid-wrapper .cards {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.blog-card-grid-wrapper .cards__card {    
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blog-card-grid-wrapper .cards__card img {
    object-fit: cover;
    width: 100% !important;
    height: 240px !important;
    display: block;
    margin: 0 !important;
}

.blog-card-grid-wrapper .cards__description {
    padding: 0 20px 20px 20px;
}

.blog-card-grid-wrapper .cards__description h2 {
    margin: 20px 0 10px 0;
}

.blog-card-grid-wrapper .cards__description h3 {
    margin: 15px 0 5px 0;
}
</style>