HTMLとCSSで何ができるのか、最初の全体像 | デジタルラボ金沢

HTMLとCSSの関係は、HTMLが「これは見出しです」「これは写真です」と意味を付ける役、CSSが「その見出しを大きく赤く」と見た目を決める役、と覚えておくとほぼ間違いありません。

Web制作を学びはじめると、この2つは必ず最初に出てきます。ただ、それぞれが何を担当していて、どこまでできるのかがぼんやりしたまま進むと、「思ったとおりに表示されない」ときにどちらを直せばいいのか判断できなくなります。

逆に言えば、この役割分担さえつかんでおけば、細かい書き方は後からいくらでも調べられます。この記事では、暗記する前に持っておきたい全体像を整理します。

HTMLは「構造と意味」を書くもの

HTMLは、文章や画像に「これは何なのか」というラベルを付けていく言語です。たとえば同じ「金沢の観光案内」という文字でも、

ページの大見出しなのか
段落の中のふつうの文なのか
クリックすると別ページに移るリンクなのか

で、付けるラベルが変わります。この「ラベル付け」がHTMLの仕事です。

ここが大事なところで、HTMLは見た目を決める言語ではありません。たしかに大見出しにすれば文字は大きく表示されますが、それはブラウザが「大見出しなら普通このくらいの大きさだろう」と初期設定で表示しているだけです。見た目そのものを決めているわけではない、という感覚を最初に持っておくと後が楽になります。

もうひとつ、ラベルを正しく付けておくと、人間以外にも意味が伝わります。検索エンジンや、目の見えない方が使う読み上げソフトは、このラベルを手がかりにページの構造を理解します。「見た目を大きくしたいから大見出しにする」ではなく「実際に大見出しだから大見出しにする」と考えるのが、遠回りに見えて近道です。

CSSは「見た目とレイアウト」を決めるもの

CSSは、HTMLで付けたラベルを目印にして「この種類の要素はこう表示する」と指定していく言語です。担当するのは、たとえばこういう部分です。

色（文字色、背景色）
文字の大きさ、書体、行間
余白の取りかた
要素を横に並べるか、縦に積むか
画面幅に応じた表示の切り替え

ここで見落としがちなのが、CSSは見た目を変えるだけで、書いてある内容そのものは変えられないという点です。CSSで文字を消したように見せることはできますが、HTMLの中にはその文字が残っています。「表示を変えたい」のか「内容を変えたい」のかを分けて考えられると、直す場所を迷わなくなります。

CSSでできることの幅はかなり広く、アニメーションやちょっとした装飾も担当します。ただ、最初のうちは色・文字・余白・並べ方の4つで十分です。実際、ページの印象を大きく左右するのはこの4つで、凝った効果はその後でかまいません。

この2つだけでは足りない場面

HTMLとCSSでできるのは、あらかじめ用意しておいた内容を表示することです。ここに線があります。

たとえば「ボタンを押すと計算結果が出る」「入力内容によって表示が切り替わる」といった、その場の操作に反応して動く仕組みは、JavaScriptというもう1つの言語の担当になります。また、フォームに入力された内容をどこかに保存したり、メールで届くようにしたりするには、ブラウザの外側の仕組みが必要です。

とはいえ、この線を越えなくても作れるものはたくさんあります。自己紹介のページ、お店の案内、作品を並べたページ、イベントの告知——動的な機能がなくても成立するものは想像以上に多いです。まず1枚を完成させてから次に進むほうが、手応えが残ります。

言語の選びかたそのものについてはプログラミング言語は何から始めるか。目的から選ぶ考えかたでも触れています。

「思ったとおりに表示されない」ときの切り分け

学習中にいちばんつまずくのがここです。表示がおかしいとき、次の順で考えると原因にたどり着きやすくなります。

そもそも内容が出ていない → HTML側の問題であることが多い（閉じ忘れ、書き間違い）
内容は出ているが見た目が違う → CSS側の問題であることが多い（指定先が合っていない、別の指定に上書きされている）

ブラウザには、表示されているページの中身とCSSの指定を確認できる機能が付いています。名前は使うブラウザによって違いますが、右クリックのメニューから「検証」や「要素の調査」といった項目で開けることが多いです。ここを見ると、「自分が書いたCSSがそもそも届いていない」のか「届いた上で別の指定に負けている」のかがわかります。

エラーへの向き合いかた全般はエラーが出たときの調べかた・直しかたの基本にまとめました。HTMLとCSSはエラーメッセージが出ないまま静かにずれることがあるぶん、この「切り分ける癖」が効いてきます。

まとめ

HTMLは「これは何か」を示す役、CSSは「どう見せるか」を決める役
HTMLで見た目を作ろうとせず、意味に合ったラベルを付けるほうが後が楽
CSSはまず色・文字・余白・並べ方の4つで十分
操作に反応して動く仕組みや、データを保存する仕組みは別の担当
表示がおかしいときは「内容が無い」のか「見た目だけ違う」のかで切り分ける

全体像がつかめると、あとは作りたいものを1つ決めて、必要なところだけ調べながら進められます。手を動かしているときに出てくる「これで合っているのか」という疑問は、誰かに聞けると一気に解けることが多いものです。デジタルラボ金沢では初心者からOK・一人一人が主役という考えかたでワークショップや勉強会を開いていますので、そういう場を探している方はお問い合わせからどうぞ。