CSS

CSSの役割と記述場所

みいと

HTMLとCSSの役割

CSSの使い方に入る前に、今回はHTMLとCSSについてまとめておきます。

HTMLの役割

これまでの記事でもまとめていますが、HTMLの役割は文書構造を定義することです。

HTML4.01まではHTMLにも色を付けるなどの装飾を目的とした要素や属性などがありました。

しかしHTMLの役割は文書構造の定義なので、HTML5では装飾目的の要素や属性は廃止されています。

実際には廃止された要素や属性を使用してもブラウザには反映されますが、正しいHTMLではないので使用するのはやめましょう。

CSSの役割

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、文書の見栄えを定義する役割を持っています。
単純にスタイルシートと呼ぶこともあります。

HTML5で廃止された装飾目的の要素や属性に関しては、CSSを使用して対応することができます。

ポウ
ポウ
見栄えの設定はスタイルシートで行うようにしましょう。

CSSの記述場所

CSSの記述場所は3つあります。

  • 外部スタイルシート
  • style要素
  • style属性

CSSは外部スタイルシートに記述する

CSSは外部スタイルシートに記述するのが一般的です。

外部スタイルシートとはCSS用のファイルを作成して、そのファイルをHTMLから読み込む手法です。

サイト全体で共通のCSSファイル(外部スタイルシート)を使用することで、見栄えの設定を一括して管理することができるので、サイト全体に統一感がでます

サイトのデザインを変更したくなった場合も、CSSファイルを修正するだけでデザインをまとめて変更できます。

外部スタイルシート

一方、style属性は要素ごと、style要素はHTMLファイルごとの記述になります。
いずれも各ファイルごとにCSSを書いていく必要があるのでとても大変です。

CSSの役割と記述場所のまとめ

今回はCSSの役割と記述場所などについてまとめました。

次回はCSSの記述方法をまとめていきます。

まとめ

  • HTMLは文書の構造、CSSは見栄えを定義する
  • CSSの記述場所は3つあるが外部スタイルシートを使用するのが一般的
  • 外部スタイルシートを使用するとデザインに統一感が出る

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました