読み込み中...

HTMLでポートフォリオを作成！初心者向け徹底解説とサンプルコード15選

HTMLポートフォリオ作成のステップ, サンプルコードの例, 応用例のイメージ HTML
2023.04.05
この記事は約10分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

ポートフォリオは、専門家やクリエイターが自身のスキルや実績を効果的にアピールするための重要なツールです。

特に転職活動やフリーランスとしての仕事獲得において、ポートフォリオの存在は大きな強みとなります。

しかしながら、HTMLの知識が乏しい初心者にとっては、ポートフォリオの作成が困難に感じられることもあるでしょう。

本稿では、HTMLポートフォリオの作成方法、活用法、直面する可能性のある課題とその解決策、注意すべき点、そしてカスタマイズの手法について、初心者の方々にも理解しやすいよう詳細に解説いたします。

また、具体的なサンプルコードと応用例を提示することで、実践的な知識の習得を支援いたします。

●HTMLポートフォリオとは

HTMLポートフォリオとは、ウェブ技術を用いて制作された、個人のスキルや実績を視覚的に表現するためのウェブページです。

主にHTMLとCSSを使用して構築され、インターネットブラウザを通じて閲覧することができます。

○なぜポートフォリオが重要か

ポートフォリオの重要性は、第一に、ポートフォリオは個人のスキルや実績を具体的かつ視覚的に提示する手段として非常に効果的です。

これで、転職活動やフリーランスとしての仕事獲得において、自身の能力を明確に示すことが可能となります。

また、ポートフォリオを通じて個性やデザインセンスを表現することで、より印象に残りやすくなり、競争の激しい市場において差別化を図ることができます。

●HTMLポートフォリオの作り方

HTMLポートフォリオの作成プロセスは、基本的な構造の理解から始まり、段階的にコンテンツを追加していく形で進めていきます。

ここでは、その手順を詳細に解説いたします。

○基本構造の理解

HTMLポートフォリオを作成する上で、まず重要となるのはHTMLの基本構造を把握することです。

HTMLドキュメントは、次のような構造を基本としています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>あなたのポートフォリオ</title>
</head>
<body>
  <!-- ここにコンテンツを記述します -->
</body>
</html>

この基本構造は、ウェブページの骨格となるものです。

<head>セクションにはページのメタ情報が含まれ、<body>セクション内に実際に表示されるコンテンツを記述していきます。

○レイアウト作成

基本構造を理解したら、次はポートフォリオのレイアウトを作成します。

ここでは、シンプルながら効果的なレイアウトの例を紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>あなたのポートフォリオ</title>
  <style>
    header, footer {
      background-color: #f1f1f1;
      padding: 20px;
      text-align: center;
    }
    nav {
      float: left;
      width: 25%;
      height: 300px;
      background: #ccc;
      padding: 20px;
    }
    section {
      float: left;
      width: 50%;
      padding: 20px;
    }
  </style>
</head>
<body>

<header>
  <h1>あなたの名前</h1>
</header>

<nav>
  <h3>ナビゲーション</h3>
  <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
    <li><a href="#">リンク3</a></li>
  </ul>
</nav>

<section>
  <h2>あなたの実績</h2>
  <p>ここに実績を記述します</p>
</section>

<footer>
  <p>コピーライト &copy; あなたの名前</p>
</footer>

</body>
</html>

このレイアウト例では、ヘッダー、ナビゲーション、メインコンテンツ、フッターという基本的な構成要素を含んでいます。

この要素を適切に配置することで、見やすく使いやすいポートフォリオの基盤を作ることができます。

このHTMLファイルをウェブブラウザで開くと、簡単なポートフォリオのレイアウトが表示されます。

ここから、個人の情報や実績を追加し、スタイルを調整することで、独自のポートフォリオを完成させていくことができます。

●サンプルコード15選

次に、HTMLポートフォリオでよく使われるサンプルコードを紹介します。

これらを組み合わせて、オリジナルのポートフォリオを作成しましょう。

