【初心者向け】「自分で作れた！」が味わえる。HTML & CSSで作るWebサイトの作り方

「HTMLって難しそう…」
「Webページってどうやって作るの？」

そんな風に感じているあなたへ。実は、Webページの基本的な仕組みはとってもシンプルなんです。この記事を読めば、HTMLとCSSという魔法の言葉を使って、自分の手でWebページを作り、ブラウザに表示させるという最高にワクワクする体験ができます！

HTMLとCSSがわかるようになると、WordPressのブログなどのカスタマイズもある程度できるようになるし、記事執筆の際に役立つと思います。

専門知識は一切不要です。さあ、一緒に「創る楽しさ」を味わってみませんか？

この記事でわかること

HTMLとCSSが何なのか、超ざっくり理解できる
たった数行のコードで、自分のWebページを作る方法がわかる
作ったページをカラフルに飾り付けする楽しさがわかる

HTMLとCSSって、なに？家づくりで例えると超シンプル

Webページの世界に足を踏み入れると、必ず出会うのが「HTML」と「CSS」という言葉。でも、全然むずかしく考える必要はありません。イメージしやすいように「家づくり」に例えるととてもわかりやすいと思います。

HTML → 家の「骨組み」や「構造」

柱、壁、屋根など、建物の基本的な構造を決める部分です。「ここが見出し」「ここが段落」といった、文章の構造をコンピューターに教える役割を担います。

CSS → 家の「インテリア」や「デザイン」

壁紙の色、家具の配置、照明のデザインなど、家をおしゃれに飾り付ける部分です。「見出しの文字は青く、大きく」「背景は薄い水色に」といった、見た目のデザインを担当します。

こんなふうに、インターネットで見かけるほとんどのWebサイトは、このHTML（骨組み）とCSS（デザイン）の最強コンビでできているんですよ。

冒険の準備！必要なのは3つだけ

Webページ作りを始めるのに、特別なソフトは必要ありません。あなたのパソコンに最初から入っているもので十分です！

エディタ（メモ帳でOK！）

- コードを書くためのアプリです。Windowsなら「メモ帳」、Macなら「テキストエディット」で大丈夫。もっと本格的にやりたくなったら、「Visual Studio Code（VS Code）」のような無料の高機能エディタもおすすめです。

ブラウザ

- 作ったWebページを見るためのアプリ。今あなたこの記事を見ている「Google Chrome」や「Microsoft Edge」のことです。

やる気とワクワク！

- これが一番大事！

あとは、わからないことが出てきたら、その都度ネットで調べるというスタンスで全く問題ないです。

Visual Studio Code（VS Code）は、普段使いでもとても便利なテキストエディタです。僕もずっとVSCodeを使い続けています。ぜひこの機会にVSCodeをインストールして使ってみてください。VSCodeの魅力やインストールの方法はこのブログでも解説しているので、参考にしてみてくださいね。

その前に！ファイルの「拡張子」って知ってる？

いよいよファイル作成！…といきたいところですが、その前に一つだけ大事な準備があります。それは 拡張子（かくちょうし） の表示です。

拡張子とは、ファイル名の末尾についている「.txt」「.jpg」「.pdf」のような部分のこと。これが「このファイルはテキストですよ」「これは画像ですよ」というファイルの種類をコンピューターに教えてくれる、いわば ファイルの身分証明書 です。

これから僕たちは「.html」や「.css」という拡張子のファイルを作るんですが、初期設定のパソコンだとこの拡張子が表示されないことがあるんです。これだと、ただのテキストファイルなのか、Webページなのか区別がつかず、うまく表示できません。

ちょっとした設定で表示できるので、先に済ませておきましょう！

Windows 10/11の場合

エクスプローラー（フォルダを開く画面）を開きます。
上部にある「表示」タブをクリックします。
出てきたメニューの中の「表示」＞「ファイル名拡張子」という部分に、チェックを入れます。

