ウェブ開発を学び始めた多くの方が、最初に混乱するのが「HTMLとCSSの違い」です。どちらもウェブページを作るために使うものですが、役割がまったく異なります。この違いを最初に整理しておくと、その後の学習がずいぶん楽になります。

HTMLはページの「構造」を作る

HTMLは、ウェブページに何を置くかを決めるための言語です。「ここに見出しがある」「ここに段落がある」「ここに画像がある」「ここにリンクがある」という情報を、タグを使って記述します。HTMLだけで作ったページは、装飾のない文書のような見た目になります。それで正しいのです。HTMLの役割は見た目を整えることではなく、内容の構造を定義することだからです。

CSSはページの「見た目」を整える

CSSは、HTMLで定義した要素をどのように表示するかを指定するための言語です。文字の色・大きさ・フォント、背景色、余白、配置などをCSSで指定します。同じHTMLファイルに対して、CSSを変えるだけでまったく違う見た目のページを作ることができます。これがHTMLとCSSを分けて書く理由の一つです。

なぜ分けて書くのか

HTMLに見た目の指定を直接書くこともできますが、それをやると後から変更するのが大変になります。たとえば、サイト全体の文字色を変えたいとき、CSSにまとめて書いてあれば1か所を変えるだけで済みます。HTMLに直接書いていると、すべてのページを一つずつ修正しなければなりません。「構造」と「見た目」を分けることには、実用的な理由があります。

最初に覚えるべきこと

HTMLを学ぶときは、まず「タグとは何か」「開始タグと終了タグの対応」「よく使うタグ（h1・p・a・img・div）の役割」を押さえてください。CSSを学ぶときは、「セレクタ・プロパティ・値の書き方」「クラスとIDの違い」「ボックスモデルの考え方」が最初の山です。どちらも、実際に書いて確認しながら進めるのが一番理解が早いです。

HTMLとCSSの役割の違いを理解することは、ウェブ開発学習の土台になります。Timeless Ripple Wildernessのウェブ開発入門コースでは、この2つを順番に、実際に手を動かしながら学べます。