1. はじめに
「在宅で働くために、Web制作を学びたい！！」
そんな思いで、自分なりにいろいろ調べて勉強を始めてみたけれど、出てくるのはカタカナや英語の専門用語ばかり…。
そのまま挫折してしまった、という方は少なくないかと思います。
最近ではAIの進化も目覚ましく、今やAIに任せてWebサイトを作ることも可能な時代になりました。
もしかすると、「もうHTMLやCSSなんて勉強しなくてもいいのでは？」と感じるかもしれません。
でも私は、だからこそHTMLやCSSの基礎知識くらいは身につけておくべきだと考えています。
なぜなら、基礎がなければAIも上手に使いこなせないからです。
少したとえ話をしましょう。
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において、ウェブページを表現するために用いられる。
出典元：Wikipedia https://ja.wikipedia.org/wiki/HyperText_Markup_Language
わかりましたか？ ……正直、あまりピンと来ませんね。
「ハイパーテキスト？マークアップ言語？表現する…？」と、なんだか抽象的で難しく感じてしまいます。
なのでここでは、もっとイメージしやすいように、HTMLの役割を“家”にたとえて説明してみましょう。
1. はじめに
「在宅で働くために、Web制作を学びたい！！」
そんな思いで、自分なりにいろいろ調べて勉強を始めてみたけれど、出てくるのはカタカナや英語の専門用語ばかり…。
そのまま挫折してしまった、という方は少なくないかと思います。
最近ではAIの進化も目覚ましく、今やAIに任せてWebサイトを作ることも可能な時代になりました。
もしかすると、「もうHTMLやCSSなんて勉強しなくてもいいのでは？」と感じるかもしれません。
でも私は、だからこそHTMLやCSSの基礎知識くらいは身につけておくべきだと考えています。
なぜなら、基礎がなければAIも上手に使いこなせないからです。
少したとえ話をしましょう。
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の役割を“家”にたとえて説明してみましょう。