「最初の成功体験」がプログラミング学習の未来を決める

「最初の成功体験」がプログラミング学習の未来を決める

プログラミングを学び始めて、最初に挫折しやすいポイントは「何も動かせない」期間が長いことです。教材を読んでいるだけでは、なかなか実感が湧きません。

だからこそ、できるだけ早く「自分で書いたコードが動く」体験をすることが重要です。HTML/CSSは、その最初の成功体験を得るのに最適な技術です。

なぜHTML/CSSから始めるべきなのか

理由1: 結果がすぐに見える

HTMLファイルをブラウザで開くだけで、書いたコードが画面に表示されます。環境構築で詰まることもほとんどありません。

理由2: Webの基礎技術である

どんなWebサービスも、最終的にブラウザに表示されるのはHTMLとCSSです。この基礎を理解していないと、ReactやVueなどのフレームワークも使いこなせません。

理由3: デザインの楽しさがある

色やレイアウトを変えるだけで見た目が変わるCSS。視覚的な変化が楽しく、モチベーションを保ちやすいのが特徴です。

初めてのWebページを作ってみよう

準備するもの

• テキストエディタ（VS Codeがおすすめ）
• ブラウザ（Google Chrome）

これだけで始められます。特別なソフトは不要です。

Step 1: HTMLファイルを作る

VS Codeで新しいファイルを作成し、index.htmlという名前で保存します。以下の基本構造を書きましょう。

HTMLの基本構造には、<!DOCTYPE html>、<html>、<head>、<body>というタグが含まれます。<head>内にはページのタイトルや文字コードの設定を、<body>内には実際に画面に表示したい内容を書きます。

Step 2: コンテンツを追加する

<body>の中に、自己紹介の内容を追加していきましょう。

• <h1> — 大見出し（名前やタイトル）
• <p> — 段落（自己紹介文）
• <ul> と <li> — 箇条書き（趣味やスキル）
• <img> — 画像（プロフィール写真）
• <a> — リンク（SNSやポートフォリオへのリンク）

まずは自己紹介ページを作るのがおすすめです。自分のことを書くので内容に困りませんし、完成後に友人に見せる楽しみもあります。

Step 3: CSSでデザインを整える

HTMLだけでは見た目が素っ気ないので、CSSでデザインを加えます。

最初に覚えるべきCSSプロパティは以下の通りです。

Step 4: レイアウトを整える

自己紹介ページをカード型のデザインにしてみましょう。CSSのFlexboxを使えば、要素を中央に配置したり、横並びにしたりできます。

覚えておきたいFlexboxの基本は以下です。

• display: flex; — Flexboxを有効にする
• justify-content: center; — 横方向の中央揃え
• align-items: center; — 縦方向の中央揃え
• flex-direction: column; — 縦方向に並べる

Step 5: レスポンシブ対応する

スマートフォンでも見やすいデザインにするために、メディアクエリを使います。

画面幅が768px以下のときにレイアウトやフォントサイズを調整するだけで、モバイル対応のWebページになります。

最初のプロジェクトで意識すべきこと

完璧を目指さない

最初のWebページが完璧である必要はありません。「動いた」という体験を得ることが最優先です。デザインは後からいくらでも改善できます。

コードを写すだけで終わらない

教材のコードを写すだけでなく、自分なりにアレンジしてみましょう。

• 色を変えてみる
• レイアウトを変えてみる
• 新しいセクションを追加してみる

この「自分で考えて変える」プロセスが、プログラミング力を伸ばします。

GitHubに公開する

作ったWebページをGitHubにpushし、GitHub Pagesで公開してみましょう。自分のWebページがインターネット上に公開される体験は、大きな達成感になります。

次のステップ

自己紹介ページが完成したら、次は以下に挑戦してみましょう。

• カフェや架空のショップのWebサイトを作る
• JavaScriptを追加して、動きのあるページにする
• CSSアニメーションでリッチな表現を加える

PC環境の作り方

初心者向けの開発環境構築ガイド

何から学ぶべきか

プログラミング学習の最初の一歩を解説

モチベーション維持の方法

挫折しないための心構えと具体的な方法

HTML/CSSで初めてのWebページを作る。それは小さな一歩かもしれませんが、エンジニアへの道の確かな第一歩です。まずは手を動かして、「自分にもできる」という自信を手に入れてください。