たこやきのプログラミング教室 #1 ～ HTML と CSS とは！？～

 

こんにちは！たこやきです。

 

今日から「たこやきのプログラミング教室」というシリーズを始めようと思います！！

 

「ブログで役立つコード」や「そもそもプログラミングってなんぞや」とか、そういう基礎から応用までを扱っていければなと思っています。

 

あ、ちなみに筆者もプログラミングに関する知識については皆無なので、読者の皆さんと一緒に勉強していければなと思います。

 

ということで記念すべき第一回の今回のテーマは！！

 

「Webサイトってどうやって作られてるのー！？」

 

読者の皆さんで、こういう風に思った経験はありませんか！？

 

「このサイト、めっちゃおしゃれだけど、どうやって作っているんだろう」

 

この記事を読めば、きっとそのお悩みが解決できると思います！

 

それでは授業スタート！！

 

 

目次

• 1. サイトってどういう構造！？
• 2. HTMLとは？
• 3. CSSとは？
• 4. JavaScriptとは？
• 5. まとめ

クリックするとその場所に移動します

 

 

1. サイトってどういう構造！？

「Webサイト」って聞くと、文字や画像が並んでるだけに見えるけど、実は裏側にはちゃんとした“仕組み”があります。

 

これを知らないと、いざ「サイト作ろう！」って思ってもどこから手をつければいいのか分からないんですよね。

 

そこでよく使われる例えが “家づくり” です。

 

家を建てるとき、まずは柱や壁といった骨組みが必要ですよね。

 

これがWebサイトでいう「HTML」です。どんな部屋があるか、どこにドアをつけるか、そういう“構造”を決める役割。

 

でも骨組みだけだと、ちょっと殺風景…。

 

壁紙を貼ったり、床の色を変えたり、家具を置いたりしないと、住み心地のいい空間にはなりません。

 

そこで登場するのが「CSS 」。文字の色を変えたり、背景をおしゃれにしたりして、サイトを見やすくデザインしてくれます。

 

さらに、家に電気を通したり、エアコンや自動ドアをつけたりすると、ぐっと便利になりますよね。

 

これが「JavaScript」の役割。クリックすると動いたり、スクロールでアニメーションしたり…“動き”を担当してくれるわけです。

 

つまり、Webサイトは 「HTML（骨組み）＋CSS（デザイン）＋JavaScript（動き）」 の3つが合わさってできているんです！

 

次の章では、まずその基本中の基本「HTML」に迫っていきましょう！

 

2. HTMLとは？

さあ、それではまず最初の登場人物、HTML を紹介しましょう！

 

HTMLとは、「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略。

 

……なんかカタカナだらけで急に難しそうに見えました？

 

安心してください。要するに、Webサイトの骨組みをつくるための言語です。

 

例えば、「ここがタイトルですよ！」「ここからが本文ですよ！」っていう“印”をつけていく感じ。

 

実際にコードを書いてみるとこんな感じになります。

See the Pen #1 html by たこやき (@ayogabiw-the-lessful) on CodePen.

 

どうです？めっちゃ文字と記号の組み合わせで謎っぽく見えるでしょ。

 

でも安心してください、これは実際に「お前はタイトル！」「お前は段落！」って指示を出してるだけなんです。

 

<h1>〜</h1> → 見出し（hはHeadingの略）

<p>〜</p> → 段落（pはParagraphの略）

 

で、この中でよく出てくるのが head と body。

 

head … サイトの「頭脳」みたいな部分。ここに書いた内容はページに直接表示されないけど、タイトルや検索エンジン に伝える情報、デザインの設定なんかを入れる。いわば“裏方さん”。

 

body … サイトの「体」。ここに書いたものが実際に画面に表示される。文章、画像、リンク、ぜ〜んぶbodyに詰め込む。

 

つまり、head＝舞台裏の設定、body＝お客さんが見る本番の舞台 って感じ。

 

