ReactとTailwind CSSで開閉式ドアを作りましょう！

ReactとTailwind CSSで開閉式ドアを作りましょう！

みなさん、こんにちは！チャリセです！
今回は、ウェブサイトやアプリケーションで使える、見た目の良い折りたたみドアの開閉アニメーションの作り方を紹介します。
ReactとTailwind CSSを使って、シンプルながらインパクトのある UI コンポーネントを実装します。

今回紹介する内容では、以下のようなことができます。

    クリックひとつで左右に開くドア
  • 滑らかな開閉アニメーション
  • リアルな立体感のある動き
  • シンプルで使いやすいデザイン

実装のポイント

1. 立体的な見た目を作る

まず、平面的な要素を立体的に見せるための設定をします：

<div style={{ perspective: '1000px' }}>

このperspectiveという設定は、スマートフォンやパソコンで写真を撮るときのように、見る人の視点からの距離を設定します。これにより、ドアの開閉時に自然な立体感が生まれます。

2. ドアの動きを作る

左右のドアは、まるで本物のドアのように端を軸にして開きます：

// 左のドア style={{ transformOrigin: 'left', // 左端を軸にする transform: isOpen ? 'rotateY(-90deg)' : 'rotateY(0deg)' // 開閉時の角度 }} // 右のドア style={{ transformOrigin: 'right', // 右端を軸にする transform: isOpen ? 'rotateY(90deg)' : 'rotateY(0deg)' // 開閉時の角度 }}

3. アニメーションを滑らかにする

急な動きは見た目が悪いので、Tailwind CSSでアニメーションを滑らかにします：

className="transition-all duration-700" // 0.7秒かけてゆっくり動く

4. 開閉の制御

ボタンで開閉できるように、ReactのuseStateを使います：

const [isOpen, setIsOpen] = useState(false); // ドアが開いているかどうかを記録

デザインのこだわり

    ドアの取っ手
      黄色い取っ手で分かりやすく
    • 左右対称な配置
  1. ドアの枠
      グレーの枠線でドア枠を表現
    • クリックの邪魔にならない設定
  2. ボタンのデザイン
      ホバー時の色変化
    • 開閉状態が分かるテキスト表示

完全なコード

完全なコードは以下となります。ご興味のある方は一度ご挑戦ください。
Happy Coading！！

import React, { useState } from 'react';

const FoldingDoor = () => {
  // ドアの開閉状態を管理
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="flex flex-col items-center">
      {/* ドア全体のコンテナ */}
      <div 
        className="relative w-96 h-96 bg-gray-100" 
        style={{ perspective: '1000px' }}
      >
        {/* ドアの動きを制御するコンテナ */}
        <div 
          className="relative w-full h-full" 
          style={{ transformStyle: 'preserve-3d' }}
        >
          {/* 左側のドア */}
          <div 
            className="absolute left-0 top-0 w-1/2 h-full bg-blue-500 border-r border-blue-600 transition-all duration-700"
            style={{ 
              transformOrigin: 'left',
              transform: isOpen ? 'rotateY(-90deg)' : 'rotateY(0deg)'
            }}
          >
            {/* 左ドアの取っ手 */}
            <div className="absolute right-4 top-1/2 w-2 h-8 bg-yellow-400 rounded">
            </div>
          </div>

          {/* 右側のドア */}
          <div 
            className="absolute right-0 top-0 w-1/2 h-full bg-blue-500 border-l border-blue-600 transition-all duration-700"
            style={{ 
              transformOrigin: 'right',
              transform: isOpen ? 'rotateY(90deg)' : 'rotateY(0deg)'
            }}
          >
            {/* 右ドアの取っ手 */}
            <div className="absolute left-4 top-1/2 w-2 h-8 bg-yellow-400 rounded">
            </div>
          </div>

          {/* ドア枠 */}
          <div className="absolute inset-0 border-4 border-gray-700 pointer-events-none">
          </div>
        </div>
      </div>

      {/* 開閉ボタン */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="mt-6 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-300"
      >
        {isOpen ? '閉じる' : '開く'}
      </button>
    </div>
  );
};

export default FoldingDoor;

現在
株式会社チョモランマ
株式会社シェルパ
3Dmodeljapan株式会社
ではスタッフを大募集しております！！
Unreal Engine4、AI、プログラミングや建築パースに興味がある方！
ぜひご応募下さい！！
初心者の方、未経験の方やインターンを受けてみたい方々でも大歓迎です！！

sherpa.staff