Reactで簡単に作れる！カスタマイズ可能なカードデザインコンポーネントの完全ガイド

Reactを使ったWebアプリケーション開発において、コンポーネントは再利用性と柔軟性を高める重要な要素です。特に、カードデザインコンポーネントは情報を視覚的に整理して表示するために非常に役立ちます。本記事では、シンプルでありながら強力なカスタマイズ可能なカードコンポーネントをReactで作成する方法を詳しく解説します。基本的なカード構造から始め、動的データの適用やスタイリングの拡張、さらに実践的な応用例まで網羅的に紹介します。初心者でもプロジェクトにすぐに取り入れられる内容となっていますので、ぜひ最後までお読みください。

カードデザインコンポーネントの概要

Webアプリケーションにおけるカードデザインコンポーネントは、情報をコンパクトに整理し、視覚的にわかりやすく表示するために使用されるUI要素です。たとえば、ユーザープロフィール、商品リスト、ニュース記事のサマリーなど、さまざまな場面で活用されます。

カードコンポーネントの役割

カードは、以下のような場面で役立ちます：

情報の分割：複数の項目を区別して表示することで、ユーザーが必要な情報を簡単に見つけられる。
視覚的なアピール：画像やアイコン、テキストを組み合わせることで、デザインの美しさを引き立てる。
操作性の向上：ボタンやリンクを組み込むことで、操作を直感的に行えるようになる。

カードデザインの一般的な要素

多くのカードデザインは、以下のような基本的な構造を持っています：

ヘッダー：タイトルや簡単な説明を表示。
メインコンテンツ：画像や詳細情報を表示する中心部分。
フッター：アクションボタンや追加情報を配置。

Reactを使用することで、これらの要素を動的に管理し、簡単にカスタマイズできるカードデザインを作成できます。

必要な環境と準備

Reactを用いてカスタマイズ可能なカードコンポーネントを作成するには、まずプロジェクト環境を整える必要があります。ここでは、初期セットアップから必要な依存関係のインストール方法までを説明します。

Reactプロジェクトのセットアップ

Node.jsのインストール
Node.jsが未インストールの場合、Node.js公式サイトから最新版をダウンロードしてインストールします。
新規Reactプロジェクトの作成
ターミナルで以下のコマンドを実行し、Reactプロジェクトを作成します：

   npx create-react-app card-component-example
   cd card-component-example

プロジェクトの起動
開発環境を起動して、Reactアプリケーションが動作するか確認します：

   npm start

必要な依存関係のインストール

カードコンポーネントを効率的に作成するため、以下の依存関係をインストールします：

スタイリングライブラリ（例：Styled-Components）
柔軟なスタイリングを行うため、styled-componentsをインストールします：

   npm install styled-components

アイコンライブラリ（例：React Icons）
カードにアイコンを追加する場合、react-iconsが便利です：

   npm install react-icons

開発環境の確認

必要な依存関係が正しくインストールされたら、開発環境をリロードし、Reactプロジェクトが正常に動作することを確認します。この準備が完了すれば、カードコンポーネントの実装に進む準備が整います。

ベースとなるカードコンポーネントの作成

ここでは、Reactを使って基本的なカードコンポーネントを構築します。シンプルな構造を持つベースコンポーネントから始めることで、後のカスタマイズや機能追加を容易にします。

ベースコンポーネントの設計

カードコンポーネントには、以下の要素を含む基本的な構造を実装します：

タイトル
画像
説明文
アクションボタン

コード例：基本的なカードコンポーネント

以下は、ベースとなるカードコンポーネントの実装例です。

import React from 'react';
import './Card.css'; // CSSファイルでスタイルを定義

const Card = ({ title, image, description, buttonText }) => {
  return (
    <div className="card">
      <img src={image} alt={title} className="card-image" />
      <div className="card-content">
        <h3 className="card-title">{title}</h3>
        <p className="card-description">{description}</p>
        <button className="card-button">{buttonText}</button>
      </div>
    </div>
  );
};

export default Card;

CSSスタイルの例

スタイルを整えるため、Card.cssに以下のコードを追加します：

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 300px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.05);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 8px;
}

.card-description {
  font-size: 1em;
  color: #555;
  margin-bottom: 16px;
}

.card-button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}

.card-button:hover {
  background-color: #0056b3;
}

コンポーネントの使用例

作成したカードコンポーネントをアプリ内で使用する方法は以下の通りです：

import React from 'react';
import Card from './Card';

function App() {
  return (
    <div>
      <Card
        title="React Card"
        image="https://via.placeholder.com/300x200"
        description="This is a customizable card component."
        buttonText="Learn More"
      />
    </div>
  );
}

