HTMLにおけるCSSとは何か（サンプル付き）

HTML の CSS とは何ですか (例付き)?

ウェブサイトを魅力的に見せるためには、美しいデザインは欠かせません。HTMLだけでウェブサイトを作成することもできますが、見栄えを整えたり、より洗練されたデザインにしたりするには限界があります。そこで登場するのがCSSです。

CSSとは？

CSSは「Cascading Style Sheets」の略で、日本語では「カスケーディングスタイルシート」と呼ばれます。HTMLで記述された文書構造に対して、色、サイズ、配置などを指定することで、ウェブサイトの見た目を自由にデザインするための言語です。

HTMLがウェブサイトの骨組みを作るのに対し、CSSはその骨組みに対して色を塗ったり、装飾を施したりする役割を担っています。HTMLが文章構造を定義するのに対し、CSSは視覚的な構造とレイアウトを担当します。HTMLがマークアップ言語であるのに対し、CSSはスタイルシート言語です。

CSSを使用することで、ウェブサイトのデザインを細かく制御することができます。具体的には、以下のようなことができます。

CSSは、HTMLファイルとは別に記述するのが一般的です。CSSファイルをHTMLファイルに読み込むことで、CSSのスタイルがHTMLに適用されます。

CSSの基本的な記述方法は以下の通りです。


セレクタ {
  プロパティ名: 値;
}

例えば、以下のHTMLコードで記述された段落に、CSSでスタイルを適用してみましょう。


<p>これは段落です。</p>

この段落の文字色を青、フォントサイズを20pxに変更したい場合は、以下のようにCSSを記述します。


p {
  color: blue;
  font-size: 20px;
}

このCSSをHTMLファイルに適用すると、段落の文字色が青、フォントサイズが20pxに変更されます。

HTMLとCSSの違いを以下の表にまとめます。

CSSは、HTMLと組み合わせて使うことで、ウェブサイトのデザインをより魅力的にすることができます。基本的な記述方法をマスターすれば、比較的簡単にウェブサイトのデザインを変更できるので、ぜひ積極的に活用してみてください。