フロントエンド冒険記

初心者から始める実践的Web開発シリーズ

第1回

ゼロから始めるフロントエンド

HTMLとCSSって何？

読了時間: 15分 完全初心者向け

こんにちは！フロントエンド冒険記へようこそ！

この記事では、プログラミングを一度も触ったことがない方でも安心してフロントエンド開発の世界に足を踏み入れられるよう、本当の基礎の基礎から丁寧に解説していきます。

この記事を読み終わると：

  • HTMLとCSSが何なのか、なぜ必要なのかが分かる
  • ウェブページがどうやって作られているかが理解できる
  • 学習を始めるための準備が整う
  • 次のステップに進む自信がつく

「AI時代なのに、なぜフロントエンドを学ぶの？」

よくある疑問：

「今はChatGPTに『ウェブページ作って』って言えば作ってくれるし、NotionやWixみたいなノーコードツールもあるのに、わざわざコーディングを覚える必要ってあるの？」

この疑問、めちゃくちゃよく分かります！実際、私たちの周りには便利なツールがあふれていますよね。

でも、知っているからこそできることと知らないままでは限界があることには、天と地ほどの差があるんです。

知識がない場合の指示：

「おしゃれなウェブサイトを作って」

→ AIは困ります。「おしゃれ」って何？どんな機能が必要？

知識がある場合の指示：

「レスポンシブデザインで、
ヘッダーにナビゲーションメニュー、
メインコンテンツにカード型レイアウトを3列配置、
カラーパレットは#3498dbをメインに、
Flexboxを使って中央揃えにしたランディングページを作成して」

→ AIが理解しやすく、期待通りの結果が得られる！

AI時代だからこそ、基礎知識が重要な4つの理由

1. AIに的確な指示を出せるようになる

専門用語を使って具体的な要求ができる

2. AIが作ったコードの良し悪しが判断できる

SEOやアクセシビリティの問題を見つけられる

3. 問題が発生した時に対処できる

エラーの原因を特定し、ピンポイントで修正

4. 本当に自由な表現ができる

思い描いたものを制限なく実現可能

知識なしでAI活用 基礎学習 + AI活用
開発速度 遅い（試行錯誤が多い） 高速（的確な指示）
品質 不安定 高品質
カスタマイズ性 低い 高い
将来性 限定的 無限大

つまり、こういうこと！

ノーコードツールやAI = 超優秀なアシスタント

HTML/CSS知識 = アシスタントに指示を出すスキル

AI時代だからこそ、基礎を学ぶ価値は むしろ上がっている！

そもそも「フロントエンド」って何？

ウェブページを見る時、実は3つの要素が働いている

HTML（構造）
  • • 家でいう「骨組み・設計図」
  • • 文章の見出し、段落、画像の配置
  • • 「ここに見出しを置く」という指示書
CSS（装飾）
  • • 家でいう「内装・デザイン」
  • • 色、フォント、レイアウト
  • • 「この見出しは青色で大きく」
JavaScript（動き）
  • • 家でいう「電気・設備」
  • • ボタンを押した時の動作
  • • 第4回から学習予定

なぜHTMLとCSSから始めるの？

基礎中の基礎だから

すべてのウェブページにHTMLとCSSは必須

目に見える成果がすぐ得られる

コードを書くとすぐにブラウザで確認できる

環境構築が簡単

メモ帳とブラウザがあれば今すぐ始められる

学習を始める前の準備（超重要！）

必要なもの（すべて無料！）

1. パソコン
  • • Windows、Mac、どちらでもOK
  • • 特別な性能は不要（普通のパソコンで十分）
2. テキストエディタ

おすすめ：Visual Studio Code（VS Code）

  • • 無料で高機能
  • • 初心者にも使いやすい
  • • プロの開発者も使用

ダウンロード先：https://code.visualstudio.com/

3. ブラウザ
  • • Google Chrome（推奨）
  • • 開発者ツールが充実していて学習に最適

学習環境を整える3ステップ

1
フォルダを作る
デスクトップに「web学習」フォルダを作成
└── web学習/
    └── 第1回/
        ├── index.html
        └── style.css
2
VS Codeでフォルダを開く
  • • VS Codeを起動
  • • 「フォルダを開く」で作成したフォルダを選択
3
最初のファイルを作る

「新しいファイル」→「index.html」と名前をつけて保存

HTMLの基礎の基礎

HTMLとは「マークアップ言語」

プログラミング言語ではありません！

  • • 文書に「印」をつける言語
  • • 「ここは見出し」「ここは段落」という目印をつけるだけ

HTMLの基本ルール：「タグ」で囲む

<タグ名>内容</タグ名>
具体例：
<h1>これは大見出しです</h1>
<p>これは段落（パラグラフ）です</p>

最もシンプルなHTMLファイル

<!DOCTYPE html>
<html>
<head>
    <title>私の最初のページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これが私の最初のウェブページです。</p>
</body>
</html>
各部分の役割：
<!DOCTYPE html> 「これはHTML5で書かれています」の宣言
<html> HTML文書全体を囲む
<head> ページの設定情報（ブラウザに表示されない）
<title> ブラウザのタブに表示される名前
<body> 実際にブラウザに表示される内容

実際にやってみよう！

  1. 1. VS Codeで「index.html」ファイルを開く
  2. 2. 上記のコードをコピー＆ペースト
  3. 3. ファイルを保存（Ctrl+S または Cmd+S）
  4. 4. ファイルをダブルクリックしてブラウザで開く

