Web初心者でも３時間で完成できるポートフォリオサイト #3

ポートフォリオのつくりかた作成日：2021.06.08

Web制作が初めてでも、無料で簡単にポートフォリオサイトをつくることができます。この記事では、環境構築からサイト公開まで、３時間でポートフォリオサイトをつくる方法を紹介します。

この記事の手順に沿って作成すると、以下のようなポートフォリオサイトが完成します。

ounimost.github.io

OUNI Portfolio

https://ounimost.github.io/portfolio/

サイト作成のおおよその時間配分は以下の通りです。

ポートフォリオの内容を考える (60分 )
VSCodeでWeb制作環境を用意する (15分)
HTMLを作成する (45分)
Bootstrapで見た目を整える (45分)
GitHubPagesに公開する (15分)

今回は、「3. HTMLを作成する」について紹介します。

HTMLと文書の構造化
HTMLに要素を追加していく
さらに要素を足していく
まとめ

HTMLと文書の構造化

ウェブサイトはHTMLファイルでつくられています。HTMLは、文字に意味を与えて、文章を構造化するための言語です。「ここはタイトルだよ」「ここは見出しだよ」「ここは強調だよ」といったように、「文書のこの部分はこういう意味だよ」という印を付けていきます。

第１回で以下のようにポートフォリオの構造化を行いました。この構造に従ってHTMLを書いていきます。

<div>タグは文書をブロックという単位で区切ります。上記のサイトの構造に従って、<div>タグで区切って、classでそのブロックの名前を付けていきます。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ページのタイトル -->
    <title>ポートフォリオサイト</title>
</head>

<body>

    <!-- 自己紹介 -->
    <div class="about">
        <div class="photo"></div>
        <div class="description"></div>
        <div class="skills"></div>
    </div>

    <!-- 作品 -->
    <div class="works">
        <div class="personal-works"></div>
        <div class="student-works"></div>
        <div class="company-works"></div>
    </div>

    <!-- 連絡先-->
    <div class="contacts">
        <div class="mail"></div>
        <div class="twitter"></div>
        <div class="facebook"></div>
    </div>

</body>

</html>

HTMLに要素を追加していく

プロフィール画像を表示する

まず、プロフィール画像を表示させます。

index.html が置かれているフォルダに新たに「img」という名前のフォルダを作成してください。ポートフォリオサイトで使用する画像ファイルはこのimgフォルダ内に置いていきます。

次に、imgフォルダ内にプロフィール画像ファイルを置いてください。

画像表示は<img>タグで行います。srcで画像ファイルがどこにあるかを指定します。

<!-- 自己紹介 -->
<div class="about">
    <div class="photo">
        <img src="img/profile.jpeg" />
    </div>

自己紹介文を表示する

文章は<p>タグを使います。改行は<br>です。
自己紹介文を以下のように記述します。

<div class="description">
  <p>
    フリーランスでアプリ開発・Web制作をしております。
    <br> 20XX年より〇〇株式会社で〇〇業務に携わる。
    <br> 20XX年よりフリーランスへ転向。
    <br>
  </p>
</div>

スキルや資格を箇条書きで表示する

スキルや資格は、箇条書きで表示させてみます。

箇条書きは<ul>と<li>を使います。

<div class="skills">
    <ul>
        <li>基本情報技術者</li>
        <li>TOEIC 900点</li>
        <li>〇〇検定　○級</li>
    </ul>
</div>

見出しを表示する

最後に見出しを表示させます。

見出しは<h>タグを使います。<h1><h2><h3>と数値を入れて、大見出し・中見出し・小見出しのように、段階を分けて使うことができます。

<!-- 自己紹介 -->
<div class="about">
    <h1>ABOUT</h1>

自己紹介の完成

これで自己紹介部分が完成しました。

さらに要素を足していく

作品紹介をつくる

作品紹介は、以下の構成にします。

作品名
紹介画像
詳細説明
使用言語・ライブラリ

使用するHTMLタグはこれまで使用したものと同じです。

<!-- 作品A -->
<div class="work">
    <img src="img/game.jpeg">
    <h4>SFゲーム</h4>
    <p>Unityをつかって、SFゲームをつくりました。</p>
    <p>Unity/C#</p>
</div>
<!-- 作品B -->
<div class="work">
    <img src="img/website2.jpeg">
    <h4>iOSアプリ開発</h4>
    <p>フリマアプリを開発しました。</p>
    <p>Swift</p>
</div>

メールやSNSへリンクさせる

他サイトなどへのリンクは<a>タグを使います。hrefでリンクさせたいURLを設定します。メールアドレスの場合は、「mailto:メールアドレス」のように設定します。

連絡先へのリンクを用意します。

<!-- 連絡先-->
<div class="contacts">
    <h1>CONTACTS</h1>
    <a href="mailto:xxx@gmail.com">Mail</a>
    <a href="https://twitter.com">Twitter</a>
    <a href="https://facebook.com">Facebook</a>
    <a href="https://instagram.com">instagram</a>
</div>

ナビゲーションを用意する

１ページの内容が多くなってきたら、ページの各要素へジャンプするためのナビゲーション（目次）があるほうが便利です。

ナビゲーションは<nav>タグを使います。

また、<a>タグでページのリンク先を指定します。hrefに#を指定することで、ページの特定の場所へリンクさせることができます。リンク先の場所は、idで名前を付けておきます。

href=”#about”と書かれていたら、idがaboutと書かれている場所へジャンプするという意味です。

<body>
    <!-- ナビゲーション -->
    <nav>
        <a href="#about">ABOUT</a>
        <a href="#works">WORKS</a>
        <a href="#contact">CONTACT</a>
    </nav>

    <!-- 自己紹介 -->
    <div class="about" id="about">
    </div>

    <!-- 作品 -->
    <div class="works" id="works">
    </div>

    <!-- 連絡先-->
    <div class="contacts" id="contacts">
    </div>