Web初心者でも3時間で完成できるポートフォリオサイト #3
ポートフォリオのつくりかたWeb制作が初めてでも、無料で簡単にポートフォリオサイトをつくることができます。この記事では、環境構築からサイト公開まで、3時間でポートフォリオサイトをつくる方法を紹介します。
この記事の手順に沿って作成すると、以下のようなポートフォリオサイトが完成します。
サイト作成のおおよその時間配分は以下の通りです。
- ポートフォリオの内容を考える (60分 )
- VSCodeでWeb制作環境を用意する (15分)
- HTMLを作成する (45分)
- Bootstrapで見た目を整える (45分)
- GitHubPagesに公開する (15分)
今回は、「3. HTMLを作成する」について紹介します。
もくじ
HTMLと文書の構造化
ウェブサイトはHTMLファイルでつくられています。HTMLは、文字に意味を与えて、文章を構造化するための言語です。「ここはタイトルだよ」「ここは見出しだよ」「ここは強調だよ」といったように、「文書のこの部分はこういう意味だよ」という印を付けていきます。
第1回で以下のようにポートフォリオの構造化を行いました。この構造に従って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>
ナビゲーションを用意する
1ページの内容が多くなってきたら、ページの各要素へジャンプするためのナビゲーション(目次)があるほうが便利です。
ナビゲーションは<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>
HTMLファイルの完成
まとめ
今回は、HTMLを実際に書いてポートフォリオサイトをつくりました。以下が今回作成したHTMLファイルです。
また、以下のリンクからブラウザ上でサイトを確認できます。
あとは、自由に自分のポートフォリオに必要なコンテンツを記述してください。徐々にサイトができてきましたが、まだ質素な見た目のままです。
次回は、Bootstrapを使ってサイト全体の見た目を整えていきます。