HTMLは内容の「意味と構造」を表す
HTMLには、ページのタイトルとなる<h1>、文章を表す<p>、移動先を指定する<a>などがあります。単に文字を並べるのではなく、何の役割を持つ情報なのかを表します。
<main>
<h1>はじめてのWebデザイン</h1>
<p>目的から考える制作を学びます。</p>
<a href="/learn/">教材一覧へ</a>
</main>
CSSは情報の伝わり方を整える
CSSでは文字の大きさ、色、余白、並び方などを指定します。HTMLを意味に沿って組み立て、その上からCSSで見た目を調整するのが基本です。
h1 { font-size: 2rem; }
p { line-height: 1.8; }
a { color: #1657bb; }
よくある誤解
- 文字を大きくしたいだけで見出しタグを使う：見出しは文書の階層に沿って選び、見た目はCSSで調整します。
- ボタンのように見せれば何でも
divでよい：移動ならa、その場で処理を実行するならbuttonなど、目的に応じて要素を選びます。 - 空白を全角スペースで作る：余白はCSSの
marginやpaddingで制御するのが基本です。
ミニ演習
好きなサイトの見出しを上から読み、h1 → h2 → h3のように情報が自然な階層になっているか考えましょう。「このページは何を伝えたいのか」が先に分かることが大切です。