初心者向け｜HTML・CSSでWebサイトを作る方法【その１：HTML編】

この記事で作るWebサイト

今回は、その１・その２の2つの記事を通して、シンプルな1ページのポートフォリオサイトを作ります。

その１ではHTMLを使ってページの内容や基本構造を作り、その２ではCSSを追加してデザインを整えていきます。

最終的に完成するサイトがこちらです。

その１・その２を通して作成するポートフォリオサイトの完成イメージ

その１で完成するHTMLだけのWebページ

サイトの構成は、次のようになります。

今回作るポートフォリオサイト

TOP ↓ WORK ↓ ABOUT ↓ CONTACT

今回は、最初にWORKで作品を見せて「何を作っている人なのか」を伝え、そのあとにABOUTで制作者について紹介する構成にしています。

ポートフォリオの目的によって必要な内容や順番は変わるため、自分の活動に合わせて変更してみてください。

1. Webサイトを作るために必要なもの

HTMLとCSSでWebサイトを作るために、特別な機材や有料のソフトは必要ありません。

今回は、次の3つを使ってWebサイトを作っていきます。

用意するもの

パソコン（Windows・MacどちらでもOK）
Google ChromeやSafariなどのWebブラウザ
Visual Studio Code（VS Code）

パソコンはWindows・Macのどちらでも問題ありません。今回使用するVS Codeは、どちらの環境でも利用できます。

WebサイトのコードをVS Codeで編集し、作ったページをChromeやSafariなどのブラウザで開いて実際の表示を確認しながら制作していきます。

この記事では、Webサイトの内容や構造を作るためのHTMLを使います。初めてコードを書く方でも進められるように、実際のコードを確認しながらひとつずつ作っていきます。

記事内のコードはコピー＆ペーストして使うことができるので、コードをすべて自分で入力する必要はありません。まずはコードをコピーして実際に表示してみながら、少しずつHTMLの仕組みを知っていきましょう。

2. VS Codeを準備する

Webサイトのコードを書くために、今回はVisual Studio Code（VS Code）というコードエディターを使用します。

VS Codeとは？

VS Codeは、HTMLやCSSなどのコードを書いたり編集したりするために使えるコードエディターです。

無料で利用でき、WindowsやMacに対応しているため、初めてWebサイトを作る方にも使いやすいツールです。

VS Codeをインストールする

まずはVS Codeの公式サイトから、使用しているパソコンに合ったものをダウンロードします。

Visual Studio Code 公式サイト →

ダウンロードしたファイルを開き、画面の案内に沿ってインストールを進めましょう。

インストールが完了したらVS Codeを起動します。これでWebサイトを作る準備は完了です。

3. Webサイト用のフォルダを作る

VS Codeの準備ができたら、 Webサイトで使用するファイルをまとめて保存するためのフォルダを作ります。

今回は「sample-portfolio」という名前のフォルダを作ってみましょう。デスクトップなど、自分がわかりやすい場所に作成してください。

フォルダをVS Codeで開く

VS Codeを起動したら、先ほど作成した「sample-portfolio」フォルダをVS Codeで開きます。

Macの場合は、画面上部のメニューバーから「File」→「Open Folder...」を選択します。

Windowsの場合は、VS Codeの画面上部にある「File」→「Open Folder...」を選択します。

フォルダを選択する画面が表示されたら、作成した「sample-portfolio」フォルダを選んで開きます。

sample-portfolioの中身

sample-portfolio/ ├── index.html ├── style.css └── images/

index.html

Webページの内容や構造を書くためのファイルです。このファイルに見出しや文章、リンクなどを書いていきます。

style.css

Webページのデザインを設定するためのファイルです。文字の大きさや色、余白、レイアウトなどをここで調整します。

imagesフォルダ

Webサイトで使用する画像を保存するためのフォルダです。今回のサンプルでは画像を使わなくても制作できますが、自分の作品画像などを追加するときに使用できます。

4. HTMLを書いてWebページを作る

ファイルの準備ができたら、「index.html」を使ってWebページの内容を作っていきます。

HTMLでは、見出しや文章、リンクなどに「タグ」と呼ばれる記号を付けることで、ページの内容や構造をブラウザに伝えます。

VS Codeで「index.html」を開いて、次のコードを入力してみましょう。

HTMLの基本部分を書く

