第5章：実践とトラブル解決

Week 16

よくある問題とその解決方法

学習時間目安：週3-4時間

🐛よくあるHTML/CSSの問題

レイアウトが崩れる
要素が中央に配置されない
画像がレスポンシブにならない
フォントが適用されない
Z-indexが効かない

🔍デバッグのテクニック

ブラウザ開発者ツールの使用
要素の検証とサイズ確認
CSSの継承確認
レスポンシブテスト
パフォーマンス確認

❌ 問題：レイアウトが崩れる

/* 問題のあるコード */
.container {
    width: 100%;
    padding: 20px;
    border: 10px solid black;
    /* 実際の幅 = 100% + 40px + 20px = はみ出る */
}
                    

✅ 解決策：box-sizing使用

/* 解決策 */
.container {
    width: 100%;
    padding: 20px;
    border: 10px solid black;
    box-sizing: border-box; /* これで解決 */
}
                    

🛠️ デバッグツールの使い方

要素の検証

F12で開発者ツールを開き、Elements タブで HTML 構造を確認

スタイル確認

Styles パネルで適用されている CSS を確認

サイズ確認

Computed タブで Box Model を確認

レスポンシブテスト

Ctrl+Shift+M でデバイスモードに切り替え

💡 デバッグのコツ

問題が起きたら、まず開発者ツールで要素を選択して、margin・padding・borderを確認しましょう。多くの問題はbox-sizingで解決できます。

Week 17

Webサイトの公開とパフォーマンス最適化

学習時間目安：週3-4時間

🌐Webサイト公開の準備

ファイル構成の最終確認
リンク切れのチェック
画像ファイルの最適化
CSSとJSの圧縮
SEO対策の基本

⚡パフォーマンス最適化

/* CSS最適化の例 */
img {
    loading: lazy; /* 遅延読み込み */
    max-width: 100%;
    height: auto;
}

/* フォントの最適化 */
@font-face {
    font-family: 'CustomFont';
    font-display: swap; /* フォント表示最適化 */
    src: url('font.woff2') format('woff2');
}
                    

📄GitHub Pages

GitHubリポジトリから直接公開。無料で簡単、独自ドメイン対応。

完全無料

簡単な設定

Git連携

独自ドメイン対応

⚡Netlify

高機能で高速なホスティング。フォーム機能や自動デプロイ対応。

高速CDN

自動デプロイ

フォーム機能

SSL証明書自動

🔥Vercel

モダンで高速なホスティング。開発者向け機能が豊富。

超高速配信

プレビュー機能

アナリティクス

API統合

☁️Cloudflare Pages

Cloudflareの高性能ネットワークを活用した高速ホスティング。

グローバルCDN

高いセキュリティ

無制限帯域

Git連携

🚀 公開後のメンテナンス

Webサイトを公開した後も、定期的な更新とメンテナンスが重要です。Google Analyticsでアクセス解析をしたり、ユーザーからのフィードバックを反映させましょう。

🎉 おめでとうございます！

HTML/CSS基礎学習カリキュラムを完全制覇しました！

🏗️

レイアウトマスター

Flexbox、CSS Grid、レスポンシブデザインを完全習得

🎨

デザインエキスパート

CSS変数、アニメーション、テーマシステムを構築可能

🚀

実戦デベロッパー

デバッグ、最適化、Webサイト公開まで完全対応

💼

ポートフォリオオーナー

プロフェッショナルなポートフォリオサイトを保有

← 第4章に戻るホームに戻る 🏠

実践とトラブル解決