コピペで実装できる！グリッド切り替えボタン

2024年12月28日

はじめに

ポートフォリオサイトの作品一覧、単純に並べるだけでは物足りないと感じていませんか？
グリッド切り替えボタンを実装すれば、レイアウトの自由度を高めながら、JavaScript、アニメーション、レスポンシブ対応など、実務で重要なスキルもさりげなくアピールできます。

今回は、デザイン性と技術力の両方をアピールできる、グリッド切り替えボタンの実装方法をご紹介します。

詳しく解説していますので、コードだけほしい方は最後の「完成コード」までスクロールしてください。

見本

今回は下記のようなグリッド切り替えボタンを作っていきます。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

ポイントは下記になります。

クリーンなコードによる2列/4列の切り替え実装
CSS transitionによるスムーズなアニメーション
モバイルファーストなレスポンシブ設計
アクセシビリティを考慮したUI実装

グリッド切り替えボタンの見た目の制作

HTML

<div class="grid-controls">
  <button class="grid-button active" data-grid="4">
    <i class="fas fa-th"></i>
  </button>
  <button class="grid-button" data-grid="2">
    <i class="fas fa-th-large"></i>
  </button>
</div>

<div class="grid-container grid-4">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

HTMLの解説は以下の通りです。

grid-controls: 切り替えボタンを配置するコンテナ
grid-button: 各切り替えボタン。data-grid属性で列数を指定
grid-container: 作品一覧を配置するグリッドコンテナ
grid-item: 各作品を表示するアイテム

アイコンはFont Awesomeを使用しています。CDNリンクを<head>内に追加してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

CSS

.grid-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.grid-button {
  padding: 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.grid-button.active {
  background: #0066ff;
  color: white;
  border-color: #0066ff;
}

.grid-container {
  display: grid;
  gap: 20px;
  transition: all 0.3s ease;
}

.grid-container.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-container.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-item {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 4px;
  min-height: 200px;
}

@media (max-width: 768px) {
  .grid-container.grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-container.grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
}

CSSの主要なポイントの解説は以下の通りです。

Flexboxを使用してボタンを横並びに配置
CSS Gridで作品一覧のレイアウトを制御
transitionプロパティでアニメーションを実装
メディアクエリでモバイル対応を実現

グリッド切り替えボタンの動きの制作

見た目が完成したので、次はJavaScriptで動的な切り替え機能を実装していきます。

JavaScriptの完成コード

document.addEventListener('DOMContentLoaded', () => {
  const buttons = document.querySelectorAll('.grid-button');
  const container = document.querySelector('.grid-container');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      // アクティブ状態の切り替え
      buttons.forEach(btn => btn.classList.remove('active'));
      button.classList.add('active');

      // グリッドレイアウトの切り替え
      const gridType = button.dataset.grid;
      container.className = `grid-container grid-${gridType}`;
    });
  });
});

主要な部分の解説は以下の通りです。

DOMContentLoadedイベントで、HTML読み込み完了後に処理を開始
querySelectorAllで全ての切り替えボタンを取得
ボタンクリック時の処理:
全てのボタンからactiveクラスを削除
クリックされたボタンにactiveクラスを追加
data-grid属性の値に基づいてグリッドクラスを切り替え
classNameの再代入で、余計なクラスが付かないようにクリーンに管理

完成コード

HTML

<div class="grid-controls">
    <button class="grid-button active" data-grid="4">
        <i class="fas fa-th"></i>
    </button>
    <button class="grid-button" data-grid="2">
        <i class="fas fa-th-large"></i>
    </button>
</div>

<div class="grid-container grid-4">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
</div>

CSS

.grid-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.grid-button {
    padding: 10px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.grid-button.active {
    background: #0066ff;
    color: white;
    border-color: #0066ff;
}

.grid-container {
    display: grid;
    gap: 20px;
    transition: all 0.3s ease;
}

.grid-container.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-container.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-item {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 4px;
    min-height: 200px;
}

@media (max-width: 768px) {
    .grid-container.grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-container.grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.grid-button');
    const container = document.querySelector('.grid-container');

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            buttons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            const gridType = button.dataset.grid;
            container.className = `grid-container grid-${gridType}`;
        });
    });
});