02. HTMLとCSSの役割

この章では、HTMLとCSSの役割を整理します。

HTMLとCSSはいつも一緒に使うため、最初は混ざって見えるかもしれません。

しかし、担当している仕事ははっきり違います。

HTMLはページの情報と構造を作ります。

CSSは、その構造を見やすく整えます。

HTMLの役割

HTMLは、ページの中に何があるかを表す言語です。

見出し、本文、画像、リンク、リスト、フォームなどをHTMLで書きます。

たとえば、次のHTMLを見ると、サービス紹介のまとまりだとわかります。

HTML

<section>
    <h2>サービス内容</h2>
    <p>Webサイト制作と公開後の更新サポートを行います。</p>
    <a href="/service/">詳しく見る</a>
</section>

ここでは、sectionでまとまりを作り、h2で見出し、pで本文、aでリンクを表しています。

この段階では、色や余白は決めていません。

HTMLでは、まず情報の意味と順番を整理します。

CSSの役割

CSSは、HTMLで作った構造に見た目を付ける言語です。

文字サイズ、色、余白、背景、横並び、カードの形などをCSSで指定します。

CSS

section {
    padding: 40px;
    background-color: #f7f7f7;
}

h2 {
    font-size: 28px;
}

a {
    color: #005bac;
    font-weight: 600;
}

CSSを書くことで、HTMLの意味を変えずに見た目だけを調整できます。

同じHTMLでも、CSSを変えれば印象を大きく変えられます。

役割を分ける理由

HTMLとCSSの役割を分けると、修正しやすくなります。

たとえば、見出しの文字サイズを変えたい時に、HTMLを書き換える必要はありません。

CSSのfont-sizeを変更すれば済みます。

逆に、HTMLに見た目の都合を混ぜすぎると、あとから修正しづらくなります。

避けたい例は次のような書き方です。

避けたいHTML

<h2>サービス内容</h2>
<br>
<br>
<p><strong>Webサイト制作と公開後の更新サポートを行います。</strong></p>

brを増やして余白を作ったり、太字にしたいだけでstrongを使ったりすると、HTMLの意味が崩れます。

余白はCSSで作り、strongは本当に強調したい言葉に使います。

HTMLで決めること

HTMLで決めるのは、情報の意味と構造です。

たとえば、次のようなことをHTMLで表します。

どこがページの見出しか
どこが本文か
どこがリストか
どこがリンクか
どこがフォームか
どこがナビゲーションか
どこがメインコンテンツか
どこが補足情報か

HTMLが整理されていると、CSSも書きやすくなります。

また、検索エンジンやスクリーンリーダーにもページの構造が伝わりやすくなります。

CSSで決めること

CSSで決めるのは、見た目と配置です。

たとえば、次のようなことをCSSで指定します。

文字サイズ
文字色
背景色
余白
横幅
並び方
枠線
角丸
影
アニメーション
スマホ表示での変更

CSSは見た目を自由に整えられる反面、書き方が散らかると管理が難しくなります。

最初から完璧な設計は必要ありませんが、どの要素にどのスタイルを当てているかを意識して書きます。

JavaScriptとの違い

Webページでは、HTML、CSS、JavaScriptを一緒に使うことがあります。

役割を分けると、次のようになります。

技術	役割
HTML	情報の構造を作る
CSS	見た目を整える
JavaScript	操作に応じて状態や表示を変える

たとえば、アコーディオンを作る場合、見出しや本文の構造はHTML、開閉時の見た目はCSS、クリックした時の動きはJavaScriptが担当します。

ただし、HTMLのdetailsとsummaryだけで表現できるアコーディオンもあります。

何でもJavaScriptで作るのではなく、HTMLとCSSでできることを先に考えると、シンプルに作れます。

この章のまとめ

HTMLはページの情報と構造を作る
CSSはHTMLの構造に見た目を付ける
余白や色などの見た目は、HTMLではなくCSSで調整する
HTMLとCSSの役割を分けると、修正しやすいコードになる
JavaScriptは、操作に応じて状態や表示を変える時に使う