Web制作の基礎① HTML/CSSってどういうもの？

1. はじめに

「在宅で働くために、Web制作を学びたい！！」

そんな思いで、自分なりにいろいろ調べて勉強を始めてみたけれど、出てくるのはカタカナや英語の専門用語ばかり…。

そのまま挫折してしまった、という方は少なくないかと思います。

最近ではAIの進化も目覚ましく、今やAIに任せてWebサイトを作ることも可能な時代になりました。

もしかすると、「もうHTMLやCSSなんて勉強しなくてもいいのでは？」と感じるかもしれません。

でも私は、だからこそHTMLやCSSの基礎知識くらいは身につけておくべきだと考えています。

なぜなら、基礎がなければも上手に使いこなせないからです。

少したとえ話をしましょう。

Google翻訳で、以下のような翻訳を行ったとします。

---

日本語：「彼は顔が広いよね」（＝人脈が広いという意味）

Google翻訳：He has a wide face.

---

どうでしょうか？

この英文を見て「いや、その英文は違うだろ(笑)」と感じた方は、

「a wide face」が物理的に“顔の幅が広い”という意味だと理解しているからです。

もしその知識がなければ、この翻訳が不自然なことにすら気づかず、そのまま使ってしまうかもしれません。

HTMLやCSSも、これと同じだと思っています。

基本的な概念を知らなければ、AIが出力したコードの間違いに気づくことができません。

このブログでは、「今までパソコンやWebのことにはあまり触れてこなかったけれど、これをきっかけに学んでみたい！」という完全初学者の方に向けて、Web制作の超基本や、HTML/CSSの基本的な考え方をやさしく紹介していきます。

知識がある人から見ると、「この説明はちょっと違うかな？」と感じる部分もあるかもしれません。

ただ、このブログでは「この段階ではこのくらいの理解でOK！」という視点を重視しており、始めから全てを厳密に正確に伝えることよりも、まずは“わかる楽しさ”を大切にしたいと考えております。

とはいえ、正確さが必要な場面もあるので、必要に応じて「※厳密にはこういう意味です」といった注釈を付けることもあります。

その際は「へえ、そうなんだ」と気軽に読んでもらえれば幸いです。

専門用語もなるべくかみ砕いて、わかりやすく説明していきますので、ぜひ肩の力を抜いて、気軽に読んでいただければと思います。

---

2. HTML/CSSの概要を学ぼう

それでは早速、Web制作の一番最初のステップ、「HTML/CSSとは何か？」について学んでいきましょう。

・HTML（エイチティーエムエル）

・CSS（シーエスエス）

この2つについて、単語だけはなんとなく聞いたことがある、という方もいらっしゃるかと思います。

まず現時点では、Webサイトを作る時に絶対に必要なもの、とだけ覚えていただければ大丈夫です。

この2つがWebサイトを作るにあたってどう必要になりどんな役割を持っているのかを、この後のステップで順に解説していきます。

2-1. 「HTML」ってなに？

まずは「HTML（エイチティーエムエル）」の解説から。

単語自体は聞いたことはあったとしても、「何のこと？」と聞かれると……うまく答えるのは、なかなか難しいものです。

とりあえず、Wikipediaでの定義を見てみましょう。

HTMLまたはHyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つで、プログラミング言語ではない。主にWorld Wide Webにおいて、ウェブページを表現するために用いられる。

引用元：HyperText Markup Language - Wikipedia

わかりましたか？ ……正直、あまりピンと来ませんね。

「ハイパーテキスト？マークアップ言語？表現する…？」と、なんだか抽象的で難しく感じてしまいます。

なのでここでは、もっとイメージしやすいように、HTMLの役割を“家”にたとえて説明してみましょう。

Webサイトは、別名「ホームページ」とも呼ばれます。

この言葉の通り、Webサイトを“家”にたとえると、HTMLはその家の柱や壁といった土台と、最低限の家具にあたります。

