Web制作の勉強を始めたばかりの頃、私が最初につまずいたのが「HTMLとCSSって何が違うの？」という超基本的な疑問でした。
同じような画面に文字とタグがずらっと並んでいて、正直「どっちも同じじゃないの？」と思っていた時期があります（笑）。
3人の子育てをしながらスキマ時間で勉強している私が、実際につまずいて、理解できた瞬間の感覚をそのままお伝えします。同じように「初心者だけど独学でWeb制作を学びたい」と思っているママさんの参考になれば嬉しいです。
【結論】HTMLは「骨組み」、CSSは「装飾」
先に結論からお伝えすると、
• HTML＝家の「骨組み・構造」を作るもの
• CSS＝家の「内装・デザイン」を整えるもの
このイメージさえ持てれば、8割は理解できたと言っても過言ではありません。
順番に、家づくりに例えながら解説していきますね。
HTMLは「家の設計図・骨組み」
家を建てるとき、まず最初にやるのは「どこに玄関を置くか」「どこにリビングを配置するか」という骨組みづくりですよね。
HTMLはまさにこれと同じ役割です。
• ここが見出し（玄関）
• ここが本文（リビング）
• ここが画像（窓）
• ここがリンク（ドア）
というように、「このページにはどんな要素があって、どこに何を配置するか」という構造を決めるのがHTMLの仕事です。
たとえばこんなコードになります。
<ｈ１>見出しです</h1＞
<p>ここは本文が入ります</p>
<h1>は「大きな見出しですよ」という意味のタグ、<p>は「ここは文章ですよ」という意味のタグです。
この段落では、色もついていないし、レイアウトも整っていません。あくまで「骨組みだけでできた状態」というイメージです。
CSSは「家の内装・インテリア」
骨組みだけの家って、コンクリート打ちっぱなしの状態みたいなもので、正直まだ住みたいとは思えないですよね。
そこに壁紙を貼ったり、家具を配置したり、照明を選んだりして、初めて「素敵なお部屋」になります。
これがCSSの役割です。
・文字の色を変える
・背景に色をつける
・文字の大きさを調整する
・要素を横並びにする
・余白を整える
先ほどのHTMLに、CSSでこんな指定を加えてみます。
h1{
color: pink;
font-size: 32px;
}
こうすると、見出しがピンク色で大きな文字に変身します。
つまり「HTMLで骨組みを作り、CSSで見た目を整える」というのが、2つの役割分担なんです。
実際に学んでみて「なるほど」と思ったポイント
私が実際に学習を進めていく中で、得に理解が深まったのがこの3つです。
①HTMLだけだと、正直かなり地味
HTMLだけで作ったページは、文字が羅列されているだけの、いわゆる「すっぴん」状態です。ここで「Web制作って地味だな…」と思ってしまう人もいるかもしれませんが、それはまだCSSを当てていないだけ。安心してください。
② CSSは「後乗せ」でどんどん変えられる
骨組み（HTML）を変えずに、内装（CSS）だけを変更すれば、サイトの雰囲気をガラッと変えられます。これは実際に触ってみて「便利だな」と実感した部分です。
③ 役割が分かれているから、修正しやすい
「文章を直したい」ならHTML、「色を変えたい」ならCSSと、直す場所が明確なので、初心者でも迷わず修正できるようになります。最初はこの切り分けが分からず、あちこち触って崩してしまうこともありましたが…（笑）。
まとめ|まずは「骨組みと内装」のイメージでOK
HTMLとCSSの違いは、
• HTML＝家の骨組み（構造）
• CSS＝家の内装（デザイン）
このイメージさえ持てれば、学習のスタート地点としては十分です。
細かい文法やタグの種類は、使いながら少しずつ覚えていけば大丈夫。私自身、育児の合間の細切れ時間でコツコツ学んでいますが、「分からない」が「分かった」に変わる瞬間は、何度経験しても嬉しいものです。
これからHTMLとCSSを学ぶ方の、最初の一歩の参考になれば嬉しいです。
コメント