export default App;

これで、ベースとなるカードコンポーネントが完成しました。このコードを基に、さらにカスタマイズや機能追加を行うことが可能です。

カスタマイズ機能の追加方法

基本的なカードコンポーネントが完成したら、デザインや機能を拡張するカスタマイズを行います。以下では、プロパティの追加やスタイリングを動的に変える方法を紹介します。

プロパティを使ったカスタマイズ

カードコンポーネントに新しいプロパティを追加することで、動的なスタイル変更やレイアウト変更を実現できます。

例：カードの背景色をカスタマイズ

カードの背景色を変更できるようにbackgroundColorプロパティを追加します。

コード例：背景色をカスタマイズ

const Card = ({ title, image, description, buttonText, backgroundColor }) => {
  const cardStyle = {
    backgroundColor: backgroundColor || '#fff', // デフォルト値を設定
    border: '1px solid #ddd',
    borderRadius: '8px',
    width: '300px',
    overflow: 'hidden',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
    transition: 'transform 0.2s',
  };

  return (
    <div style={cardStyle}>
      <img src={image} alt={title} style={{ width: '100%', height: '200px', objectFit: 'cover' }} />
      <div style={{ padding: '16px' }}>
        <h3 style={{ fontSize: '1.5em', marginBottom: '8px' }}>{title}</h3>
        <p style={{ fontSize: '1em', color: '#555', marginBottom: '16px' }}>{description}</p>
        <button style={{
          padding: '10px 20px',
          backgroundColor: '#007BFF',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
          fontSize: '1em',
        }}>
          {buttonText}
        </button>
      </div>
    </div>
  );
};

使用例：背景色付きカード

<Card
  title="Custom Card"
  image="https://via.placeholder.com/300x200"
  description="This card has a custom background color."
  buttonText="Click Me"
  backgroundColor="#f0f8ff"
/>

スタイルの条件付き変更

カードの状態やプロパティに応じてスタイルを変更します。たとえば、選択状態を表すスタイルを条件付きで適用します。

例：選択状態のカスタマイズ

isSelectedプロパティを使い、選択されたカードに異なるボーダーカラーを適用します。

コード例：選択状態のスタイル変更

const Card = ({ title, image, description, buttonText, isSelected }) => {
  const cardStyle = {
    border: isSelected ? '2px solid #007BFF' : '1px solid #ddd',
    borderRadius: '8px',
    width: '300px',
    overflow: 'hidden',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
    transition: 'transform 0.2s',
  };

  return (
    <div style={cardStyle}>
      <img src={image} alt={title} style={{ width: '100%', height: '200px', objectFit: 'cover' }} />
      <div style={{ padding: '16px' }}>
        <h3 style={{ fontSize: '1.5em', marginBottom: '8px' }}>{title}</h3>
        <p style={{ fontSize: '1em', color: '#555', marginBottom: '16px' }}>{description}</p>
        <button style={{
          padding: '10px 20px',
          backgroundColor: '#007BFF',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
          fontSize: '1em',
        }}>
          {buttonText}
        </button>
      </div>
    </div>
  );
};

使用例：選択状態のカード

<Card
  title="Selected Card"
  image="https://via.placeholder.com/300x200"
  description="This card is selected."
  buttonText="Confirm"
  isSelected={true}
/>

追加機能の実装

クリックイベント：カード全体をクリック可能にして、イベントハンドラを追加できます。
アニメーション：react-springやframer-motionを使って、クリック時やホバー時にアニメーションを適用します。

これらのカスタマイズにより、カードコンポーネントはよりインタラクティブで用途が広がります。

コンポーネントにデータを渡す仕組み

Reactでは、コンポーネントにデータを渡して表示内容を動的に変化させることができます。ここでは、親コンポーネントから子コンポーネントにデータを渡す仕組みを解説します。

Propsを使ったデータの受け渡し

Reactでは、Props（プロパティ）を使用して親から子へデータを渡します。子コンポーネントは渡されたデータを読み取り、UIを動的に変更できます。

例：親コンポーネントからカードにデータを渡す

以下は、複数のデータを親コンポーネントからカードコンポーネントに渡して表示する例です。

コード例：親コンポーネント

import React from 'react';
import Card from './Card';

const App = () => {
  const cardData = [
    {
      title: "React Basics",
      image: "https://via.placeholder.com/300x200",
      description: "Learn the basics of React.",
      buttonText: "Get Started",
    },
    {
      title: "Advanced React",
      image: "https://via.placeholder.com/300x200",
      description: "Explore advanced topics in React.",
      buttonText: "Learn More",
    },
  ];

  return (
    <div>
      {cardData.map((data, index) => (
        <Card
          key={index}
          title={data.title}
          image={data.image}
          description={data.description}
          buttonText={data.buttonText}
        />
      ))}
    </div>
  );
};

