1. はじめに
Web制作を学ぶ際に 模写練習 は非常に効果的な方法です。特に Bootstrap を活用すれば、効率よくレスポンシブなデザインを実装できます。本記事では、Bootstrapを使ってシンプルな ポートフォリオサイト を模写しながら、基本的なレイアウトやデザインのコツを解説します。
2. Bootstrapとは？
Bootstrap は、Twitter社が開発した CSSフレームワーク で、レスポンシブデザインを簡単に実装できるのが特徴です。主なメリットは以下の通りです。
✅ レスポンシブ対応が簡単
✅ 豊富なコンポーネント（ナビゲーションバー、ボタン、フォーム など）
✅ グリッドシステムによるレイアウト調整
✅ デザインが統一される
これらの特徴を活かしながら、ポートフォリオサイトの模写練習を進めていきましょう。
3. 今回模写するポートフォリオサイトの構成
今回は シンプルでクールなポートフォリオサイト を模写します。以下のような構成です。
- ナビゲーションバー（ハンバーガーメニュー対応）
- ヒーローセクション（背景画像 or 動画 + キャッチコピー）
- ポートフォリオギャラリー（グリッドレイアウト）
- お問い合わせフォーム
- フッター（コピーライト表示）
4. コードを見ながら模写練習
4.1. 基本のHTML構造
まずは、BootstrapをCDNで読み込み、基本のHTMLを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ポートフォリオ模写</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white">
ここでは Tailwind CSS も活用しながら、デザインを整えていきます。
4.2. ナビゲーションバーの実装
<nav class="p-4 bg-gray-800 flex justify-between items-center relative z-50">
<h1 class="text-xl font-bold">My Portfolio</h1>
<button id="menu-toggle" class="block md:hidden text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</nav>
🔹 ポイント
flexを使ってロゴとメニューを横並びにz-50を設定し、他の要素の上に表示
4.3. ヒーローセクションの実装
<header class="relative h-screen flex flex-col justify-center items-center text-center">
<img src="https://picsum.photos/1600/900" alt="Hero Background" class="absolute inset-0 w-full h-full object-cover">
<div class="relative z-10 bg-black bg-opacity-50 p-8 rounded-lg">
<h2 class="text-4xl font-extrabold">Welcome to My Portfolio</h2>
<p class="text-gray-400 mt-4">Creating beautiful and functional web experiences.</p>
</div>
</header>
🔹 ポイント
relativeを活用し、背景画像をabsoluteで配置bg-opacity-50を指定してテキストを読みやすく
4.4. ポートフォリオギャラリーの実装
<section id="work" class="py-20 px-10">
<h3 class="text-3xl font-bold text-center mb-10">My Work</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-4 rounded-lg">Project 1</div>
<div class="bg-gray-800 p-4 rounded-lg">Project 2</div>
<div class="bg-gray-800 p-4 rounded-lg">Project 3</div>
</div>
</section>
🔹 ポイント
gridを使い、レスポンシブなカラムレイアウト を実現
4.5. お問い合わせフォームの実装
<section id="contact" class="py-20 px-10 bg-gray-800">
<h3 class="text-3xl font-bold text-center mb-10">Contact Me</h3>
<form class="max-w-lg mx-auto">
<input type="text" placeholder="Your Name" class="w-full p-3 mb-4 rounded bg-gray-700 border-none">
<input type="email" placeholder="Your Email" class="w-full p-3 mb-4 rounded bg-gray-700 border-none">
<textarea placeholder="Your Message" class="w-full p-3 mb-4 rounded bg-gray-700 border-none"></textarea>
<button class="bg-blue-500 px-6 py-2 rounded hover:bg-blue-600">Send</button>
</form>
</section>
🔹 ポイント
- フォームの幅を
max-w-lgで調整し、中央寄せ
4.6 フッターの実装
<footer class="text-center p-4 bg-gray-800 mt-10">
<p>© 2025 My Portfolio. All rights reserved.</p>
</footer>
</body>
</html>- t
ext-center：テキストを中央揃え p-4：パディング（上下左右に余白）bg-gray-800：背景色を暗めのグレーに設定mt-10：上部のマージンを追加し、セクションとの間隔を確保
5. まとめ：模写練習のポイント
模写練習を行う際の ポイント をまとめます。
✅ レイアウトの構造を把握する（HTMLを先に考える）
✅ CSSのクラスを適用しながらデザイン調整
✅ レスポンシブ対応を意識する（BootstrapやTailwindの grid や flex を活用）
✅ デザインとコードを照らし合わせながら仕上げる
6. おわりに
Bootstrapを使ったポートフォリオサイトの模写練習を通じて、実践的なWeb制作スキルを磨くことができます。さらに、模写したコードをカスタマイズし、自分だけのデザインにアレンジすることで、スキルアップが可能です。
ぜひ今回のコードを参考にしながら、自分なりのポートフォリオサイトを作ってみてください！