Web制作 2025年2月11日

HTML/CSS独学｜1ヶ月でポートフォリオを作る完全ガイド

HTML/CSS完全初心者が1ヶ月でポートフォリオサイトを作る手順を徹底解説。週ごとの学習プラン付きだよ。

HTMLCSSポートフォリオ独学

「HTML/CSSを学んで、1ヶ月でポートフォリオを作りたい！」

いい目標だね。実は1ヶ月というのは、HTML/CSSの基礎を学んでポートフォリオを完成させるのにちょうどいい期間。

短すぎず、長すぎず。集中して取り組めば確実に達成できる。

この記事では、HTML/CSS完全初心者が30日間でポートフォリオサイトを完成させるための学習プランを、週単位で具体的に解説する。

「今日から何をすればいいか」がわかるガイドにしたから、このページをブックマークして、毎日チェックしながら進めてほしい。

Web制作を始める

30日間の全体スケジュール

期間	やること	ゴール
Week 1（1〜7日目）	HTML基礎	HTMLでWebページの骨格が書ける
Week 2（8〜14日目）	CSS基礎	CSSでレイアウトとデザインができる
Week 3（15〜21日目）	実践（サイト模写）	既存サイトを真似して作れる
Week 4（22〜30日目）	ポートフォリオ制作	自分のポートフォリオサイト完成

1日の学習時間目安：2〜3時間

仕事がある日は2時間、休日は3〜4時間を目安に。合計で約70〜90時間の学習量になる。

準備：開発環境のセットアップ（初日にやる）

ポートフォリオ制作に必要なツールを最初に準備しよう。

必要なツール

Visual Studio Code（VS Code） — コードエディタ。無料
Google Chrome — 開発者ツールが優秀
Git — バージョン管理。GitHub連携に必須
GitHubアカウント — コードの公開・ホスティング

VS Codeのおすすめ拡張機能

Live Server — 保存するたびにブラウザが自動リロード。必須
Prettier — コードの自動整形
Auto Rename Tag — HTMLタグの自動リネーム
Japanese Language Pack — 日本語化

全部無料。VS Codeの拡張機能タブから検索してインストールするだけ。

HTML/CSSの学習を始めよう

独学でも十分に学べるけど、メンターがいると学習速度が2倍に。無料体験で試してみよう。

プログラミング学習を始める →

Week 1：HTML基礎（1〜7日目）

HTMLを学ぶ

Day 1-2：HTMLの基本構造

HTMLの基本構造を理解する。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのWebページ</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>これは私の最初のWebページです。</p>
</body>
</html>

学ぶこと：

HTMLの基本構造（DOCTYPE、html、head、body）
見出しタグ（h1〜h6）
段落タグ（p）
改行（br）と水平線（hr）
コメントの書き方（）

Day 3-4：テキストとリンク

<a href="https://example.com">リンクテキスト</a>
<strong>太字</strong>
<em>斜体</em>

<ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
</ul>

<ol>
    <li>番号付きリスト1</li>
    <li>番号付きリスト2</li>
</ol>

学ぶこと：

リンク（aタグ）
テキスト装飾（strong、em）
リスト（ul、ol、li）
画像（img）

Day 5-6：フォームとテーブル

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

    <label for="email">メール:</label>
    <input type="email" id="email" name="email">

    <button type="submit">送信</button>
</form>

<table>
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>田中</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

学ぶこと：

フォーム要素（form、input、textarea、select、button）
テーブル（table、thead、tbody、tr、th、td）
セマンティックHTML（header、nav、main、section、article、footer）

Day 7：Week 1の総復習

自己紹介ページをHTMLだけで作ってみよう。CSSなしでOK。

内容：

ヘッダー（名前、肩書き）
自己紹介文
スキル一覧（リスト）
経歴（テーブル）
お問い合わせフォーム
フッター

Week 2：CSS基礎（8〜14日目）

Day 8-9：CSSの基本

/* セレクタと基本プロパティ */
h1 {
    color: #333;
    font-size: 32px;
    font-weight: bold;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#header {
    background-color: #f5f5f5;
    padding: 20px;
}

