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

2024-02-17 10:21 HTMLCSS
  1. HTMLの基本構造: まず、HTMLファイルを作成します。以下は基本的な構造です。
<!DOCTYPE html>
<html>
<head>
  <title>ポートフォリオ</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js"></script>
</head>
<body>
</body>
</html>
  1. CSSスタイルの追加: 外部のCSSファイル（style.cssとして参照される）を作成し、ウェブサイトのスタイルを指定します。
/* style.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}
h1 {
  color: #333333;
}
p {
  color: #666666;
}
  1. コンテンツの追加: ポートフォリオウェブサイトには、自己紹介、スキル、プロジェクトなどのコンテンツを追加します。以下は例です。
<div class="container">
  <h1>私のポートフォリオ</h1>
  <p>こんにちは、私は〇〇です。ウェブ開発に情熱を持っており、様々なプロジェクトに取り組んできました。</p>
  <h2>スキル</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <h2>プロジェクト</h2>
  <ul>
    <li>ポートフォリオウェブサイト</li>
    <li>ブログサイト</li>
    <li>オンラインショップ</li>
  </ul>
</div>
  1. JavaScriptの追加: JavaScriptを使用して、動的な要素やインタラクティブな機能を追加することもできます。以下は例です。
// script.js
document.getElementById("myButton").addEventListener("click", function() {
  alert("ボタンがクリックされました！");
});
  1. ポートフォリオウェブサイトの公開: ウェブサイトを公開するためには、ウェブホスティングサービスを使用するか、ローカルのサーバーで実行する必要があります。

以上がポートフォリオウェブサイトを作成するための基本的な手順です。この例ではシンプルなデザインと機能を示していますが、自分の好みやプロジェクトの要件に合わせてカスタマイズすることもできます。