HTMLとCSSは、Webページを作るための基本的な言語です。プログラミング言語とは少し異なり、「構造」と「見た目」を記述するための言語です。最初のページを作るまでの手順は、思っているよりシンプルです。この記事では、コードエディタの準備から、ブラウザで表示するまでの流れを説明します。

コードエディタを準備する

HTMLとCSSを書くには、テキストエディタがあれば十分ですが、コードの色分けや補完機能があるコードエディタを使うと作業しやすくなります。無料で使えるVisual Studio Code（VS Code）は、日本語の情報も多く、初心者に向いています。インストール後、日本語化の拡張機能を追加すると、メニューが日本語になります。

HTMLファイルを作成する

コードエディタで新しいファイルを作成し、「index.php」という名前で保存します。拡張子が「.html」であることが重要です。ファイルの中に、HTMLの基本構造（DOCTYPE宣言、html要素、head要素、body要素）を書きます。body要素の中に書いたテキストが、ブラウザで表示される内容になります。

CSSで見た目を整える

HTMLだけでは、テキストが並んだだけのページになります。CSSを使うと、文字の色、サイズ、余白、背景色などを指定できます。CSSは別ファイル（style.cssなど）に書いて、HTMLファイルから読み込む方法が一般的です。最初は、body要素の背景色を変えるだけでも、CSSの仕組みを実感できます。

ブラウザで確認する

作成したindex.phpファイルをブラウザにドラッグ&ドロップすると、ページが表示されます。コードを変更してファイルを保存した後、ブラウザを更新（F5キー）すると、変更が反映されます。この「書いて、保存して、確認する」サイクルを繰り返すことが、Web制作の基本的な作業の流れです。

最初のページが表示されたときの感覚は、学習を続けるモチベーションになります。Hushed Ocean RetreatのWebサイト制作入門コースでは、この先のCSSレイアウト、複数ページの構成、サーバーへの公開まで、順を追って学べます。