こんな感じです👇

確かに、これでも一応「家」ではありますが……

正直、住むにはちょっと簡素すぎますし、ましてや友人なんて、とてもじゃないけど招ける状態ではありません。

できれば内装やインテリアはもっとオシャレにして、住んでいてテンションがあがるような家にしたいところ。

そこで役立つのが CSS（シーエスエス） です。

2-2. 「CSS」ってなに？

CSSは、HTMLで組み立てた“最低限のWebページ”に、色や装飾、配置などのデザインを加えるための仕組みです。

家でいうと、壁紙の色を変えたり、オシャレな家具を配置したりするようなものです。

先ほどのHTMLだけの家に、CSSで装飾を加えてみましょう👇

どうですか？かなり「ちゃんとした家」っぽくなりましたね！

これなら友人も招けるかもしれません。

私たちが普段見ているWebサイトが美しく、見やすく整えられているのは、CSSで綺麗にデザインが施されているからなのです。

2-3. HTMLとCSSの関係まとめ

---

■HTML

家の土台や最低限の家具（Webサイトの構造・中身をつくる）

■CSS

内装やインテリア（見た目やデザインを整える）

---

このように、HTMLとCSSはセットで使うことで、見た目も中身も整ったWebページを作ることができるようになります。

2-4. ちょっと余談：「家の便利機能」を与えるJavaScript

ここまでで、HTMLは家の土台や最低限の家具、CSSは内装やインテリア…というイメージがつかめたと思います。

実は、Web制作の世界にはもうひとつよく出てくる存在があります。

それが JavaScript（ジャバスクリプト） です。

この段階ではまだ詳しく知る必要はありませんが、せっかくなので少しだけ紹介しておきましょう。

JavaScriptは、Webサイトに動きや仕組みを加えるためのものです。

たとえば、ボタンを押したらメニューが開いたり、画像がスライドしたり、入力フォームにリアルタイムで反応したり…といった「動的な機能」を実現するために使います。

家にたとえるなら、照明のスイッチや自動ドア、エアコンのような、ちょっと便利な仕組みの部分です。

スイッチを押せば電気のオンオフが切り替えられるし、リモコンを操作すればエアコンの設定も出来るようになりました。

HTMLとCSSだけでも「家」として成り立っていましたが、JavaScriptが加わることで一気に“住み心地のいい家”になった感じですね！

こうした“ちょっとした仕掛け”が加わることで、Webサイトもグッと使いやすく、魅力的になります。

しかし、「まずは住める家を建てる」＝HTMLとCSSをしっかり学ぶことが先決。

JavaScriptは、そのあと余裕が出てきてからで全然OKです。

ひとまず「そういうのもあるんだな〜」くらいで、頭の片隅に一旦置いておいてください。

3. まとめ

まずは初回として、Web制作の基本のキである「HTML」と「CSS」とは何か、そして少しだけ「JavaScript」についてもご紹介しました。

---

■HTMLは、Webページの「土台」を作るためのもの。家でいうと土台や最低限の家具。

■CSSは、その土台に色やデザインを加えて見た目を整えるもの。家の内装やインテリアのような役割。

■JavaScriptは、必要に応じて動きや便利な機能を加えるもの。家でいえば照明のスイッチや自動ドアのようなイメージ。

---

次回は、HTMLを実際にどのように書いて使うのか？という部分を、具体的に解説いたします。

Web制作の基礎② HTMLを書いてみよう

たとえば、「HTMLってどこに書けばいいの？」「何から書き始めるの？」といった疑問に答えながら、実際に簡単なHTMLを書いてみるところまで進めていきます。

「知識ゼロだけど、まずはやってみたい」という方が、最初の一歩を踏み出すきっかけになれば幸いです。

焦らず、ご自身のペースでゆっくり学んでいきましょう！

それでは、ここまで読んでくださりありがとうございました。