初心者エンジニアのためのWeb制作学習ガイド

テンプレートを使って、実際にWebサイトを作りながら学んでいきましょう。コピー&ペーストから始めて、少しずつカスタマイズしていく方法を解説します。

1まずは動かしてみよう

準備するもの

パソコン（Windows/Mac/Linux どれでもOK）
テキストエディタ（メモ帳でもOK、VSCodeがおすすめ）
Webブラウザ（Chrome、Firefox、Safari など）

手順

1. フォルダを作成
デスクトップに「my-website」という名前のフォルダを作ります。
Windows: デスクトップで右クリック → 新規作成 → フォルダー
Mac: デスクトップで右クリック → 新規フォルダ
2. HTMLファイルを作成
「my-website」フォルダの中に「index.html」というファイルを作ります。
テキストエディタを開いて、新規ファイルを作成し、「index.html」という名前で保存します。
3. HTMLコードをコピー
テンプレートページから、HTMLタブのコードを全てコピーして、index.htmlに貼り付けます。
💡 Ctrl+A（全選択）→ Ctrl+C（コピー）→ Ctrl+V（貼り付け）が便利です
4. CSSファイルを作成
同じフォルダに「style.css」というファイルを作成し、CSSコードをコピーして貼り付けます。
5. JavaScriptファイルを作成
「script.js」というファイルを作成し、JavaScriptコードをコピーして貼り付けます。
6. HTMLファイルを修正
index.htmlの<head>タグ内に以下を追加：
```
<link rel="stylesheet" href="style.css">
```
</body>タグの直前に以下を追加：
```
<script src="script.js"></script>
```
7. ブラウザで確認
index.htmlファイルをブラウザにドラッグ&ドロップして表示を確認します。
✅ おめでとうございます！あなたの最初のWebサイトが動きました！

2カスタマイズしてみよう - 色を変える

次は、サイトの色を変えてみましょう。CSSファイルを編集することで、簡単に見た目を変更できます。

背景色を変える

style.cssファイルを開いて、bodyの背景色を変更してみましょう。

body {
    background: #f0f8ff;  /* 薄い青色に変更 */
}

文字色を変える

見出しの色を変更してみましょう。

h1 {
    color: #ff6b6b;  /* 赤っぽい色に変更 */
}

ボタンの色を変える

ボタンの背景色とホバー時の色を変更します。

.btn-primary {
    background: #4CAF50;  /* 緑色に変更 */
}

.btn-primary:hover {
    background: #45a049;  /* 少し暗い緑色 */
}

💡 色の指定方法

• 色名: red, blue, green など
• HEX: #ff0000（赤）、#00ff00（緑）、#0000ff（青）
• RGB: rgb(255, 0, 0)（赤）
• 色コード参考サイト

3テキストと画像を変更する

テキストの変更

index.htmlファイルを開いて、テキストを自分のコンテンツに変更します。

<!-- 変更前 -->
<h1>Modern Cafe</h1>
<p>こだわりのコーヒーと心地よい空間</p>

<!-- 変更後 -->
<h1>My Awesome Site</h1>
<p>私の素晴らしいWebサイトへようこそ！</p>

画像の変更

画像を自分の画像に変更する方法：

「images」フォルダを作成
使いたい画像をそのフォルダに入れる（例: hero.jpg）
HTMLのimg要素のsrc属性を変更

<!-- 変更前 -->
<img src="https://example.com/image.jpg" alt="画像">

<!-- 変更後 -->
<img src="images/hero.jpg" alt="私の画像">

⚠️ 画像使用の注意点

• 画像サイズは適切に（大きすぎると表示が遅くなります）
• 無料画像サイト: Unsplash、Pexels
• alt属性は必ず設定（アクセシビリティのため）

4レイアウトを調整する

余白（マージン・パディング）を調整

.section {
    padding: 100px 0;  /* 上下の余白を増やす */
    margin: 0 auto;    /* 中央寄せ */
}

フォントサイズを変更

h1 {
    font-size: 48px;  /* 大きくする */
}

p {
    font-size: 18px;  /* 読みやすいサイズに */
    line-height: 1.8; /* 行間を広げる */
}

レスポンシブ対応（スマホ表示）

@media (max-width: 768px) {
    h1 {
        font-size: 32px;  /* スマホでは小さく */
    }
    
    .container {
        padding: 0 20px;   /* 左右の余白を確保 */
    }
}

🚀 次のステップ

もっと学びたい方へ

📚 HTML/CSS基礎: MDN Web Docs
🎨 デザイン: Figmaでデザインを作ってみる
⚡ JavaScript: インタラクティブな機能を追加
📱 レスポンシブデザイン: スマホ対応を極める

実践的なプロジェクト

• 自己紹介サイトを作る
• 好きなお店のサイトを模写する
• ポートフォリオサイトを作る
• 友達や家族のサイトを作ってあげる

公開する方法

🌐 GitHub Pages: 無料で簡単に公開
⚡ Netlify: ドラッグ&ドロップで公開
🔥 Vercel: Next.jsなどのフレームワークに最適

💡 開発のコツ

開発ツール

• VSCode: 無料の高機能エディタ
• Chrome DevTools: F12で開発者ツール
• Live Server: 自動更新で開発効率UP

よくあるミス

• タグの閉じ忘れ（</div>など）
• セミコロンの忘れ（CSS）
• ファイルパスの間違い
• 全角スペースの混入

デバッグ方法

• コンソールでエラーを確認
• 一つずつ変更して確認
• コメントアウトで原因を特定

学習のコツ

• 毎日少しずつでも触る
• 完璧を求めすぎない
• 他の人のコードを読む
• 作ったものを公開する