Webサイトを作ってみたいと思ったら、まず最初に出会うのがHTML（エイチティーエムエル）とCSS（シーエスエス）という言葉です。
「プログラミング言語？」「難しそう……」と身構える必要はありません。この2つは、Webサイトという「家」を建てるための、役割の違うパートナーなんです。
1. HTMLは「骨組み」と「中身」
HTMLは、Webサイトの構造を作るための言語です。
家造りでいえば、柱を立てたり、壁を作ったり、どこに窓を置くかを決める**「骨組み」**の作業にあたります。
- ここは見出し（タイトル）
- ここは文章
- ここは画像
このように、ブラウザ（ChromeやSafariなど）に対して「これは情報の塊ですよ」と指示を出します。HTMLがないと、Webサイトには何も表示されません。
2. CSSは「装飾」と「デザイン」
CSSは、HTMLで作った骨組みをおしゃれに整えるための言語です。
家造りでいえば、壁紙の色を変えたり、カーテンを吊るしたり、家具の配置をミリ単位で調整する「内装・外装」の作業です。
- 文字の色を赤にする
- ボタンに丸みをつける
- 文章の横に画像を並べる
CSSがなくてもサイトの内容は伝わりますが、真っ白な背景に黒い文字が並ぶだけの、少し寂しい見た目になってしまいます。
3. HTMLとCSSの関係性を比較！
一目でわかるように、それぞれの役割を整理してみました。
| 特徴 | HTML | CSS |
| 役割 | 構造・内容（骨組み） | デザイン・見た目（装飾） |
| 家造りなら | 柱、壁、ドアの設置 | 壁紙の色、照明、レイアウト |
| 例えるなら | 人の「骨格」 | 人の「服・メイク」 |
| ないとどうなる？ | 何も表示されない | 素っ気ない文字だけの画面になる |
4. 実際にどう書くの？（イメージ図）
例えば、画面に「こんにちは！」という赤い文字を出したい場合、2つのファイルが連携します。
- HTMLファイル： 「ここに『こんにちは！』という文章（pタグ）を置くよ」と書く。
- CSSファイル ： 「さっきの文章（pタグ）を赤色にしてね」と指示を出す。
この2つが組み合わさって、私たちが普段見ている綺麗なWebサイトが出来上がります。
まとめ：まずはHTMLから触ってみよう！
Web制作の第一歩は、まずHTMLで「中身」を作ることから始まります。中身ができたら、CSSで魔法をかけるように自分好みのデザインに変えていく。これがWebサイト制作の基本のサイクルです。
「難しそう」と感じたら、まずは「HTML＝骨組み」「CSS＝お化粧」とだけ覚えておけばOKです！
コメント