まずは、Webページの土台になるHTMLを書きます。「index.html」に次のコードを入力してください。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>mio portfolio</title>

  <link rel="stylesheet" href="style.css">
</head>

<body>

</body>

</html>

HTMLでは、基本的に「< >」で囲まれた「タグ」を使ってページの構造を作ります。

今回のコードでは、「head」の中にページのタイトルや文字コード、 CSSファイルなどの設定を書き、「body」の中に実際にブラウザへ表示する内容を書いていきます。

「link」では、先ほど作成した「style.css」をこのHTMLから読み込むように設定しています。あとでCSSを書いたときに、ここで設定したファイルのデザインが Webページに反映されます。

今の段階ですべてのタグの意味を覚える必要はありません。実際にページを作りながら、少しずつHTMLの構造を確認していきましょう。

HeaderとHeroを作る

次に、Webページに実際に表示する内容を作っていきます。

先ほど作ったHTMLの「<body>」と「</body>」の間に、次のコードを追加してください。

<header class="header">

  <a href="#" class="logo">
    mio
  </a>

  <nav class="nav">
    <a href="#works">WORK</a>
    <a href="#about">ABOUT</a>
    <a href="#contact">CONTACT</a>
  </nav>

</header>


<main>

  <section class="hero">

    <p class="hero-label">
      PORTFOLIO SITE
    </p>

    <h1>
      つくることを、<br>
      仕事にしています。
    </h1>

    <p class="hero-text">
      Webデザインを中心に活動する、<br>
      個人クリエイターのポートフォリオです。
    </p>

    <a href="#works" class="button">
      View WORK ↓
    </a>

  </section>

</main>

「header」には、サイト名とページ内を移動するためのナビゲーションを配置しています。

「main」は、そのページの中心となる内容をまとめるためのタグです。今回はこの中に、WORK、ABOUT、CONTACTも順番に追加していきます。

最初に表示されるHeroには、サイトを訪れた人に「何をしている人なのか」が伝わるように、簡単な活動内容とWORKへのリンクを配置しています。

WORKを作る

次に、制作した作品を紹介するWORKを作ります。

先ほど作ったHeroの「</section>」のあと、「</main>」の前に次のコードを追加してください。

<section id="works" class="section works">

  <p class="section-label">WORK</p>

  <h2>制作したもの</h2>

  <p class="section-text">
    Webサイトやバナーなどを制作しています。
  </p>

  <div class="works-grid">

    <article class="work-card">

      <div class="work-image">
        <span>WORK 01</span>
      </div>

      <h3>Web Site Design</h3>

      <p>
        個人ショップをイメージした
        Webサイトのデザインです。
      </p>

    </article>


    <article class="work-card">

      <div class="work-image">
        <span>WORK 02</span>
      </div>

      <h3>Banner Design</h3>

      <p>
        SNSで使用することを想定した
        バナーデザインです。
      </p>

    </article>

  </div>

</section>

「section」は、ページの内容をテーマごとにまとめるために使用します。今回はWORK全体をひとつのsectionとして作っています。

その中にある「article」は、それぞれの作品をひとつのまとまりとして表しています。今回はWebサイトとバナーの2つの作品を用意しました。

「id="works"」を設定しているため、 Headerの「WORK」やHeroの「View WORK」をクリックすると、このWORKまで移動できるようになります。

今は作品画像の代わりに「WORK 01」「WORK 02」と表示しています。自分のポートフォリオを作るときは、あとから実際の作品画像に変更することもできます。

ABOUTを作る

次に、自分について紹介するABOUTを作ります。

WORKの「</section>」のあと、「</main>」の前に次のコードを追加してください。

<section id="about" class="section about">

  <p class="section-label">ABOUT</p>

  <h2>はじめまして、mioです。</h2>

  <p class="about-text">
    Webデザインを中心に、
    個人で制作活動をしています。
  </p>

  <p class="about-text">
    シンプルで使いやすく、
    見る人に伝わりやすいデザインを大切にしています。
  </p>

</section>

ABOUTでは、名前や活動内容、制作で大切にしていることなどを簡単に紹介しています。

今回のサイトでは、最初にWORKで作品を見せて「何をしている人なのか」を伝えたあとにABOUTを配置しています。作品や活動に興味を持ってもらったあとで、制作者自身についても知ってもらえる構成です。