export default App;

コード例：カードコンポーネント
先ほど作成したCardコンポーネントがそのまま利用できます。

動的データの活用

動的なデータを使うことで、APIから取得した内容やユーザーが入力した内容をカードに反映させることも可能です。

例：APIからデータを取得してカードに渡す

ここでは、useEffectフックを使ってAPIからデータを取得し、それをカードに表示する方法を示します。

コード例：APIデータの取得

import React, { useState, useEffect } from 'react';
import Card from './Card';

const App = () => {
  const [cards, setCards] = useState([]);

  useEffect(() => {
    // ダミーAPIを使用
    fetch("https://jsonplaceholder.typicode.com/photos?_limit=5")
      .then((response) => response.json())
      .then((data) => {
        const formattedData = data.map((item) => ({
          title: item.title,
          image: item.url,
          description: "Dynamic content loaded from API",
          buttonText: "View More",
        }));
        setCards(formattedData);
      });
  }, []);

  return (
    <div>
      {cards.map((card, index) => (
        <Card
          key={index}
          title={card.title}
          image={card.image}
          description={card.description}
          buttonText={card.buttonText}
        />
      ))}
    </div>
  );
};

export default App;

Propsの型チェック

prop-typesを使うと、渡されるPropsの型をチェックでき、開発時のエラーを防止できます。

コード例：Propsの型チェック

npm install prop-types

import PropTypes from 'prop-types';

const Card = ({ title, image, description, buttonText }) => {
  // コンポーネントの内容
};

Card.propTypes = {
  title: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
  description: PropTypes.string,
  buttonText: PropTypes.string,
};

コンポーネントの柔軟性を高める

データをPropsで渡す仕組みを活用することで、カードコンポーネントをどのようなデータ構造にも適応させることができます。この柔軟性が、Reactのコンポーネントベース開発の大きな強みです。

外部ライブラリを使用したスタイルの強化

カードデザインをさらに洗練させるために、CSSフレームワークやスタイリングライブラリを活用します。これにより、手間を省きつつ、プロフェッショナルな外観を持つカードを簡単に作成できます。

Material-UIを使ったデザイン強化

Material-UI（現在はMUIとして知られる）は、React向けの人気ライブラリです。事前定義されたコンポーネントとスタイルを使用して、カードデザインを簡単に作成できます。

Material-UIのセットアップ

以下のコマンドでMaterial-UIをインストールします：

npm install @mui/material @emotion/react @emotion/styled

Material-UIを用いたカードの作成

コード例：Material-UIのカードコンポーネント

import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import CardActions from '@mui/material/CardActions';

const CustomCard = ({ title, image, description }) => {
  return (
    <Card sx={{ maxWidth: 345, margin: '16px', boxShadow: 3 }}>
      <CardMedia
        component="img"
        height="140"
        image={image}
        alt={title}
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {title}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {description}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
};

export default CustomCard;

使用例

import React from 'react';
import CustomCard from './CustomCard';

function App() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
      <CustomCard
        title="Beautiful Scenery"
        image="https://via.placeholder.com/300x200"
        description="This is a beautiful scenery you must visit."
      />
      <CustomCard
        title="Innovative Tech"
        image="https://via.placeholder.com/300x200"
        description="Explore the latest advancements in technology."
      />
    </div>
  );
}

export default App;

Tailwind CSSを使ったデザイン強化

Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、柔軟かつ高速にスタイリングが可能です。

Tailwind CSSのセットアップ

Tailwind CSSをReactプロジェクトに導入するには、以下の手順を実行します：

Tailwind CSSをインストール：

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init

Tailwind CSSの設定ファイル（tailwind.config.js）を編集し、テンプレートを指定します。
TailwindのCSSをindex.cssに追加：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Tailwindを使ったカードの作成

コード例：Tailwind CSSを使用したカード

import React from 'react';

const TailwindCard = ({ title, image, description, buttonText }) => {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-4">
      <img className="w-full h-48 object-cover" src={image} alt={title} />
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2">{title}</div>
        <p className="text-gray-700 text-base">{description}</p>
      </div>
      <div className="px-6 py-4">
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          {buttonText}
        </button>
      </div>
    </div>
  );
};

export default TailwindCard;

使用例

import React from 'react';
import TailwindCard from './TailwindCard';

