ReactでオシャレなプロフィールWebサイトを作成してみた【初心者向け】

はじめに

こんにちは！今回は、Reactを使って簡単かつオシャレなプロフィールWebサイトを作成する方法をご紹介します。プロフィールサイトを手軽に作りたい方や、Reactを使ってみたい初心者の方に向けた内容です。

使用技術

• React
• styled-components（CSS-in-JSで簡単にスタイルを適用）
• Node.js（Reactアプリの作成）

---

完成イメージ

プロジェクトの作成手順

まずは、Reactアプリを作成していきます。

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

npx create-react-app profile-website
cd profile-website
npm install styled-components
npm start

上記のコマンドを実行することで、Reactプロジェクトが作成され、開発サーバーが起動します。これで準備完了です！

---

2. プロフィールWebサイトの作成

次に、オシャレなプロフィールページを作成していきます。今回は、styled-componentsを使ってスタイルを管理します。

src/App.jsのコード

import React from 'react';
import styled from 'styled-components';

// スタイリング
const ProfileContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f0f8ff;
  height: 100vh;
  font-family: 'Arial', sans-serif;
`;

const ProfileCard = styled.div`
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  text-align: center;
`;

const ProfileImage = styled.img`
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
`;

const ProfileName = styled.h1`
  font-size: 2em;
  margin: 20px 0 10px;
`;

const ProfileJob = styled.h2`
  font-size: 1.2em;
  color: #888;
  margin-bottom: 20px;
`;

const ProfileDescription = styled.p`
  font-size: 1em;
  color: #555;
  line-height: 1.5;
`;

const SocialLinks = styled.div`
  margin-top: 20px;
  display: flex;
  gap: 15px;
`;

const SocialIcon = styled.a`
  font-size: 1.5em;
  color: #888;
  transition: color 0.3s ease;
  
  &:hover {
    color: #000;
  }
`;

function App() {
  return (
    <ProfileContainer>
      <ProfileCard>
        <ProfileImage src="https://via.placeholder.com/150" alt="Profile" />
        <ProfileName>Anonymous User</ProfileName>
        <ProfileJob>Web Developer</ProfileJob>
        <ProfileDescription>
          I am passionate about creating modern web applications using React. Always eager to learn new technologies and improve my skills!
        </ProfileDescription>
        <SocialLinks>
          <SocialIcon href="https://github.com" target="_blank">🐱 GitHub</SocialIcon>
          <SocialIcon href="https://twitter.com" target="_blank">🐦 Twitter</SocialIcon>
          <SocialIcon href="https://linkedin.com" target="_blank">🔗 LinkedIn</SocialIcon>
        </SocialLinks>
      </ProfileCard>
    </ProfileContainer>
  );
}

export default App;

3. スタイリングのポイント

• ProfileContainer: Webページ全体を中央揃えし、背景色を設定。
• ProfileCard: プロフィール情報をカード形式で表示し、ボックスシャドウで立体感を演出。
• ProfileImage: 円形に切り取ったプロフィール画像を表示。
• SocialLinks: GitHub、Twitter、LinkedInなどのアイコンをホバーすると色が変わるアニメーションを設定。

4. 実行結果

このコードを実行すると、写真、名前、職業、自己紹介、そしてソーシャルメディアへのリンクが表示されたオシャレなプロフィールWebサイトが完成します。

---

カスタマイズのアイデア

• プロフィール写真の変更: src="https://via.placeholder.com/150" の部分を、自分のプロフィール画像のURLに変更してください。
• 色やフォントのカスタマイズ: styled-components を使って、自由にスタイルを調整できます。背景色やフォントサイズを変更して、自分好みのデザインにしましょう！
• ソーシャルリンクの追加: 必要に応じて、他のSNSアイコンを追加することもできます。

---

まとめ

Reactとstyled-componentsを使うことで、簡単にオシャレなプロフィールWebサイトを作成することができました。初心者の方でも簡単に作成できるので、ぜひ挑戦してみてください！

Reactの学習を進めて、さらにカスタマイズしたり、他の機能を追加したりすることで、独自のプロフィールサイトを完成させましょう。

それでは、良いReactライフを！

---

この記事が参考になったら、ぜひ「LGTM」をお願いします！