Web初心者でも３時間で完成できるポートフォリオサイト #4
ポートフォリオのつくりかた
Web制作が初めてでも、無料で簡単にポートフォリオサイトをつくることができます。この記事では、環境構築からサイト公開まで、３時間でポートフォリオサイトをつくる方法を紹介します。
この記事の手順に沿って作成すると、以下のようなポートフォリオサイトが完成します。
サイト作成のおおよその時間配分は以下の通りです。
- ポートフォリオの内容を考える (60分 )
- VSCodeでWeb制作環境を用意する (15分)
- HTMLを作成する (45分)
- Bootstrapで見た目を整える (45分)
- GitHubPagesに公開する (15分)
今回は、「4. Bootstrapで見た目を整える」について紹介します。
Bootstrapを導入する
Bootstrapは、Webアプリケーションを簡単につくることができるフレームワークです。簡単な記述で、見た目などを整えることができます。今回は、このBootstrapを使って見た目を整えていきます。
まず、<head>と<body>の最後に、以下の記述を入れてBootstrapを使える状態にします。
<head>
<!-- 省略 -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<!-- 省略 -->
<!-- スクリプト -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>これで、Bootstrapを使う準備ができました。
より詳しく知りたいひとは
公式サイトでBootstrapの導入方法や仕組みについて詳しい説明が載っています。
https://getbootstrap.jp/docs/4.5/getting-started/introduction/
見た目を整えていく
自己紹介をグリッド表示させる
プロフィール画像と横並びで自己紹介文を載せるようにします。
<div>のclassにrowを指定すると、その子要素を横並びで表示させることができます。
<!-- 自己紹介 -->
<div class="about" id="about">
<h1>ABOUT</h1>
<div class="row">
<div class="photo">
<img src="img/profile.jpeg" />
</div>
<div>
<div class="description">
<p>
フリーランスでアプリ開発・Web制作をしております。
<br> 20XX年より〇〇株式会社で〇〇業務に携わる。
<br> 20XX年よりフリーランスへ転向。
<br>
</p>
</div>
<div class="skills">
<ul>
<li>基本情報技術者</li>
<li>TOEIC 900点</li>
<li>〇〇検定 ○級</li>
</ul>
</div>
</div>
</div>
</div>
rowをつかうと、グリッド状に自由にレイアウトさせることができます。
より詳しく知りたいひとは
BootstrapのGridの詳細は、とほほのサイトがわかりやすいです。
https://www.tohoho-web.com/bootstrap/grid.html
作品をカード表示にする
作品ごとに枠を表示させて、カード表示させます。
カード表示させるには、<div>のclassにcard-columnsとcardをそれぞれ設定します。
<!-- 作品 -->
<div class="works" id="works">
<h1>WORKS</h1>
<h2>Personal</h2>
<div class="personal-work card-columns">
<!-- 作品A -->
<div class="work card">
<img src="img/game.jpeg">
<h4>SFゲーム</h4>
<p>Unityをつかって、SFゲームをつくりました。</p>
<p>Unity/C#</p>
</div>
<!-- 作品B -->
<div class="work card">
<img src="img/website2.jpeg">
<h4>iOSアプリ開発</h4>
<p>フリマアプリを開発しました。</p>
<p>Swift</p>
</div>
<!-- 作品C -->
<div class="work card">
<img src="img/picture.jpeg">
<h4>絵本アプリ</h4>
<p>絵本アプリをつくりました。</p>
<p>Swift</p>
</div>
</div>
</div>
連絡先にアイコンを表示させる
TwitterやFacebookなどの連絡先にアイコンを表示させます。
Font Awesome を使うと簡単にアイコンを表示させることができます。
Bootstrapの設定と同じようにFont Awesomeの設定も必要です。以下の１行をheaderの中に入れます。
<!-- Font Awesome -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">あとは、アイコンを指定します。
これまでテキストを入力していたところを <i> 要素に置き換えるだけです。
<!-- 連絡先-->
<div class="contacts" id="contacts">
<h1>CONTACTS</h1>
<a href="mailto:xxx@gmail.com">
<i class="far fa-envelope fa-3x" style="color:#575757;" />
</a>
<a href="https://twitter.com">
<i class="fab fa-twitter fa-3x" style="color:#1DA1F2;" />
</a>
<a href="https://facebook.com">
<i class="fab fa-facebook-square fa-3x" style="color:#305097;" />
</a>
<a href="https://instagram.com">
<i class="fab fa-instagram fa-3x " style="color:#262626;" />
</a>
</div>
より詳しく知りたいひとは
Font awesome にはたくさんのアイコンがあります。
こちらから、使えるアイコンを調べることができます。
https://fontawesome.com/v5.15/icons
ナビゲーションをつくる
ナビゲーションを整えていきます。
タイトル表示を左側に、各項目へのリンクを右側に配置させます。
加えて、レスポンシブルデザインの対応も入れます。ブラウザの幅が狭い場合に、折りたたみのナビゲーションボタンが表示されるようにします。
<!-- ナビゲーション -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">MY PORTFOLIO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link text-dark" href="#about">ABOUT</a>
<a class="nav-link text-dark" href="#works">WORKS</a>
<a class="nav-link text-dark" href="#contacts">CONTACTS</a>
</div>
</div>
</nav>
これでナビゲーションが完成です。
より詳しく知りたいひとは
Naviバーはもっと自由にカスタマイズ可能です。
詳しくは公式サイトが参考になります。
https://getbootstrap.jp/docs/4.2/components/navbar/
余白を調整する
適切に余白を設けると、それぞれのコンテンツの集まりがはっきりするので、ウェブサイトがとても見やすくなります。
今回は、containerとpyを使って、簡単に余白を調整します。
<body>にcontainerを指定すると、サイトのコンテンツの幅を自動でいい感じに調整してくれます。
さらに<body>と各コンテンツの要素に対して、py-5を指定すると、上下に余白ができます。余白の大きさを小さくしたい場合は、数字の部分を書き換えればOKです。
<body class="container py-5">
<!-- ナビゲーション -->
<nav class="navbar navbar-expand-lg navbar-light py-5"></nav>
<!-- 自己紹介 -->
<div class="about py-5" id="about"></div>
<!-- 作品 -->
<div class="works py-5" id="works"></div>
<!-- 連絡先-->
<div class="contacts py-5" id="contacts"></div>
</body>もっと細かく調整する
Bootstrapをつかってポートフォリオサイトの見た目を調整しました。
以下が今回作成したHTMLファイルです。
ブラウザでサイトを見ると以下のようになります。
これで完成ですが、独自でCSSを記述すると、より細かくカスタマイズすることができます。完成形のポートフォリオサイトでは、余白調整・フォント指定・見出しのデザインなど、もう少し細かい調整をしています。
詳しく見たい場合は、完成したHTMLファイルとCSSファイルを参照ください。
最終的なサイトは以下のようになります。
まとめ
今回はBootstrapをつかってサイトの見た目を整えて、ポートフォリオサイトを完成させました。
次回は、完成したサイトをGitHubPagesに公開します。