ハニカムレイアウトをCSSで実装｜画像を六角形に並べてホバーズーム

🎯 ハニカムレイアウトとは？

ハニカムレイアウトは、六角形の要素を蜂の巣のように配置するデザイン手法です。CSSのclip-pathやtransformを活用し、洗練されたアニメーションを加えることで、視覚的に魅力的なデザインが実現できます。

この記事では、ハニカムレイアウトの作り方とホバーエフェクトの実装方法をわかりやすく解説します。

🖥️ デモ

🔗 CodePenでハニカムレイアウトをチェック

See the Pen HoneyHive by masakazuimai (@masakazuimai) on CodePen.

🛠️ ハニカムレイアウトの作り方

1️⃣ HTMLの記述

六角形のセルはJavaScriptで動的に生成するため、HTMLは空のギャラリーコンテナを1つ用意するだけです。

<div class="stage">
    <div class="gallery" id="gallery"></div>
</div>

2️⃣ CSSの記述

CSSでは、以下のポイントを意識して実装します。

✅ :rootのCSS変数とclamp()で要素サイズをレスポンシブに
✅ clip-pathで六角形の形状を作成
✅ 負のmarginとtransformで蜂の巣状に配置
✅ transitionでスムーズなホバーエフェクトを追加

:root {
  --w: clamp(40px, 16vw, 96px);            /* 六角形の幅（画面幅に応じて可変） */
  --h: calc(var(--w) * 1.1547);            /* 高さ＝幅×2/√3で正六角形に */
  --gap: clamp(4px, 1.3vw, 8px);           /* 六角形どうしの横の間隔 */
  --row-pitch: calc((var(--w) + var(--gap)) * 0.866); /* 行送り＝√3/2 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to bottom, #000c17, #4B0082); /* 上紺〜下紫のグラデ */
  overflow: hidden;
}

.stage {
  width: 100%;
  max-width: 600px;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap);
  row-gap: 0;
  width: calc(var(--w) * 5 + var(--gap) * 4); /* 横5列ぶんの幅 */
  transform: translateX(calc((var(--w) + var(--gap)) / -4));
}

.hexagon {
  width: var(--w);
  height: var(--h);
  position: relative;
  margin-bottom: calc(-1 * (var(--h) - var(--row-pitch))); /* 行を詰めて重ねる */
  overflow: hidden;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

/* 偶数行（2行目=6〜10番、4行目=16〜20番）を右半分ずらして蜂の巣状に */
.gallery .hexagon:nth-child(n + 6):nth-child(-n + 10),
.gallery .hexagon:nth-child(n + 16):nth-child(-n + 20) {
  transform: translateX(calc((var(--w) + var(--gap)) / 2));
}

/* ホバーエフェクト対象の画像部分 */
.hexagon-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

/* ホバー時に画像を1.4倍に拡大 */
.hexagon:hover .hexagon-inner {
  transform: scale(1.4);
}

3️⃣ JavaScriptで六角形を生成

六角形のセルはJavaScriptでまとめて生成します。画像URLの配列を用意し、ループで.hexagonと.hexagon-innerを作って#galleryに追加するだけです。枚数や画像を差し替えるだけでギャラリーを増減できます。

const params = 'auto=format&fit=crop&w=400&h=460&q=80';
const images = [
  `https://images.unsplash.com/photo-1506744038136-46273834b3fb?${params}`,
  `https://images.unsplash.com/photo-1438761681033-6461ffad8d80?${params}`,
  `https://images.unsplash.com/photo-1574158622682-e40e69881006?${params}`,
  `https://images.unsplash.com/photo-1504674900247-0877df9cc836?${params}`,
  `https://images.unsplash.com/photo-1449824913935-59a10b8d2000?${params}`,
  `https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?${params}`,
  `https://images.unsplash.com/photo-1518791841217-8f162f1e1131?${params}`,
  `https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?${params}`,
  `https://images.unsplash.com/photo-1496449903678-68ddcb189a24?${params}`,
  `https://images.unsplash.com/photo-1493246507139-91e8fad9978e?${params}`,
  `https://images.unsplash.com/photo-1543466835-00a7907e9de1?${params}`,
  `https://images.unsplash.com/photo-1452960962994-acf4fd70b632?${params}`,
  `https://images.unsplash.com/photo-1441986300917-64674bd600d8?${params}`,
  `https://images.unsplash.com/photo-1469474968028-56623f02e42e?${params}`,
  `https://images.unsplash.com/photo-1500964757637-c85e8a162699?${params}`,
  `https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?${params}`,
  `https://images.unsplash.com/photo-1426604966848-d7adac402bff?${params}`,
  `https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?${params}`,
  `https://images.unsplash.com/photo-1472214103451-9374bd1c798e?${params}`,
  `https://images.unsplash.com/photo-1518495973542-4542c06a5843?${params}`,
  `https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?${params}`,
  `https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?${params}`,
  `https://images.unsplash.com/photo-1433086966358-54859d0ed716?${params}`,
  `https://images.unsplash.com/photo-1473448912268-2022ce9509d8?${params}`,
  `https://images.unsplash.com/photo-1490750967868-88aa4486c946?${params}`,
];

const TOTAL = 25;
const gallery = document.getElementById('gallery');

for (let i = 0; i < TOTAL; i++) {
  const hexagon = document.createElement('div');
  hexagon.className = 'hexagon';

  const inner = document.createElement('div');
  inner.className = 'hexagon-inner';
  inner.style.backgroundImage = `url('${images[i % images.length]}')`;

  hexagon.appendChild(inner);
  gallery.appendChild(hexagon);
}

🎨 ハニカムレイアウトの活用例

✅ ポートフォリオサイトのギャラリー
✅ サービスや商品の一覧ページ
✅ モダンなデザインのランディングページ

🚀 まとめ

ハニカムレイアウトは、洗練されたデザインとインタラクティブなアニメーションを同時に実現できます。
今回のコードをベースに、色や画像、アニメーション効果をアレンジして、オリジナルのハニカムデザインを作り上げてください！

よくある質問（FAQ）

Q. ハニカムレイアウトとは何ですか？

蜂の巣（ハニカム）のように六角形を隙間なく並べるCSSレイアウト手法です。clip-path: polygon()で六角形に切り抜いた要素をCSS Gridまたはネガティブマージンで互い違いに配置します。ポートフォリオサイトやギャラリーページのデザインで、通常のグリッドとは異なる視覚的なインパクトを与えられます。

Q. clip-pathで六角形を作るCSSの書き方は？

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)で正六角形に切り抜きます。この座標は要素の幅・高さに対する割合で指定されるため、要素のアスペクト比によって形状が変わります。正六角形にするには、要素の高さを幅の約1.155倍（2/√3）に設定してください。