「最初の成功体験」がプログラミング学習の未来を決める
「最初の成功体験」がプログラミング学習の未来を決める
プログラミングを学び始めて、最初に挫折しやすいポイントは「何も動かせない」期間が長いことです。教材を読んでいるだけでは、なかなか実感が湧きません。
だからこそ、できるだけ早く「自分で書いたコードが動く」体験をすることが重要です。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プロパティは以下の通りです。
| プロパティ | 役割 | 例 |
|---|---|---|
| color | 文字色 | color: #333; |
| background-color | 背景色 | background-color: #f5f5f5; |
| font-size | 文字サイズ | font-size: 16px; |
| margin | 外側の余白 | margin: 20px; |
| padding | 内側の余白 | padding: 16px; |
| border-radius | 角丸 | border-radius: 8px; |
| text-align | 文字揃え | text-align: center; |
HTML/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ページを作る。それは小さな一歩かもしれませんが、エンジニアへの道の確かな第一歩です。まずは手を動かして、「自分にもできる」という自信を手に入れてください。