自分のポートフォリオを作るときは、経歴や使用できるツール、得意なことなど、活動に合わせて内容を変更してみましょう。

CONTACTを作る

次に、連絡先を掲載するCONTACTを作ります。

ABOUTの「</section>」のあと、「</main>」の前に次のコードを追加してください。

<section id="contact" class="section contact">

  <p class="section-label">CONTACT</p>

  <h2>お問い合わせはこちら</h2>

  <p class="section-text">
    制作についてのご相談は、
    メールからお気軽にご連絡ください。
  </p>

  <a
    href="mailto:example@example.com"
    class="button"
  >
    Mail →
  </a>

</section>

CONTACTには、サイトを見た人が連絡できるようにメールへのリンクを用意しています。

「mailto:」のあとにメールアドレスを指定すると、「Mail」をクリックしたときに、パソコンやスマートフォンに設定されているメールアプリからメールを作成できます。

実際に自分のサイトを作るときは、「example@example.com」の部分を自分の問い合わせ用メールアドレスに変更してください。

Footerを作る

最後に、ページの一番下に表示するFooterを作ります。

「</main>」のあと、「</body>」の前に次のコードを追加してください。

<footer class="footer">
  <p>© 2026 mio portfolio</p>
</footer>

Footerは、Webサイトの一番下に表示される部分です。今回は、サイト名と著作権表記だけをシンプルに掲載しています。

5. HTMLで作ったページを確認する

ここまでで、ポートフォリオサイトのHTMLが完成しました。最後に、作成したWebページをブラウザで確認してみましょう。

HTMLファイルを保存する

まずは、VS Codeで「index.html」を保存します。

Macの場合は「Command + S」、 Windowsの場合は「Ctrl + S」で保存できます。

ブラウザでWebページを開く

「sample-portfolio」フォルダを開き、中にある「index.html」をダブルクリックします。

ChromeやSafariなどのブラウザで、作成したWebページが表示されます。

HTMLを作成した時点のWebページ

表示とリンクを確認する

ブラウザでページを開いたら、次の内容が表示されているか確認してみましょう。

確認すること

サイト名とメインの見出しが表示されている
WORK・ABOUT・CONTACTの内容が表示されている
ナビゲーションのリンクで各セクションへ移動できる
「View WORK」からWORKへ移動できる

HTMLだけでも、見出しや文章、リンクなどの内容はブラウザに表示されます。

ただし、この段階ではまだデザインを設定していないため、文字やリンクが並んだシンプルな見た目になっています。

表示に問題がなければ、HTML編はこれで完成です。

次はCSSでデザインを整えよう

ここまでで、HTMLを使ってポートフォリオサイトの内容と基本的な構造を作ることができました。

HTMLだけでもWebページとして表示できますが、この段階ではまだ文字やリンクが並んだシンプルな見た目です。

次の記事では、今回作ったHTMLにCSSを追加して、文字の大きさや色、余白、レイアウトなどを整えていきます。

WORKをカードとして横に並べたり、 Heroに背景色を付けたり、スマートフォンでも見やすくしたりしながら、ポートフォリオサイトのデザインを完成させていきましょう。

次の記事｜CSSでデザインを整える →

自分で作るのが難しいときは

ポートフォリオサイトは自分で作ることもできますが、 HTMLやCSSを一から書いたり、デザインやページ構成を考えたりするにはある程度の時間が必要です。

「自分のサイトはほしいけれど、どこから作ればいいかわからない」「デザインを一から考えるのが難しい」という場合は、ポートフォリオ用のテンプレートを使う方法もあります。

テンプレートを使えば、あらかじめ用意されたページをもとに、プロフィールや作品、文章、画像などを自分の内容に変更しながらサイトを作ることができます。

テンプレートを使って、自分のサイトを作る

shizuki-studioでは、 HTMLとCSSで作られたポートフォリオサイトのテンプレートを用意しています。

ファイルの編集方法からWeb上に公開するまでの手順をまとめた説明書も付属しているため、初めて自分のWebサイトを作る方にも使っていただけます。

自分の活動をまとめる場所がほしいと思ったら、まずは小さなサイトから作ってみてください。作品や活動と一緒に少しずつ更新していけば、自分らしいポートフォリオサイトに育てていくことができます。