なぜこの二つが必要かというと、「舞台裏の設定」を「お客さん」が見る必要がないように、サイトでもこの二つを分けておくことで、作る側（デベロッパー）にとって分かりやすく整理できるようになっているからです。

 

HTMLはこうやって「タグ」を使いながら、サイトの中身を順番に組み立てていくんですね。

 

というわけで次の章では、この骨組みをオシャレに彩ってくれる相棒、CSS を紹介します！

 

 

3. CSSとは？

さて、HTMLで骨組みを作っただけだと……めっちゃ味気ないです。

 

白い背景に黒文字がドーン！みたいな、「レポート用紙かな？」ってレベルのシンプルさ。

 

そこで登場するのが CSS（Cascading Style Sheets）。

 

これはWebサイトをオシャレにするための「デザイナー担当」です。

 

例えば、こんなCSSを書いてみましょう👇

 

See the Pen #1 CSS by たこやき (@ayogabiw-the-lessful) on CodePen.

 

これをさっきのHTMLに組み合わせると……

 

See the Pen # html+CSS by たこやき (@ayogabiw-the-lessful) on CodePen.

 

見出し（h1）が赤くて大きな文字に！

 

段落（p）がグレーで落ち着いた雰囲気に！

 

って感じで、一気に「地味な文章」から「ちょっとしたWebサイト」へ進化します。

 

CSSは文字の色・大きさ・余白・背景画像・レイアウトなどを調整できるので、まさにインテリアコーディネーターみたいな存在。

 

HTMLが「家の骨組み」なら、CSSは「壁紙や家具」で見栄えを整えてくれるんです。

 

4. JavaScriptとは？

ここまでで「骨組み（HTML）」と「見た目（CSS）」がそろいました。

 

……でも、まだ“ただの静止画”みたいですよね。

 

そこで登場するのが JavaScript。

 

こいつは、サイトに“動き”をつけるプログラミング言語です。

 

たとえば、さっきのページにボタンを追加してみましょう👇

 

See the Pen #1 html+CSS+Java script by たこやき (@ayogabiw-the-lessful) on CodePen.

 

このボタンをクリックすると、見出しの色が「赤 ⇔ 青」で切り替わります！

 

つまり、HTMLが「ここに見出しを置くよ」、CSSが「赤くしよう」と言っていたところに、JavaScriptが「ボタンを押したら色を変えるね！」と“動き”を与えてくれるわけです。

 

このほかにもJavaScriptを使えば、

• ボタンを押したらページが切り替わる
• 画像がスライドショーで切り替わる
• スクロールしたらふわっとアニメーションが出る

みたいな、「ちょっと未来感ある動き」が簡単に作れるんです。

 

まあ要するに、JavaScriptは家でいう“電気・家電”みたいなものです。

 

骨組みと内装だけじゃ暮らせないけど、電気が通れば一気に便利になりますよね。

 

Webサイトも同じで、JavaScriptが入ると一気に“生きてるサイト”になるわけです。

 

 

5. まとめ

今回の授業では、Webサイトの裏側をちょっと覗いてみました。

 

おさらいすると――

• HTML → サイトの「骨組み」
• CSS → サイトの「見た目」
• JavaScript → サイトの「動き」

という3人の役割分担で、普段見ているWebサイトは成り立っています。

 

これで「なんとなく仕組みが分かった！」ってなった人は、もう立派に第一歩を踏み出してます。

 

逆に「まだよく分からん！」って思った人も安心してください。次回からは実際にコードを書きながら、少しずつ理解を深めていけるようにします！

 

ということで次回は、「HTMLを実際に書いてみよう！」 がテーマです。

 

今日の話が“理論編”だとしたら、次はいよいよ“実技編”。キーボードを叩きながら、自分だけの小さなサイトを作っていきましょう！

 

それではまた次回の授業で！

 

最後まで見ていただきありがとうございました！

 

↓↓↓↓↓↓↓

↑↑↑↑↑↑↑

↓↓

↓↓

トップに戻る

↓↓