function App() {
  return (
    <div className="flex flex-wrap justify-center">
      <TailwindCard
        title="Stunning Mountains"
        image="https://via.placeholder.com/300x200"
        description="Experience the majestic mountains like never before."
        buttonText="Explore"
      />
      <TailwindCard
        title="Modern Art"
        image="https://via.placeholder.com/300x200"
        description="Dive into the world of modern art and creativity."
        buttonText="Discover"
      />
    </div>
  );
}

export default App;

CSSフレームワークの選択基準

Material-UI：事前にデザインされたコンポーネントを活用したい場合に適しています。
Tailwind CSS：デザインを細かくカスタマイズしたい場合に最適です。

これらのライブラリを使えば、洗練されたデザインを素早く実現できます。

応用例：複数カードのレイアウトを作成する

複数のカードを利用することで、リストやグリッドレイアウトのUIを作成できます。これにより、情報を効率的に表示し、ユーザーが簡単に内容を把握できるようになります。

グリッドレイアウトの作成

グリッドレイアウトは、複数のカードを整然と並べる方法です。CSSのdisplay: gridプロパティを使用して、レスポンシブなレイアウトを構築できます。

コード例：グリッドレイアウト

以下は、カードコンポーネントを使用してグリッドレイアウトを作成する例です。

import React from 'react';
import Card from './Card'; // 既存のCardコンポーネントを再利用

const cardData = [
  {
    title: "Card 1",
    image: "https://via.placeholder.com/300x200",
    description: "This is the first card.",
    buttonText: "Learn More",
  },
  {
    title: "Card 2",
    image: "https://via.placeholder.com/300x200",
    description: "This is the second card.",
    buttonText: "Learn More",
  },
  {
    title: "Card 3",
    image: "https://via.placeholder.com/300x200",
    description: "This is the third card.",
    buttonText: "Learn More",
  },
  {
    title: "Card 4",
    image: "https://via.placeholder.com/300x200",
    description: "This is the fourth card.",
    buttonText: "Learn More",
  },
];

const GridLayout = () => {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
      gap: '16px',
      padding: '16px',
    }}>
      {cardData.map((data, index) => (
        <Card
          key={index}
          title={data.title}
          image={data.image}
          description={data.description}
          buttonText={data.buttonText}
        />
      ))}
    </div>
  );
};

export default GridLayout;

ポイント

gridTemplateColumns: カードのカラム数を動的に設定します。auto-fitを使用すると、画面サイズに応じて列数が変わります。
gap: カード間のスペースを指定します。

リストレイアウトの作成

リストレイアウトは、縦に並べたカードを表示する際に適しています。これは、特にモバイルデバイスで効果的です。

コード例：リストレイアウト

const ListLayout = () => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: '16px',
      padding: '16px',
    }}>
      {cardData.map((data, index) => (
        <Card
          key={index}
          title={data.title}
          image={data.image}
          description={data.description}
          buttonText={data.buttonText}
        />
      ))}
    </div>
  );
};

export default ListLayout;

ポイント

flexDirection: 'column': カードを縦に並べる設定です。
gap: 縦方向のスペースを調整します。

レスポンシブ対応

グリッドやリストレイアウトをメディアクエリで切り替えることで、デバイスに応じた最適な表示が可能です。

コード例：レスポンシブデザイン

const ResponsiveLayout = () => {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
      gap: '16px',
      padding: '16px',
    }}>
      {cardData.map((data, index) => (
        <Card
          key={index}
          title={data.title}
          image={data.image}
          description={data.description}
          buttonText={data.buttonText}
        />
      ))}
    </div>
  );
};

このレイアウトは、CSS Gridのauto-fitにより自動的にレスポンシブ対応します。

実際の使用例

グリッドレイアウト: 商品一覧ページ、写真ギャラリー。
リストレイアウト: ニュースフィード、記事一覧。

複数カードを効果的に配置することで、UIの魅力と使いやすさが大幅に向上します。

演習問題：独自のカスタムカードを作成してみよう

この記事で学んだ内容を実践するために、独自のカスタムカードを作成してみましょう。この演習では、以下の要件を満たすカードを構築します。

演習の要件

基本機能

タイトル、画像、説明文、アクションボタンを含むカードを作成する。

カスタマイズ機能

Propsを使用して、以下の要素を動的に変更できるようにする：
- 背景色
- ボーダースタイル
- アクションボタンのラベル

イベントハンドリング

アクションボタンをクリックしたときにコンソールにメッセージを表示する。

サンプルコード

以下のコードを参考に、自分なりのアレンジを加えてみてください。

カスタムカードコンポーネント

