CSS とは

Last updated at 2025-03-22Posted at 2025-03-22

CSSとは

Cascading Style Sheetsの略であるCSSは、HTMLだけでは実現しきれない豊かなデザインやレイアウトを可能にします。HTMLは基本的な構造を提供する一方で、CSSはフォントのスタイル、色、間隔、配置などの視覚的な要素をコントロールします。

↓HTMLとCSSの関係は以下がイメージしやすい。

HTMLを使うことで、壁や窓、床などの部屋の基本構造を作ることができますが、それだけでは味気なく、まだ「デザイン」がありません。
CSSを使うことで、壁紙を貼ったり、照明を設置したり、家具を配置したりと、より魅力的なデザインに仕上げることができます。

同様にデザインのないWEBページよりも、デザインされたWEBページのほうが訪れたくなりますよね!!

CSSは以下のようにセレクタ、プロパティ、値で構成される。

sample.css

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

以下のようなHTML単体でページを表示させた場合

sample.html

<p>これは青色の文字で表示される段落です。</p>

↓こうなる

この<p>タグのテキストをデザインする、以下のCSSを適用すると

sample.css

p {
  color: blue; /* 文字色を青にする */
}

↓文字が青くなる

前述のようにタグで指定するだけでなく、クラス属性で指定することもできる。以下のように<p>タグにクラス属性blue-textを付与する。

sample.html

<p class="blue-text">これは青色の文字で表示される段落です。</p>

sample.css

.blue-text {
    color: blue; /* 文字色を青にする */
}

このようにクラスを使用することで、特定の要素だけにスタイルを適用できる。
さらに、クラスを組み合わせて異なるデザインを適用することも可能で、例えば、font-large というクラスを追加し、フォントサイズを変更できる。

sample.css

.font-large {
    font-size: 20px; /* フォントサイズを20pxにする */
}

sample.html

<p class="blue-text font-large">この段落は青色で、フォントサイズが20pxになります。</p>

CSSは、HTMLで作成したウェブページのデザインやレイアウトを整えるための言語で、文字の色やサイズ、配置などの視覚的な要素を自由にカスタマイズできる。基本的な記述ルールとして、「セレクタ」「プロパティ」「値」の3つの要素から成り立っている。

タグ名で直接指定する方法のほか、クラスを利用して特定の要素だけにスタイルを適用したり、複数のスタイルを組み合わせたりできる。CSSを活用することで、より魅力的で使いやすいウェブページを作成できる。