FORMAT COMPARISON
HTML vs CSS
HTMLはWebページの構造と内容を記述し、CSSはその表示やレイアウトを指定します。競合する形式ではなく、通常は組み合わせて使います。
HTMLとCSS、どちらを選ぶ？
見出し・段落・リンクなど文書の構造にはHTML、色・文字・余白・配置などの見た目にはCSSを使います。役割を分けると内容とデザインを個別に保守できます。
HTML向き
Webページの構造記述・ブラウザへ配信する文書
- 見出し・本文・リンクなどの意味構造
- CSSやJavaScriptと組み合わせるWebページ
CSS向き
Webページの表示規則・レイアウトとデザインの管理
- HTMLから分けた色・文字・レイアウトの管理
- 複数ページで共通する見た目
基本情報を比較
HTMLとCSSの主な違いを確認できます。
| 項目 | HTML | CSS |
|---|---|---|
| 拡張子 | .html、.htm | .css |
| MIME Type | text/html | text/css |
| 主な用途 | Webページの構造記述・ブラウザへ配信する文書 | Webページの表示規則・レイアウトとデザインの管理 |
| 圧縮 | 該当なし | 該当なし |
| 開く方法 | ブラウザやテキストエディタで開きます。公開前は対象ブラウザで表示を確認します。 | テキストエディタで開き、HTMLとともにブラウザで表示を確認します。 |
| 書き出し・変換 | 用途に応じてPDFなどへ出力できますが、リンクや動的な機能は同じように残らない場合があります。 | CSS単体を配布用文書へ変換するものではありません。HTMLと組み合わせた出力では、変換先で表示を確認します。 |
用途別の選び方
作りたいものや使う場面から選べます。
見出し・本文・リンクなどの意味構造
Webページの構造記述・ブラウザへ配信する文書
HTML向きCSSやJavaScriptと組み合わせるWebページ
Webページの構造記述・ブラウザへ配信する文書
HTML向きHTMLから分けた色・文字・レイアウトの管理
Webページの表示規則・レイアウトとデザインの管理
CSS向き複数ページで共通する見た目
Webページの表示規則・レイアウトとデザインの管理
CSS向き確認ポイント 1
HTMLは文書の構造と意味を表す
使い分け確認ポイント 2
CSSはHTMLなどの文書に適用する表示規則を記述する
使い分け選ぶ理由を詳しく
- WebページではHTMLとCSSを組み合わせるのが一般的