はじめに

この記事はWebの基礎をおさらいカレンダー Advent Calendar 2022です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はCSSについて説明します！

CSSとは

Cascading Style Sheetsの略で、HTMLで表現された構造に色や大きさなどを指定して見た目を整えるための言語です。
CSSの基本構造は三つの要素から成り立ちます。

p {
  color: red;
}

上記を例に説明します。
最初のpの部分はセレクタと呼び、どの場所に対してスタイルを反映させるかを表します。
例では、p要素に対して、スタイルの反映を行います。

次にcolorの部分をプロパティと呼び、どんな変更を加えるのかを表します。
例では、文字色を変えるということになります。

最後にredの部分を値とよび、プロパティで変更する値を指定します。
redと指定されているので、赤色になります。

linkタグで読み込む方法
基本的に、構造とデザインを分けて管理したいので、別ファイルで読み込むこの手法が採用されるケースが多いです。
<link rel="stylesheet" href="hoge.css" のように
タグの中で、ファイルを指定することで読み込ませます。
styleタグを使って読み込む方法
特定のページに絞って、スタイルを読み込ませたい時にこの手法が使われることが多いです。
styleタグを作って、その中に直接cssを記載することで読み込ませます。

<style>
  p {
    color: blue;
    font-size: 10px;
  }
</style>

sytle属性を使用して読み込む方法
直接タグにstyleを指定します。
コードが読みづらくなり、また外部ファイルで共通設定したスタイルの設定よりも優先度が高くなるため、事故につながりやすいです。
<p style="color: blue; font-size: 10px;">ハローワールド</p>

CSSは比較的自由に記載できるので、変更内容が被ってしまうケースがあります。

共通ファイルで下記のようにpで囲まれた文字を赤色にすると指定していたとしても、直接<p style="color: blue;">hoge</p>となっていれば、青色で表示されます。

p {
  color: red;
}

この優先順位によって、事故が起こるケースもあるので、なぜか反映されないなどのケースに遭遇した時は
スタイルに優先順位があることを思い出しましょう。
 

以上、CSSについての説明でした！

Webの基礎をおさらいカレンダー Advent Calendar 2022でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！