【完全初心者向け】HTML/CSSとは？できることWebサイトの仕組みをやさしく解説

「Webサイトを作ってみたいけれど、何から手をつければいいのかわからない……」
「HTMLとCSSってよく聞くけど、プログラミングとは違うの？」

そんな疑問を抱えていませんか？

インターネットが当たり前になった現代、Webサイトを作る技術は、まるで「現代の魔法」のように見えるかもしれません。しかし、その正体は意外なほどシンプルです。

この記事では、全くの未経験からエンジニアを目指す方に向けて、HTMLとCSSの役割、そしてWebサイトがブラウザに表示される仕組みを、どこよりも優しく解説します。HT

HTML/CSSとは？Webサイトは「3つの役割」でできている

私たちが普段見ているWebサイト（Google、Amazon、SNSなど）は、主に3つの要素が組み合わさってできています。

よく例えられるのが「家づくり」です。

この記事では、まず基本中の基本であるHTMLとCSSにスポットを当てていきましょう。

HTML（Hypertext Markup Language）の最も大切な役割は「ここがタイトルですよ」「ここが文章ですよ」と、コンピューター（ブラウザ）に教えてあげることです。

コンピューターは、ただ文字を並べただけでは、どれが大事な見出しで、どれがただの補足説明なのかを理解できません。そこで、「タグ」という印を使って文字を囲みます。

HTMLのイメージ（コード例）
例えば、以下のような書き方をします。

このように、テキストに「役割（意味）」を与えていく作業を「マークアップ」と呼びます。HTMLだけで作ったWebサイトは、まるで真っ白な紙に黒い文字だけが並んだ、非常にシンプルなものになります。

HTMLだけで作ったサイトは、正直に言って「地味」です。そこで登場するのがCSS（Cascading StyleSheets）です。

CSSを使うと、HTMLで作った骨組みに対して、以下のような指示が出せます。

　CSSのイメージ（コード例）
例えば、先ほどの見出し（h1）をオシャレにしたい時は、このように書きます。

CSSがあるおかげで、私たちは「見やすいサイト」や「可愛いサイト」を楽しむことができるのです。

「HTMLの中に、直接『この文字を赤くして！』と書けば早いのでは？」と思うかもしれません。実は昔はそうしていた時期もありました。

しかし、現代では「構造（HTML）」と「見た目（CSS）」を完全に分けるのがルールです。なぜなら、その方が圧倒的に「管理が楽」だからです。

想像してみてください。100ページあるブログのタイトルを「全部赤から青に変えたい」と思ったとき、1ページずつHTMLを直すのは大変ですよね？
でも、CSSを1箇所書き換えるだけで、100ページすべてのデザインが一瞬で変わる。これが、役割を分ける最大のメリットなのです。

あなたが今、このブログを読めているのはなぜでしょうか？最後にWebサイトが画面に映るまでの「通信の仕組み」をのぞいてみましょう。

この「組み立て作業」のことを、専門用語で「レンダリング」と呼びます。あなたがページを開くたびに、ブラウザは裏側で一生懸命、指示書どおりに画面を組み立てているのです。

今回の内容を振り返ってみましょう。

「HTMLとCSS」は、Web制作の入り口であり、すべての基本です。
仕組みを理解した今、あなたはすでに「ただの読者」から「作り手」の視点へと一歩踏み出しています。

ここからは、実際に自分の手でコードを書いて、画面が変わる楽しさを体験してみてください。まずは1行、自分の名前を画面に出すだけでも、それは立派な「開発」です。