HTML、CSS、およびJavaScriptを使用してポートフォリオのウェブサイトを作成する方法

方法1: 純粋なHTMLとCSSのみを使用する

まず、HTMLでウェブサイトの基本的な構造を作成します。これには、ヘッダーセクション、メインセクション、フッターセクションなどが含まれます。
次に、CSSを使用してウェブサイトのスタイルを指定します。これには、カラースキーム、フォント、レイアウトなどが含まれます。

例:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
 <h1>ポートフォリオ</h1>
</header>
<main>
 <section>
   <h2>About</h2>
   <p>自己紹介や経歴などを記載します。</p>
 </section>
 <section>
   <h2>Works</h2>
   <ul>
     <li>作品1</li>
     <li>作品2</li>
     <li>作品3</li>
   </ul>
 </section>
</main>
<footer>
 <p>© 2024 ポートフォリオ. All rights reserved.</p>
</footer>
</body>
</html>

/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
/* 他の要素のスタイルも指定します */

方法2: JavaScriptを使用してインタラクティブな要素を追加する

JavaScriptを使用して、ウェブサイトに動的な要素やインタラクティブな機能を追加することができます。例えば、画像のスライドショー、フィルタリング機能、フォームのバリデーションなどです。

例:

<!-- HTMLの一部 -->
<section>
<h2>Works</h2>
<ul id="works-list">
 <!-- JavaScriptで動的に作品を追加します -->
</ul>
</section>

// JavaScriptの一部
const worksList = document.getElementById("works-list");
// 作品データ
const works = [
{ title: "作品1", image: "img1.jpg" },
{ title: "作品2", image: "img2.jpg" },
{ title: "作品3", image: "img3.jpg" }
];
// 作品リストを動的に生成します
works.forEach(work => {
const li = document.createElement("li");
const img = document.createElement("img");
img.src = work.image;
img.alt = work.title;
li.appendChild(img);
worksList.appendChild(li);
});

方法3: フレームワークを使用する

HTML、CSS、JavaScriptのフレームワーク（例: React、Vue.js）を使用すると、ポートフォリオのウェブサイトをより効率的に作成することができます。これにより、再利用可能なコンポーネントや状態管理の機能が提供されます。

例: Reactを使用した場合

// App.js
import React from "react";
import Header from "./components/Header";
import About from "./components/About";
import Works from "./components/Works";
import Footer from "./components/Footer";
function App() {
return (
 <div>
   <Header />
   <About />
   <Works />
   <Footer />
 </div>
);
}
export default App;

// Works.js
import React from "react";
import WorkItem from "./WorkItem";
const worksData = [
{ title: "作品1", image: "img1.jpg" },
{ title: "作品2", image: "img2.jpg" },
{ title: "作品3", image: "img3.jpg" }
];
function Works() {
return (
 <section>
   <h2>Works</h2>
   <ul>
     {worksData.map((work, index) => (
       <WorkItem key={index} title={work.title} image={work.image} />
     ))}
   </ul>
 </section>
);
}
export default Works;

// WorkItem.js
import React from "react";
function WorkItem({ title, image }) {
return (
 <li>
   <img src={image} alt={title} />
 </li>
);
}
export default WorkItem;

ポートフォリオのウェブサイトを作成するための様々な方法とコード例を紹介しました。これらの方法はあくまで例ですので、実際のウェブサイト制作にはさまざまな要素が含まれることを念頭に置いてください。