学ぶこと：

CSSの書き方（インライン、内部スタイル、外部スタイルシート）
セレクタ（タグ、クラス、ID、子孫、隣接）
色の指定（カラーコード、rgba）
フォント関連（font-size、font-weight、line-height、font-family）
ボックスモデル（margin、padding、border）

Day 10-11：Flexbox

Flexboxは最重要。 これだけでレイアウトの90%ができる。

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.card {
    flex: 1;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

学ぶこと：

display: flex
flex-direction（row、column）
justify-content（center、space-between、space-around）
align-items（center、flex-start、flex-end）
flex-wrap
gap
flex: 1 の挙動

Day 12-13：CSS Grid & レスポンシブ

/* CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

学ぶこと：

CSS Grid基礎
メディアクエリ（@media）
ブレイクポイント（768px、1024px等）
モバイルファーストの考え方

Day 14：Week 2の総復習

Day 7で作った自己紹介ページにCSSを適用して、見た目をきれいにする。

CSSデザイン

基礎が固まったら次のステップへ

HTML/CSSの基礎ができたら、JavaScriptやReactに進もう。ロードマップに沿って効率的に学べるスクールもおすすめ。

次のステップを確認する →

Week 3：実践・サイト模写（15〜21日目）

なぜ模写が効果的なのか

教材でHTML/CSSの文法を学んだだけでは、実際にWebサイトを作れるようにはならない。

**模写（既存サイトの見た目を再現すること）**は、文法の知識を「実践力」に変える最高のトレーニング。

Day 15-17：模写1 — シンプルなLP

難易度：低

ランディングページ（LP）は1ページで完結するから、最初の模写に最適。

お手本の選び方：

1ページ完結
アニメーションが少ない
レスポンシブ対応されている

キャリアアップならFast campus

現役プロの講師が教える実践型オンラインスクール。今のスキルをワンランク上に引き上げよう。

Fast campusの講座をチェック →

模写のやり方：

お手本サイトのスクリーンショットを撮る
HTMLで構造を組む（まず大枠、次に詳細）
CSSでスタイルを適用
レスポンシブ対応（スマホ表示）
お手本と見比べて微調整

Day 18-20：模写2 — コーポレートサイト

難易度：中

複数ページ構成のサイトに挑戦。ヘッダーナビゲーション、フッター、複数ページの遷移を含む。

最低でも以下のページを作る：

トップページ
会社概要ページ
お問い合わせページ

Day 21：模写の振り返り

2つの模写で学んだことを振り返る。

困ったことは何か
どうやって解決したか
次に作るときに意識するポイント

これをメモしておくと、Week 4のポートフォリオ制作がスムーズになる。

Week 4：ポートフォリオ制作（22〜30日目）

ポートフォリオ制作

ポートフォリオサイトの構成

プログラミング学習者のポートフォリオサイトには、以下のセクションが必要。

セクション	内容
ヒーロー	名前、肩書き、キャッチコピー
About	自己紹介、経歴、スキル
Works	制作物の一覧（模写を含めてOK）
Skills	使える技術のアイコン+説明
Contact	お問い合わせフォーム

Day 22-23：デザイン・設計

いきなりコードを書かない。まずは紙やFigmaで大まかなデザインを決める。

レイアウトの構成（ワイヤーフレーム）
カラースキーム（メインカラー、アクセントカラー）
フォント選び（Google Fonts）
画像の選定

カラーの決め方：

メインカラーを1色決める
coolors.co等のツールで配色を生成
白 + グレー + メインカラー + アクセントカラーの4色に絞る

Day 24-26：コーディング

設計に基づいてコーディング開始。

作業順序：

HTMLで全体の構造を組む
CSSでPC版のスタイルを適用
レスポンシブ対応（スマホ版）
ホバーエフェクト等の微調整
画像の最適化（圧縮）

実際のコード例（ヒーローセクション）

<section class="hero">
    <div class="hero-content">
        <h1 class="hero-title">Taro Yamada</h1>
        <p class="hero-subtitle">Web Developer</p>
        <p class="hero-description">
            未経験からWeb開発を学び、モダンなWebサイトを制作しています。
        </p>
        <a href="#works" class="hero-btn">Works を見る</a>
    </div>
</section>

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 8px;
}

.hero-subtitle {
    font-size: 20px;
    opacity: 0.9;
    margin-bottom: 24px;
}

.hero-btn {
    display: inline-block;
    padding: 12px 32px;
    background: white;
    color: #667eea;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s;
}

.hero-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
    }
}

Day 27-28：GitHub Pages にデプロイ

完成したポートフォリオをインターネット上に公開しよう。GitHub Pagesを使えば無料で公開できる。

手順：

GitHubにリポジトリを作成
コードをpush
リポジトリのSettings → Pages → ソースをmainに設定
https://あなたのユーザー名.github.io/リポジトリ名/ で公開

独自ドメインを設定したい場合は、お名前.com等でドメインを取得して、GitHub Pagesに設定できる。

Day 29-30：最終調整と公開

ブラウザチェック（Chrome、Firefox、Safari）
スマホ実機チェック
画像の読み込み速度確認
リンク切れチェック
OGP（SNSシェア時の画像）設定
Google Search Consoleに登録

ポートフォリオが完成したら次のステップへ

HTML/CSSができたら、JavaScriptを学んで動的なWebサイトが作れるようになろう。

JavaScript学習を始める →

ポートフォリオをさらに良くする5つのコツ

1. アニメーションを控えめに加える

CSSだけで簡単なアニメーションが実現できる。

/* スクロールで要素がフェードイン */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

ただし、やりすぎ注意。アニメーションはスパイスであって、メインディッシュじゃない。

2. 実機で必ず確認する

PC画面のレスポンシブモードと実際のスマホでは、微妙に表示が異なることがある。必ず実機で確認しよう。

3. 表示速度を意識する

画像が重いとページの読み込みが遅くなる。

画像はWebP形式を使う
圧縮ツール（TinyPNG等）で最適化
不要に大きな画像を使わない

4. アクセシビリティを意識する

画像にalt属性をつける
フォームにlabel要素をつける
十分な色のコントラストを確保する

5. SEOの基本を押さえる

titleタグとmeta descriptionを設定
h1は1ページに1つ
見出しの階層構造を守る（h1 → h2 → h3）

よくある質問

Q. デザインセンスがないんだけど…

大丈夫。最初はデザインセンスは不要。既存の良いデザインを真似することから始めよう。Dribble や Pinterest で「portfolio website」と検索すれば、参考になるデザインがたくさん見つかる。

Q. JavaScriptは必要？

1ヶ月目のポートフォリオでは不要。HTML/CSSだけで十分きれいなサイトが作れる。JavaScriptは2ヶ月目以降に学ぼう。

Q. 30日で間に合わなかったら？

焦らないで。35日でも40日でもOK。大事なのは「完成させること」。期限よりも完成を優先しよう。

まとめ：30日後のあなたは別人

ゴール達成

30日間の学習プランをまとめるとこう。

Week	やること	成果物
Week 1	HTML基礎	自己紹介ページ（HTML）
Week 2	CSS基礎	自己紹介ページ（CSS適用）
Week 3	サイト模写 ×2	LP + コーポレートサイト
Week 4	ポートフォリオ制作	公開されたポートフォリオサイト

30日前の自分は「HTMLって何？」だったのに、30日後には自分のWebサイトをインターネットに公開している。

これ、普通にすごいことだよ。

ポートフォリオが完成したら、次はJavaScriptを学んで、動的なWebサイトを作れるようになろう。そしてReactやNext.jsに進めば、エンジニアとしてのキャリアが見えてくる。

さあ、Day 1を始めよう。VS Codeをインストールして、index.htmlファイルを作るところからだ。

Web制作でキャリアを築こう

HTML/CSSはWebエンジニアへの第一歩。体系的な学習で、効率よくスキルアップしよう。

学習プランを無料で相談する →

Colosoでプロから学ぶ

業界トップの講師によるオンライン講座。買い切り型で何度でも復習可能。

Colosoを見る →