1. デザインのタイプ

【高さ自動調整・ボタン最下段固定カード】
中の文章が長くても短くても、カード全体の高さとボタンの位置がピシッと揃う、整列美にこだわったレイアウトです。

2. デザインの特徴

• 「ガタガタ」をゼロに
  商品説明の文字数がバラバラでも、ボタンの位置が強制的に一番下で横一列に揃います。誰が使っても、一瞬で整ったショップサイトのような見た目が作れます。

3. 紹介コード

<div class="blog-grid-shop-wrapper">
  <ul class="container">
    <li class="item">
      <h2>Fancy Headline</h2>
      <p class="text">説明文が入ります。</p>
      <button>Shop now</button>
    </li>
    <!-- 同じ構成を並べると、ボタンが下端で自動的に揃います -->
  </ul>
</div>

<style>
.blog-grid-shop-wrapper .container {
  display: grid;
  grid-gap: 30px; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.blog-grid-shop-wrapper .item {
  display: flex;
  flex-direction: column;
  padding: 40px 25px !important;
  box-sizing: border-box !important;
  background-color: #0d253f;
}

.blog-grid-shop-wrapper .item > .text {
  /* ここが最下段に揃える重要ポイント */
  flex: 1 1 auto;
}
</style>

1. デザインのタイプ

【CSS Grid Responsive Card Layout】
CSS Gridの auto-fill と minmax を活用した、レスポンシブ対応のカード型オーソドックスなグリッドレイアウトです。

1. デザインのタイプ

【Border Animation Hover Card】
画像がシネマティックに暗転し、時間差で四方から白い枠線が浮かび上がる、洗練されたホバーエフェクト・カードです。ギャラリーサイトやポートフォリオで目を引く、インタラクティブなグリッドレイアウトを採用しています。

1. デザインのタイプ

【Expanding Flex Accordion】
Flexboxの伸縮性を最大限に活用した、インタラクティブな画像ギャラリーです。マウスを乗せたカードが滑らかに広がり、写真の全貌を映し出すモダンなレイアウトを採用しています。

1. デザインのタイプ

【Grid Hover Zoom Card】
洗練されたグリッドレイアウトを採用し、ホバー時にカードが滑らかに拡大しながら、詳細情報が浮かび上がるモダンなギャラリーデザインです。

1. デザインのタイプ

【Vertical Accordion Gallery】
Playfair Displayと縦書き文字を採用した、高級感のあるアコーディオンギャラリーです。

1. デザインのタイプ

【Expandable Card Gallery】
クリックひとつで選択した写真が大きく広がり、細部までダイナミックに見せることができるエキスパンダブル・カードギャラリーです。

2. デザインの特徴

• 写真が主役のギャラリー
  選択した画像がダイナミックに広がり、視覚的なインパクトを与えるレイアウトです。
• 心地よい操作感
  カードの伸縮が滑らかで、ユーザーが直感的に操作を楽しめる設計になっています。
• スマホでも見やすい
  画面サイズに応じて最適な表示に切り替わるレスポンシブ仕様です。
• ブログに馴染むデザイン
  テーマの干渉を抑え、あらゆる記事に違和感なく組み込むことが可能です。

3. 紹介コード

ビジュアルを強調したいセクションに最適です。以下のコードをコピーしてご利用ください。

<!-- ギャラリー本体 -->
<div class="vol9-scope">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <div class="vol9-container">
    <div class="general-container">

      <input checked class="radio" id="v9-card-1" name="card-vol9" type="radio" />
      <label class="content v9-bg-1" for="v9-card-1">
        <span class="icon"><i class="fas fa-sun"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

      <input class="radio" id="v9-card-2" name="card-vol9" type="radio" />
      <label class="content v9-bg-2" for="v9-card-2">
        <span class="icon"><i class="fas fa-cloud-rain"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

      <input class="radio" id="v9-card-3" name="card-vol9" type="radio" />
      <label class="content v9-bg-3" for="v9-card-3">
        <span class="icon"><i class="fas fa-cloud-moon"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

      <input class="radio" id="v9-card-4" name="card-vol9" type="radio" />
      <label class="content v9-bg-4" for="v9-card-4">
        <span class="icon"><i class="fas fa-snowflake"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

      <input class="radio" id="v9-card-5" name="card-vol9" type="radio" />
      <label class="content v9-bg-5" for="v9-card-5">
        <span class="icon"><i class="fas fa-poo-storm"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

    </div>
  </div>
</div>

<!-- CSS -->
<style>
.vol9-scope { display: block; margin: 40px auto; font-family: 'Roboto', sans-serif; }
.vol9-container { background: linear-gradient(90deg, #CAF3F2 0%, #6FE3E1 100%); padding: 40px 15px; border-radius: 15px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; }
.general-container { display: flex; flex-wrap: nowrap; gap: 12px; width: 100%; max-width: 1100px; }
.radio { display: none; }
.content { position: relative; flex: 1; border-radius: 48px; cursor: pointer; overflow: hidden; display: block; transition: all 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); height: 0; padding-top: 75%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.v9-bg-1 { background-image: url('https://images.unsplash.com/photo-1524572217604-17e96c89e56f?auto=format&fit=crop&w=1867&q=80'); }
.v9-bg-2 { background-image: url('https://images.unsplash.com/photo-1444384851176-6e23071c6127?auto=format&fit=crop&w=1867&q=80'); }
.v9-bg-3 { background-image: url('https://images.unsplash.com/photo-1482406611936-43ea538e39d4?auto=format&fit=crop&w=2110&q=80'); }
.v9-bg-4 { background-image: url('https://images.unsplash.com/photo-1483663167873-0cfcc893b78c?auto=format&fit=crop&w=2096&q=80'); }
.v9-bg-5 { background-image: url('https://images.unsplash.com/photo-1475116127127-e3ce09ee84e1?auto=format&fit=crop&w=2100&q=80'); }
.icon { position: absolute; bottom: 16px; left: 17px; width: 40px; height: 40px; background-color: #FFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #E9BE71; }
.v9-bg-2 .icon { color: #303335; }
.v9-bg-3 .icon { color: #1F4782; }
.v9-bg-4 .icon { color: #818C96; }
.v9-bg-5 .icon { color: #AB834C; }
.card-title { position: absolute; bottom: 20px; left: 72px; color: #FFF; font-size: 19px; opacity: 0; transform: translateX(30px); transition: opacity 0.3s, transform 0.3s; transition-delay: 0.3s; white-space: nowrap; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.subtitle { display: block; font-size: 14px; }
.radio:checked + .content { flex: 10; }
.radio:checked + .content .card-title { opacity: 1; transform: translateX(0); }
.content:hover { transform: scale(1.02); }
@media screen and (max-width: 768px) { .general-container { flex-direction: column; } .content { width: 100%; padding-top: 60%; margin-bottom: 10px; flex: none; } .radio:checked + .content { padding-top: 80%; } }

[type="radio"]:checked+label:after { -webkit-transform: scale(1.02); transform: scale(1.02); display:none; }
[type="radio"]:not(:checked)+label:before, [type="radio"]:not(:checked)+label:after { border: 2px solid #5a5a5a; display:none; }
</style>