※ 下記のサンプルコードは、あくまで一例です。

実際の使用時には、自分の状況に合わせてカスタマイズしてください。

○サンプル1：画像の挿入

下記のコードは、画像を挿入する方法を示しています。

src属性に画像のファイルパスを指定してください。

<img src="画像のファイルパス" alt="画像の説明">

○サンプル2：リンクの作成

下記のコードは、リンクを作成する方法を示しています。

href属性にリンク先のURLを指定してください。

<a href="リンク先のURL">リンクテキスト</a>

○サンプル3：テーブルの作成

下記のコードは、テーブルを作成する方法を示しています。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

○サンプル4：リストの作成

下記のコードは、リストを作成する方法を示しています。

<ul>
  <li>リストアイテム1</li>
  <li>リストアイテム2</li>
</ul>

○サンプル5：ヘッダーの作成

下記のコードは、ヘッダーを作成する方法を示しています。

<header>
  <h1>あなたの名前</h1>
</header>

○サンプル6：ナビゲーションの作成

下記のコードは、ナビゲーションを作成する方法を示しています。

<nav>
  <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
    <li><a href="#">リンク3</a></li>
  </ul>
</nav>

○サンプル7：セクションの作成

下記のコードは、セクションを作成する方法を示しています。

<section>
  <h2>セクションタイトル</h2>
  <p>セクションの内容</p>
</section>

○サンプル8：フッターの作成

下記のコードは、フッターを作成する方法を示しています。

<footer>
  <p>コピーライト &copy; あなたの名前</p>
</footer>

○サンプル9：フォームの作成

下記のコードは、フォームを作成する方法を示しています。

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="送信">
</form>

○サンプル10：動画の埋め込み

下記のコードは、動画を埋め込む方法を示しています。

src属性に動画のファイルパスを指定してください。

<video src="動画のファイルパス" controls></video>

○サンプル11：スライドショーの作成

下記のコードは、スライドショーを作成する方法を示しています。

JavaScriptを使用して、画像が自動的に切り替わるようにしています。

<div class="slideshow">
  <img src="画像1のファイルパス" alt="画像1の説明">
  <img src="画像2のファイルパス" alt="画像2の説明">
  <img src="画像3のファイルパス" alt="画像3の説明">
</div>

○サンプル12：パララックス効果

下記のコードは、パララックス効果を実現する方法を示しています。

CSSとJavaScriptを使用して、スクロールに応じて背景画像が動くようになっています。

<div class="parallax"></div>

○サンプル13：モーダルウィンドウ

下記のコードは、モーダルウィンドウを作成する方法を示しています。

JavaScriptを使用して、ボタンをクリックするとウィンドウが表示されるようにしています。

<button id="modal-button">モーダルウィンドウを開く</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>モーダルウィンドウの内容</p>
  </div>
</div>

○サンプル14：アコーディオンメニュー

下記のコードは、アコーディオンメニューを作成する方法を示しています。

JavaScriptを使用して、クリックするとメニューが展開・折りたたみされるようにしています。

<div class="accordion">
  <button class="accordion-button">メニュー1</button>
  <div class="accordion-content">
    <p>メニュー1の内容</p>
  </div>
  <button class="accordion-button">メニュー2</button>
  <div class="accordion-content">
    <p>メニュー2の内容</p>
  </div>
</div>

○サンプル15：スムーズスクロール

下記のコードは、スムーズスクロールを実現する方法を示しています。

JavaScriptを使用して、リンクをクリックするとスムーズにスクロールするようになっています。

<a href="#section1">セクション1へ</a>
<section id="section1">
  <h2>セクション1のタイトル</h2>
  <p>セクション1の内容</p>
</section>

まとめ

今回は、ポートフォリオサイトの基本的な作成方法と応用例を解説しました。

これらのサンプルコードを参考に、自分だけのオリジナルなポートフォリオサイトを作成してみましょう。

この記事を読めば、HTMLでポートフォリオを作成する方法を理解し、実践することができるようになります。