HTMLとCSSを小学生でもわかるようにやさしく解説する入門ガイド

パソコンやスマホで見るウェブページは、HTMLとCSSというふたつの魔法の言葉で作られています。HTMLはページの中身を作る魔法、CSSはその見た目をきれいにする魔法です。小学生でもわかるように、例を交えて説明します。

HTMLってなに？

HTMLはウェブページの「骨組み」を作るものです。例えば、おもちゃの家を作るときに、柱や壁を立てる作業のようなものです。

実際には、文章の見出しや段落、画像やリンクなどをHTMLのタグという特別な言葉で書きます。例えば、<h1>こんにちは</h1>と書くと大きな文字の見出しができます。

CSSはHTMLで作った骨組みに色や形をつける「おしゃれ担当」です。壁に色を塗ったり、屋根の形を変えたりするイメージです。

例えば、文字を赤くしたいときは color: red; と書きます。背景に色をつけたり、文字の大きさを変えたりもCSSでできます。

HTMLで文章や画像の場所を作って、CSSで色や大きさを変えると、ウェブページが完成します。たとえば、HTMLで見出しと段落を作り、CSSで文字の色を青にして大きくすると、見やすく楽しいページになります。

このようにHTMLは「何を置くか」、CSSは「どう見せるか」を担当していると覚えておくとわかりやすいです。

HTMLだけだとこんな感じです：
<h1>ぼくのページ</h1> <p>ここは文章です。</p>

CSSをつけると：
h1 { color: blue; } p { font-size: 18px; }

こうすると、見出しは青くなり、段落の文字は大きくなります。

HTMLはウェブページの中身を作る骨組み、CSSはその見た目を整えるおしゃれ担当です。HTMLとCSSを組み合わせることで、文字や画像がきれいに並んだ楽しいウェブページが作れます。まずは小さな例から試してみると、どんどんわかるようになります。