HTMLとCSSを使用したシンプルなポートフォリオウェブサイトの作り方

HTMLファイルの作成: まず、テキストエディタで新しいHTMLファイルを作成します。例えば、"index.html"という名前のファイルを作成しましょう。
基本的なHTML構造の設定: 以下のコードをHTMLファイルに追加して、基本的なHTML構造を設定します。

<!DOCTYPE html>
<html>
<head>
  <title>ポートフォリオ</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <h1>私のポートフォリオ</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#about">自己紹介</a></li>
      <li><a href="#projects">プロジェクト</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
    </ul>
  </nav>

  <section id="about">
    <h2>自己紹介</h2>
    <p>ここに自己紹介を書きます。</p>
  </section>

  <section id="projects">
    <h2>プロジェクト</h2>
    <p>ここにプロジェクトの一覧を表示します。</p>
  </section>

  <section id="contact">
    <h2>お問い合わせ</h2>
    <p>ここにお問い合わせフォームを配置します。</p>
  </section>

  <footer>
    <p>© 2024 私のポートフォリオ. All rights reserved.</p>
  </footer>
</body>
</html>

CSSファイルの作成: 次に、CSSファイルを作成しましょう。テキストエディタで新しいファイルを作成し、「style.css」という名前を付けます。
スタイルの追加: 以下のコードをCSSファイルに追加して、ウェブサイトのスタイルを設定します。

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin: 10px;
}
nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}
section {
  padding: 50px;
}
footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

以上が、HTMLとCSSを使用してシンプルなポートフォリオウェブサイトを作成する方法です。この基本的なコードをカスタマイズして、自分自身や自分のプロジェクトを素敵に紹介するウェブサイトを作成してみてください。この方法を参考に、自分のスキルや経験をアピールする魅力的なポートフォリオを作成できるでしょう。