ホームページのコードと聞くと、英語や記号がびっしり並んでいて、自分にはとても無理だと感じる方が多いと思います。私自身もパソコン初心者からのスタートでしたので、その気持ちはよくわかります。
ただ、少しずつ勉強してみると、仕組みそのものはとてもシンプルでした。今日は、私が学んで「なるほど」と思ったことを、順番にお伝えします。ホームページを業者に任せている方も、これを知っておくと、自分のサイトが今どうなっているのかが見えてきます。
ホームページは「人」と「化粧」でできている
ホームページは、大きく2つの部品でできています。ひとつが「HTML」、もうひとつが「CSS」です。
HTMLは、人そのものです。頭があって、体があって、手や足がある。この「骨組み」を作るのがHTMLです。
CSSは、その人にほどこす化粧です。同じ人でも、口紅の色や服の色を変えると、ずいぶん印象が変わります。文字を大きくしたり、色を赤くしたり、見た目を整える役目がCSSです。
つまり、中身の並びがHTML、見た目の飾りがCSSです。この2つが組み合わさって、1枚のページになります。まずはこの2人組を覚えておくと、あとの話がすっと入ってきます。
「タグ」は最初からついている名札
HTMLの中には「タグ」というものが出てきます。むずかしそうな言葉ですが、正体はただの名札です。
「ここは見出しですよ」「ここは普通の文章ですよ」「ここは画像ですよ」。そうやって、それぞれの場所に最初から名札がついています。見出しには見出しの名札、文章には文章の名札、という具合です。
お弁当箱にたとえると、「ごはん入れ」「おかず入れ」と最初から書いてある、種類のラベルです。これがタグです。自分で用意しなくても、最初からついているところがポイントです。
「クラス」は自分で貼るシール
タグと似た言葉に「クラス」があります。この2つはよく混ざってしまいますが、役割はまったく別です。
クラスは、自分で後からペタッと貼るシールです。「この見出しと、あの見出しを、同じ飾りつけにしたい」というとき、両方に同じシールを貼っておきます。すると、そのシールがついた場所だけ、まとめて同じ化粧にできます。
最初からついている名札がタグ、自分で貼るシールがクラスです。ここを分けて考えられるようになると、コードがぐっと読みやすくなります。私も最初はこの2つが頭の中で絡まっていましたが、名札とシールに分けたら、すっきりしました。
コードの1行は「どこに・何を・どうする」の注文票
最後に、飾りつけをするCSSの1行の読み方です。たとえば、こんな1行があります。
h2 { font-size: 24px; }
記号が多くて身構えてしまいますが、これは注文票だと思ってください。書いてあることは、たった3つです。
- どこに → 見出し（h2）に
- 何を → 文字の大きさを
- どうする → 24の大きさにする
つなげて読むと、「見出しの文字を、24の大きさにしてください」という注文です。それだけです。どんなに長いコードが並んでいても、この「どこに・何を・どうする」の3つに分けて読めば、こわいものではありません。
まとめ
- HTMLは人そのもの、CSSはその人にほどこす化粧です
- タグは最初からついている名札、クラスは自分で貼るシールです
- コードの1行は「どこに・何を・どうする」の注文票です
むずかしそうに見えるコードも、こうしてひとつずつ言葉にほどいていけば、必ず「わかる」ところまでたどり着けます。私はいつも、この「身近なものにたとえてほどく」やり方で、パソコンが苦手だった方にもお伝えしています。
すべてを自分で書けるようになる必要はありません。ほんの少し読めるだけで、自分のホームページが今どうなっているのかがわかり、安心して付き合えるようになります。
skymotherのホームページ講座では、こうした基本の一つひとつを、専門用語を使わず、あなたのペースでお伝えしています。今日の「名札とシール」のように、つまずきやすいところほど、身近なたとえに置きかえて、腑に落ちるまで一緒に進みます。「自分のホームページを、自分の手で育てられるようになりたい」という方は、講座のご案内をのぞいてみてください。
▶ ホームページ講座のご案内