Macの場合

デスクトップ画面で、上部のメニューバーから「Finder」をクリックし、「環境設定」を選びます。
「詳細」タブをクリックします。
「すべてのファイル名拡張子を表示」というチェックボックスに、チェックを入れます。

これで準備万端です！

拡張子を表示するときの注意点

Windowsでは、初期設定でファイルの拡張子（.html や .css など）が表示されないようになっています。これは、初心者が間違えて拡張子を消してしまい、ファイルが開けなくなるトラブルを防ぐためです。

HTMLやCSSの学習では、ファイルの種類をしっかり見分けられるように拡張子を表示する必要があります。ただし、表示したままリネーム（ファイルの名前を変更すること）するときには注意が必要です。たとえば index.html を index にしてしまうと、拡張子「.html」そのものが消えてしまい、ブラウザで開けなくなります。

リネームのときのポイント

変更するのはファイル名の部分だけ（拡張子は消さない）
もし拡張子まで消してしまったら、もう一度正しい拡張子を付ければ直せる

また、学習の作業が終わったら、拡張子を再び非表示に戻しておくのもおすすめです。表示したときの逆の手順で非表示にできますよ。普段の使い方では拡張子を気にしなくてもよいので、思わぬトラブルを避けられます。

いざ実践！はじめてのHTMLファイルを作ってみよう

さあ、いよいよHTMLファイルを作っていきます。手順はたったこれだけ。

デスクトップなど、分かりやすい場所に新しいフォルダを作りましょう（名前は「my-first-web」とかでOK）。
エディタ（メモ帳）を開きます。

以下の「おまじない」のようなコードをコピーして、エディタに貼り付けます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>こんにちは、HTML！</h1>
  <p>これが私のはじめてのWebページです。</p>
</body>
</html>

ファイルを保存します。この時が超重要！
- ファイル名を「index.html」にします。（拡張子を.txtから.htmlに変えるのがポイント！）
- ファイルの種類を「すべてのファイル」にして保存します。

これで、あなたのパソコンの中に、世界でたった一つのWebページが誕生しました！

感動の瞬間！自分のページをブラウザで開いてみよう

先ほど保存した「index.html」ファイルを、ダブルクリックしてみてください。

どうでしょう？

ブラウザが立ち上がって、「こんにちは、HTML！」「これが私のはじめてのWebページです。」と表示されたはずです。

これ、あなたが作ったんですよ！すごくないですか？

たった数行のコードが、ブラウザという舞台の上で、意味のある情報として表示される。これがプログラミングの第一歩であり、モノづくりの根源的な楽しさです。

もっと楽しく！ CSSでページを飾り付けしよう

骨組み（HTML）ができたので、次はインテリア（CSS）で飾り付けをしていきましょう。

1 .先ほどと同じフォルダに、新しいファイルを作ります。

2 .以下のコードを貼り付けて、「style.css」という名前で保存します。

body {
  background-color: #f0f8ff; /* 背景を薄い水色に */
  font-family: sans-serif;   /* 読みやすいフォントに */
  color: #333333;              /* 文字を濃い灰色に */
}

h1 {
  color: #0066cc; /* 見出しの文字を青く */
}

これでフォルダ内には「index.html」「style.css」の2つのファイルが存在しているはずです。

3 .次に、HTMLとCSSを繋げるために、index.htmlを少しだけ編集します。<head>タグの中に、以下の1行を追加してください。

あ、この時index.htmlをそのままクリックして開いてしまうとブラウザが立ち上がってしまいます。なのでHTMLを編集したい時には、index.htmlの上で右クリックをして「メモ帳で編集」とするか、あらかじめメモ帳などのテキストエディタを開いておいて、そこにindex.htmlをドラッグしてください。それでHTMLが編集できるようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
  <link rel="stylesheet" href="style.css"> <!-- この行を追加！ -->
</head>
<body>
  <h1>こんにちは、HTML！</h1>
  <p>これが私のはじめてのWebページです。</p>
</body>
</html>

4 .index.htmlを上書き保存して、もう一度ブラウザで見てみましょう！（すでに開いている場合は、更新ボタンを押してください）

どうですか？背景に色がつき、文字の色も変わっておしゃれになりましたよね！

style.cssの中にある色のコード（#f0f8ffなど）を、Googleのカラーピッカーなどで好きな色に変えて遊んでみてください。変更を保存してブラウザを更新するたびに、見た目が変わるのが面白いですよ！

CSSファイルを編集する時も、さっきと同じように編集したいファイルの上で右クリックをして「メモ帳で編集」とするか、あらかじめメモ帳などのテキストエディタを開いておいて、そこに編集したいファイルをドラッグしてください。それで編集できるようになります。

まとめ：小さな「できた！」が未来のスキルになる

今日、あなたは自分の手でHTMLファイルを作り、CSSでデザインを変え、Webページとしてブラウザに表示させる、という素晴らしい体験をしました。

HTMLでページの骨組みを作り、
CSSで見た目をデザインする。

この基本さえ押さえておけば、次はいろいろな応用ができます。例えば、他のページへのリンクを貼ったり、好きな画像を表示させたり…。小さな「できた！」という成功体験を積み重ねていくことが、スキルアップへの一番の近道です。

このようにリンク貼ったり、画像を表示するHTMLの事を「HTMLタグ」と言います。やりたい事ができたら、その「HTMLタグ」を検索してみましょう。全部をタグを覚えなくても、こうして必要に応じて検索していけばOKですよ！

プログラミングの世界へようこそ！この記事が、あなたの創造的な冒険の第一歩となれば、とても嬉しいです。

もっと知りたい人のためのおすすめ書籍

HTMLとCSSファイルを作ってブラウザで見るまでの手順を解説してきましたが、もし自分の手でもっとウェブページを作ってみたい！と興味を持ったなら、今回ご紹介する書籍がHTMLとCSSを学ぶのにぴったりです。

『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』
この書籍は、HTMLとCSSの基本から応用まで体系的に解説されています。実際にサイト制作を進めながら学べる構成で、Web制作の流れを一通り体験できます。初めての方でも「これ1冊でHTML/CSSはOK」と言えるほど網羅的で理解しやすいので安心してオススメできます。

『初心者からちゃんとしたプロになる HTML+CSS標準入門』
現役の専門学校講師が執筆した、基礎から最新技術まで幅広く学べる教科書です。HTMLとCSSの基本に加え、FlexboxやCSS Gridにもしっかり対応しており、ダウンロードデータ付きで実践的な学びが可能です。初心者から「カッコいいWebサイトを作りたい」「仕事に役立てたい」という方にとくにオススメします。

『スラスラわかるHTML&CSSのきほん』
HTMLとCSSの基本を、初心者がつまずかないよう丁寧に解説してくれる書籍です。基礎をしっかり押さえたい方や、最初から順に手を動かして学ぶのが不安な方にピッタリです。「1冊やり切るだけで基礎は身につく」と評判で、ステップアップを目指す人の最初の1冊として強く推奨できます。

『作りながら学ぶ HTML/CSSデザインの教科書』
ウェブサイト制作の流れを実際に体験しながら学べる1冊です。HTML・CSSの基本から、画像編集、ナビゲーション作成、サイト公開まで具体的な手順を解説しており、初心者が最初の一歩を踏み出すのに最適です。実践を通じて理解できるので、手を動かして覚えたい方にオススメです。

以上です。この記事が少しでも参考になれば幸いです。

このブログではテレワークやパソコンを使って自宅で仕事をするために役立つ小ネタを多数紹介しています。Twitterでも情報発信していますので、今回の記事が役立ったよ！と思ったらTwitterでいいね＆フォローお願いします！

Twitter: @tele_commuter