CSSの基礎の基礎

CSSとは「スタイルシート」

HTMLで作った文書に「化粧」を施す言語です。

CSSの基本ルール

セレクタ {
    プロパティ: 値;
}
具体例：
h1 {
    color: blue;
    font-size: 32px;
}
意味：
  • • h1：HTMLの見出しタグを指定
  • • color: blue：文字色を青にする
  • • font-size: 32px：文字サイズを32ピクセルにする

CSSをHTMLに適用する方法

方法1：HTMLファイル内に書く（初心者におすすめ）

<!DOCTYPE html>
<html>
<head>
    <title>私の最初のページ</title>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            color: gray;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これが私の最初のウェブページです。</p>
</body>
</html>

実際にやってみよう！

  1. 1. 先ほどのHTMLファイルに<style>タグを追加
  2. 2. CSSコードを記述
  3. 3. ファイルを保存してブラウザで確認

よく使う基本タグ＆CSSプロパティ

HTMLタグ TOP5

<h1>〜<h6>

見出し（数字が小さいほど大きい）

<p>

段落

<a href="URL">

リンク

<img src="画像パス" alt="説明">

画像

<div>

汎用的なコンテナ

CSSプロパティ TOP5

color

文字色

font-size

文字サイズ

background-color

背景色

text-align

文字揃え（center, left, right）

margin

外側の余白

今日の実践課題

「自己紹介ページ」を作ってみよう

目標： HTML とCSSを使って、シンプルな自己紹介ページを作成

<!DOCTYPE html>
<html>
<head>
    <title>○○の自己紹介</title>
    <style>
        body {
            background-color: #f0f8ff;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #2e86ab;
            text-align: center;
        }
        p {
            font-size: 18px;
            line-height: 1.6;
            margin: 20px;
        }
        .hobby {
            background-color: white;
            padding: 15px;
            margin: 20px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h1>はじめまして！○○です</h1>
    <p>こんにちは！私は□□在住の○○です。</p>
    <p>ウェブ開発に興味を持ち、HTMLとCSSの学習を始めました。</p>

    <div class=”hobby”>
        <h2>趣味</h2>
        <p>読書、映画鑑賞、プログラミング学習</p>
    </div>
</body>
</html>
やってみよう：
  1. 1. 上記のコードをベースに、○○の部分をあなたの情報に変更
  2. 2. 色やフォントサイズを自由に変更
  3. 3. 新しい項目（好きな食べ物、将来の目標など）を追加

よくある疑問＆回答

Q1: タグの書き方を全部覚える必要がありますか？

A: いいえ！最初は基本的なタグだけ覚えれば十分。必要な時に調べる習慣をつけましょう。

Q2: CSSのプロパティが多すぎて覚えられません…

A: 覚える必要はありません！よく使うもの5-10個を覚えて、あとは検索で調べるのがプロのやり方です。

Q3: コードを書いても何も表示されません

A: よくあります！以下をチェック：

  • • ファイルが正しく保存されているか
  • • タグの閉じ忘れはないか
  • • ブラウザの更新（F5キー）を試す

Q4: HTMLとCSSの学習にどのくらい時間がかかりますか？

A: 基礎理解まで：1-2週間（1日1-2時間）
簡単なページ作成まで：1ヶ月程度

今日のまとめ

今日学んだこと：

  • HTMLはウェブページの「構造」を作る言語
  • CSSはウェブページの「見た目」を装飾する言語
  • タグで囲むのがHTMLの基本ルール
  • セレクタとプロパティがCSSの基本ルール
  • 学習環境の準備方法

AI時代の学習価値：

  • AIに的確な指示を出せる
  • コードの品質を判断できる
  • 問題解決能力が身につく
  • 制限のない自由な表現が可能

学習を続けるコツ

1. 完璧を求めすぎない

  • • 最初は動けばOK！美しさは後から
  • • エラーは学習の一部

2. 毎日少しずつ

  • • 1日30分でも継続が大切
  • • 週末にまとめて…より毎日コツコツ

3. 作りながら学ぶ

  • • 理論だけでなく、必ず手を動かす
  • • 小さなページをたくさん作る

4. 楽しむことを忘れない

  • • 自分の好きなテーマでページを作る
  • • 完成した時の達成感を大切に

次回予告

第2回：「CSSレイアウトの魔法 – ボックスモデルって何？」

要素の配置をコントロールする方法

margin、padding、borderの違い

Flexboxの基礎とレイアウト実践

次回もお楽しみに！一緒にフロントエンドの世界を冒険していきましょう！

このシリーズの最終ゴール

8回の学習を終えた時、あなたは：

AIに的確な指示を出せるフロントエンド知識を持っている
ノーコードツールの限界を理解し、必要に応じてコーディングで補完できる
問題が発生した時に、原因を特定し解決できる
AIとタッグを組んで、思い描いた通りのウェブサイトを作れる

これって、めちゃくちゃ強いスキルだと思いませんか？

さあ、AI時代を生き抜く武器を一緒に身につけていきましょう！

参考リンク

開発環境

Visual Studio Code

HTMLリファレンス

MDN HTML基本リファレンス

CSSリファレンス

MDN CSS基本リファレンス

フロントエンド冒険記

一緒にフロントエンドの世界を冒険しよう！

次回もお楽しみに！