この記事を読めば、HTMLでポートフォリオを作成できるようになります。
はじめに
ポートフォリオがあると、自分のスキルや実績をアピールできるので、転職やフリーランス活動に役立ちます。
しかし、HTMLの知識がない初心者には難しいと感じるかもしれません。
この記事では、HTMLポートフォリオの作り方や使い方、対処法、注意点、カスタマイズ方法を初心者向けに徹底解説します。
サンプルコードと応用例も交えて紹介しますので、参考にしてください。
【HTMLポートフォリオとは】
HTMLポートフォリオは、ウェブページで自分のスキルや実績をアピールするためのツールです。
HTMLとCSSを使って作成され、ウェブブラウザで表示されます。
○なぜポートフォリオが重要か
ポートフォリオは、あなたのスキルや実績を具体的に示すことができるため、転職やフリーランス活動において強力な武器となります。
また、ポートフォリオを通じて、自分の個性やセンスをアピールできるので、印象に残りやすくなります。
【HTMLポートフォリオの作り方】
○基本構造の理解
HTMLポートフォリオを作成するには、まずHTMLの基本構造を理解することが重要です。
HTMLは、下記のような構造を持っています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>あなたのポートフォリオ</title>
</head>
<body>
<!-- ここにコンテンツを書く -->
</body>
</html>○レイアウト作成
次に、ポートフォリオのレイアウトを作成します。
下記は、シンプルなレイアウトの例です。
<!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>コピーライト © あなたの名前</p>
</footer>
</body>
</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>コピーライト © あなたの名前</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">×</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でポートフォリオを作成する方法を理解し、実践することができるようになります。
