初心者でもできる！簡単なWebページを作ってみよう

「Webページって自分で作れるの？」「HTMLとかCSSとか難しそう…」

大丈夫です。実は、Webページ作成は思っているより簡単に始められます。

複雑に見えるWebサイトも、実は基本となる3つの要素で構成されています。その基本を理解すれば、誰でも自分だけのWebページを作ることができるのです。

実際に、プログラミング未経験の人たちが今日からでも作り始められるWebページの作り方があります。

具体的には、以下のような流れで進めます。

• HTMLで骨組みを作る（テキストや見出しの配置）
• CSSで見た目を整える（色・レイアウト・フォントなど）
• ブラウザで確認して完成

この記事では、初心者でも今日から始められるWebページ作成の流れと、実際に作る時のポイントをお伝えします。最後まで読めば、自分でWebページを作ってみたくなるはずです。

Webページの正体は「3つのファイル」

Webページと聞くと難しく感じるかもしれません。でも、Webページは実は3つのシンプルなファイルで構成されています。

• HTML（エイチティーエムエル）：ページの骨組みを作る。テキストや見出し、画像の配置を指示する
• CSS（シーエスエス）：ページの見た目を決める。色や大きさ、配置を整える
• JavaScript（ジャバスクリプト）：ページを動かす。ボタンをクリックしたときの動作など

最初は、HTMLとCSSだけで十分です。この2つだけで、見栄えの良いWebページが作れます。

つまり、複雑に見えるWebサイトも、この3つの役割を組み合わせているだけなのです。

HTML：Webページの骨組みを作ろう

HTMLは、Webページの骨組みを作る言語です。「このテキストは見出しだよ」「ここに画像を入れるよ」という指示を書きます。

HTMLでよく使う基本的なタグ（指示する言葉）は以下の通りです。

• <h1>～</h1>：ページの大きな見出し。1ページに1つだけが目安
• <p>～</p>：段落。通常のテキストを書くときに使う
• <img>：画像を埋め込む
• <a>～</a>：別のページへのリンクを作る
• <ul>～</ul>と<li>～</li>：箇条書きリストを作る

例えば、こんな風に書きます。

「<h1>私の趣味</h1>」と書けば、「私の趣味」という大きな見出しがページに表示されます。

「<p>毎週末は映画を見ています</p>」と書けば、その文章がページに表示されます。

このように、タグで囲むだけで、ブラウザがそれを理解して表示してくれるのです。とてもシンプルですね。

CSS：色や配置で見た目を整えよう

HTMLだけでWebページを作ると、白い背景に黒いテキストが並ぶだけです。見た目を整えるのがCSSの役目です。

CSSでできることの例をご紹介します。

• 背景色を変える。ページの背景を白から別の色に
• 文字色を変える。見出しを黒から赤に変えるなど
• 文字の大きさを変える。見出しを大きく、本文を小さくする
• 配置を整える。テキストを中央寄せにしたり、左右に並べたり
• フォント（文字の形）を変える。より読みやすい見た目に

CSSは、HTMLで作った要素に対して「この部分の色は青にしよう」という指示を書きます。

例えば、HTMLで「<h1>私の趣味</h1>」と書いた見出しに対して、CSSで「h1の文字色は赤で、大きさは32px（ピクセル=画面上の点）で」と指示するわけです。

すると、ページの見出しが赤くて大きな文字に変わります。このように、HTMLとCSSを組み合わせることで、見栄えの良いWebページができあがるのです。

初心者が最初に作ってみるべきWebページ

では、具体的に何から始めればいいでしょうか。最初は、シンプルなポートフォリオ（自己紹介ページ）がおすすめです。

例えば、こんなページです。

• タイトル：「〇〇です」という自己紹介
• 自分の写真や顔写真
• プロフィール：年齢、趣味、簡単な経歴など
• スキル：「HTMLが書けます」「〇〇ができます」などの項目
• 連絡先：メールアドレスやSNSのリンク

このページなら、HTMLとCSSの基本だけで作れます。難しい計算やロジックは不要です。

そして、作る過程で自然とHTMLとCSSの使い方が身についていきます。

さらに、このページは後で就職活動に使うポートフォリオにもなります。一石二鳥ですね。

実際に作るときの3つのステップ

Webページを作る流れは、意外とシンプルです。

• ステップ1：テキストエディタを開く。メモ帳でも、VS Codeという無料のエディタでもOK
• ステップ2：HTMLを書く。h1、p、imgなどのタグを使って骨組みを作る
• ステップ3：CSSを書く。HTMLで作った要素に色や大きさの指示を書く

その後、ブラウザでファイルを開くと、自分が作ったWebページが表示されます。

最初は「あ、表示された！」という小さな達成感が嬉しいものです。その達成感が、次のステップへ進むモチベーション（やる気）になります。

最初の1ページは「実際に手を動かす」ことが大切

Webページ作成で大事なのは「自分で手を動かす」ことです。

動画を見たり、本を読んだりするだけでは、なかなか身につきません。実際にテキストエディタを開いて、コードを書く経験が必要です。

また、分からないことが出てきたときは、検索する力が大切です。

• 「HTMLとは」「CSSの書き方」などと検索してみる
• ChatGPTなどのAIツールに「このタグの使い方を教えてください」と聞く
• エラーメッセージが出たら、それを検索してみる

このように、自分で調べて、試して、失敗して、また試す。この繰り返しが、本当の学習になるのです。

最初は時間がかかるかもしれません。でも、この力こそが、プログラミングスキルを身につけるうえで最も大切な力です。

ブレスでは「実際に作る」を大切にしています

どんぐりの会のプログラミング学習コース「ブレス」では、このような「実践型学習」を大切にしています。

ブレスの学習スタイルはこんな特徴があります。

• 実際にコードを書く実践型。動画や本を見るだけではなく、手を動かしながら学ぶ
• 自分で調べる力を重視。分からないことは、検索やChatGPTを使って解決する方法を教える
• ChatGPTなどのAIツールも活用。AI時代に必要な「AIとの付き合い方」を学べる
• 個別のペースで進められる。焦らず、自分のペースで学習を進めることができる

つまり、ブレスは「とにかく作ってみる」というアプローチを徹底しています。

この記事で紹介した、自分で手を動かしながらWebページを作る。そして、分からないことは自分で調べる。この学び方が、ブレスの基本スタイルなのです。

もし、一人で学ぶのが心配な場合や、分からないことが出てきたときにサポートを受けたい場合は、スクール形式で学ぶのも良い選択肢です。

まずは、1ページ作ってみましょう

Webページ作成は、思っているより難しくありません。むしろ、最初のシンプルなページ作成は、今日からでも始められます。

ポイントは、完璧を目指さないこと。まずは、自分の自己紹介ページなど、シンプルなページを1つ作ってみてください。

その過程で、HTMLやCSSの基本が自然と身につきます。そして、そこから少しずつ、複雑で面白いWebページへと進化させていくのです。

最初の1ページが完成したとき、「あ、自分でもWebページって作れるんだ」という実感が湧きます。

その小さな成功が、次へ進むエネルギーになります。一歩踏み出してみましょう。あなたなら、きっとできます。