プログラミングでフォーマットのソースを頂戴！

ReactとTailwind CSS を使ってブログ記事一覧のコンポーネントを作成する。見出しは「人気の記事」、ブログ記事のタイトル、横120px縦100pxのサムネイル画像を含む。3つの記事を掲載する。

まず、ReactとTailwind CSSをプロジェクトにインストールして、それらをインポートします。プロジェクトに必要なパッケージがインストールされていることを確認してください。

次に、ブログ記事一覧のコンポーネントを作成します。以下のコードは、ReactとTailwind CSSを使ったサンプルコードです。このコードは、見出し「人気の記事」、ブログ記事のタイトル、横120px縦100pxのサムネイル画像を含んでおり、3つの記事を表示します。

// BlogList.js
import React from 'react';

const BlogList = () => {
  const articles = [
    {
      id: 1,
      title: 'ブログ記事タイトル1',
      thumbnail: 'https://example.com/thumbnail1.jpg',
    },
    {
      id: 2,
      title: 'ブログ記事タイトル2',
      thumbnail: 'https://example.com/thumbnail2.jpg',
    },
    {
      id: 3,
      title: 'ブログ記事タイトル3',
      thumbnail: 'https://example.com/thumbnail3.jpg',
    },
  ];

  return (
    <div className="bg-white p-6 rounded-md shadow-md">
      <h2 className="text-2xl font-bold mb-6">人気の記事</h2>
      <ul>
        {articles.map((article) => (
          <li key={article.id} className="mb-4 flex items-center">
            <img
              className="w-30 h-25 object-cover mr-4"
              src={article.thumbnail}
              alt={article.title}
            />
            <h3 className="text-xl">{article.title}</h3>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default BlogList;

このコードは、ブログ記事一覧を表示するためのReactコンポーネントです。記事のデータは、articlesという配列に格納されています。サムネイル画像のサイズは、Tailwind CSSのw-30およびh-25クラスで設定しています。このクラスを使用して、横120px縦100pxに近いサイズに調整できます。

このコンポーネントを使用するには、以下のように親コンポーネントにインポートしてください。

// App.js
import React from 'react';
import BlogList from './BlogList';

const App = () => {
  return (
    <div className="container mx-auto">
      <BlogList />
    </div>
  );
};

export default App;

これで、「人気の記事」の見出しと3つのブログ記事が表示されるはずです。ブログ記事のデータは、APIから取得するか、他の方法で取得できるように変更することができます。

2023-03-22