import React from 'react';

const CustomCard = ({ 
  title, 
  image, 
  description, 
  buttonText, 
  backgroundColor, 
  borderColor, 
  onButtonClick 
}) => {
  const cardStyle = {
    backgroundColor: backgroundColor || '#fff',
    border: `2px solid ${borderColor || '#ddd'}`,
    borderRadius: '8px',
    width: '300px',
    overflow: 'hidden',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
    transition: 'transform 0.2s',
    margin: '16px',
  };

  return (
    <div style={cardStyle}>
      <img src={image} alt={title} style={{ width: '100%', height: '200px', objectFit: 'cover' }} />
      <div style={{ padding: '16px' }}>
        <h3 style={{ fontSize: '1.5em', marginBottom: '8px' }}>{title}</h3>
        <p style={{ fontSize: '1em', color: '#555', marginBottom: '16px' }}>{description}</p>
        <button
          onClick={onButtonClick}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007BFF',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '1em',
          }}
        >
          {buttonText}
        </button>
      </div>
    </div>
  );
};

export default CustomCard;

親コンポーネントでの使用例

import React from 'react';
import CustomCard from './CustomCard';

const App = () => {
  const handleButtonClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
      <CustomCard
        title="Custom Card Example"
        image="https://via.placeholder.com/300x200"
        description="This is a customizable card component with dynamic styling."
        buttonText="Click Me"
        backgroundColor="#f9f9f9"
        borderColor="#007BFF"
        onButtonClick={handleButtonClick}
      />
    </div>
  );
};

export default App;

追加のチャレンジ

ホバーエフェクト: ホバー時にカード全体が少し大きくなるアニメーションを追加してみましょう。
レスポンシブ対応: CSS GridまたはFlexboxを活用して、異なるデバイスサイズに対応するレイアウトを作成します。
APIデータの活用: フェッチしたデータを使用してカードの内容を動的に生成してみてください。

演習の成果を確認する方法

カードのスタイルや動作が期待どおりに動いているかを確認してください。
Propsを変更して、背景色やボーダーが動的に変わることをテストしましょう。
アクションボタンをクリックして、イベントが正常に発火していることを確認してください。

これらの課題を通じて、カードコンポーネントの理解をさらに深めることができます！

まとめ

本記事では、Reactを使ってカスタマイズ可能なカードコンポーネントを作成する方法を詳しく解説しました。基本的なカード構造の構築から始め、Propsを利用した動的データの管理、スタイリングライブラリを活用したデザイン強化、さらに応用例としてグリッドやリストレイアウトの実装まで幅広い内容をカバーしました。

カードコンポーネントは、情報を整理し、視覚的に魅力的なUIを構築する上で欠かせない要素です。今回学んだ知識を基に、自分のプロジェクトに適したカスタマイズや新しい機能を追加し、Reactの可能性をさらに広げていきましょう。

Reactで簡単に作れる！カスタマイズ可能なカードデザインコンポーネントの完全ガイド

カードデザインコンポーネントの概要

カードコンポーネントの役割

カードデザインの一般的な要素

必要な環境と準備

Reactプロジェクトのセットアップ

必要な依存関係のインストール

開発環境の確認

ベースとなるカードコンポーネントの作成

ベースコンポーネントの設計

コード例：基本的なカードコンポーネント

CSSスタイルの例

コンポーネントの使用例

カスタマイズ機能の追加方法

プロパティを使ったカスタマイズ

例：カードの背景色をカスタマイズ

スタイルの条件付き変更

例：選択状態のカスタマイズ

追加機能の実装

コンポーネントにデータを渡す仕組み

Propsを使ったデータの受け渡し

例：親コンポーネントからカードにデータを渡す

動的データの活用

例：APIからデータを取得してカードに渡す

Propsの型チェック

コンポーネントの柔軟性を高める

外部ライブラリを使用したスタイルの強化

Material-UIを使ったデザイン強化

Material-UIのセットアップ

Material-UIを用いたカードの作成

使用例

Tailwind CSSを使ったデザイン強化

Tailwind CSSのセットアップ

Tailwindを使ったカードの作成

使用例

CSSフレームワークの選択基準

応用例：複数カードのレイアウトを作成する

グリッドレイアウトの作成

コード例：グリッドレイアウト

ポイント

リストレイアウトの作成

コード例：リストレイアウト

ポイント

レスポンシブ対応

コード例：レスポンシブデザイン

実際の使用例

演習問題：独自のカスタムカードを作成してみよう

演習の要件

サンプルコード

追加のチャレンジ

演習の成果を確認する方法

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル