HTMLとCSSって何！？アラフィフのパソコン初心者の挑戦が始まった【第1話】

タイピング・PCスキル

2025.07.05

今やネットを見ない日なんてありませんよね。私はブログを書いているのですが、たまに訳がわからない言語に出会います。それが、普段は目にしているWebサイトの作成に必要なものとは気にもしていませんでした。

現在、ブログの作成は私のようにHTMLやCSSを知らなくてもできる時代です。ただし、何かトラブルが生じた時は全く歯がたたないでしょう。

トラブルに対応する時のためと将来的に自分のホームページを作成するために、1からHTMLとCSSを学ぶことにしました。

この記事では、全く知識なしからHTMLとCSSを学んでいこうと思います。同じく知識がない方のご参考になればと思います。全くのど素人および独学のため、表記等問題があるようでしたらぜひご指摘いただければと思います。

✏️今日のテーマ：HTMLとCSSって何？

調べてみると…

HTML（エイチティーエムエル）は、Webページの「骨組み」を作る言語です。見出しや文章、画像、リンクなど、ページの中身を決めます。

CSS（シーエスエス）は、Webページの「見た目」を整える言語です。文字の色や大きさ、背景色、レイアウトなどを指定します。

たとえるなら、HTMLは家の柱や壁、CSSは外壁の色や家具の配置みたいなものかなと。

まずはVisual Studio Code（VSCode）をインストール。

🟢 Microsoftが作った、無料の高性能コードエディタ

日本語対応しているので「Japanese Language Pack for Visual Studio Code」をインストールする。

特徴	説明
✅ 見やすい	色分けされるから、どの部分がタグ・テキスト・CSSかすぐわかる
✅ オート補完	`<p>`って打ち始めると勝手に候補が出てくる
✅ 拡張機能が豊富	HTML/CSSのライブプレビュー、コード整形など便利ツールが入れられる
✅ 無料	タダでここまで使えるってすごい
✅ 保存してすぐ反映	ブラウザですぐ確認できるから初心者でも手を動かしながら学べる

<!DOCTYPE html>

👉 これは「このファイルはHTMLで書いてるよ！」ってブラウザに教える宣言。
最新のHTML5という形式で書いてますよというしるし。最初に必ず書くルールです。

<html lang="ja">

👉 この行からHTMLの本体がスタート。
lang="ja"はこのページは日本語で書いてるよって意味です。
これを書いておくと、検索エンジンや音声読み上げツールが正しく処理してくれます。

<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>

👉 <head>タグの中は、画面には表示されないけどページの設定を書く場所です。

<meta charset="UTF-8"> は「日本語などの文字がちゃんと表示されるようにする設定」
　→ これがないと文字化けすることがあります。
<title>はじめてのページ</title>
　→ これはブラウザの「タブ」に表示される文字。
　　たとえば、Chromeのタブに出てくる名前がこれです。

<body>
  <h1>こんにちは、VSCode</h1>
  <p>これは最初のHTMLページです。</p>
</body>

👉 <body>タグの中に書いたものが実際にブラウザに表示される内容です。

</html>

👉 最後に</html>でHTML全体の終了を伝えます。

HTMLは、例えるなら「家の設計図」です。

初心者にも見出しと段落だけで自分だけのページが作れる。
この体験が「Webって楽しいな？」と感じるきっかけになるはずです。

保存した「index.html」をブラウザで開いてみると

おおっ！？ちゃんと出た！「こんにちはVSCode」って、自分が書いた文字が表示されてる！

これは、感動です。「コードって難しそうだな…」と思ってたけど、ほんの数行でページができるなんて楽しいですね。

実は最初、ブラウザに表示されなかったんです。
原因は

保存し忘れていただけ。

VSCodeでコード書いたあと、⌘ + S（WindowsならCtrl + S）で保存しないとブラウザは更新されません。