CSSの基本と内部参照・外部参照

https://www.youtube.com/watch?v=DmN_yNTn03c&list=PLh6V6_7fbbo826OywSQ4mFCdAa2CuDx50&index=3

HTMLはそれ単体では、ウェブページの見た目を整えることはできません。例えばstrongタグを書いたら太字になりますが、どのブラウザーでも太字になるという保証はなく、あくまで「強調する」という意味しかありません。

そこで、見た目を制御するのがスタイルシートです。中でも使われているのが、「CSS(Cuscading Style Sheet)」です。

先に準備したHTMLに次のように追加してみましょう。

<p style="color: red">ともすた</p>

ここでは、属性として styleという属性を付加しました。この属性値としてスタイルシートを記述できます。次のように記述します。

すると、strongタグは赤色に変わりました。

CSSは、次のような書式で記述します。

プロパティ: 値

ここでは、文字の色を表すcolorプロパティをredに設定したので、赤になったというわけです。

プロパティにはさまざまな種類があり、例えば背景色を変えたい場合はbackground-colorプロパティを使います。

<p style="background-color: red">ともすた</p>

これで、今度は背景色が赤くなります。

また、複数のプロパティを組み合わせることもできます。その場合は、「セミコロン」で各プロパティを区切ります。

<p style="background-color: red; color: white">ともすた</p>

内部参照と外部参照

ここで設定した CSSは、そのタグにのみ適用されます。この書き方を「インラインスタイル」といいます。

しかし、例えばページ内の<p>要素は全部同じスタイルを適用したい場合は、<head>タグの中にスタイルを記述します。

まずは、<head>タグ内に <style>というタグを記述します。そして、その中に次のように記述します。

<head>
  <style>
    p {
        color: red;
    }
  </style>
</head>
…

次のような書式でスタイルを記述します。

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

セレクターとは、指定したいタグの名前などを指定します。ここでは、strongタグを対象と指定しています。このように、<head>タグ内に CSSを記述する方法を「内部参照」といいます。

外部参照

内部参照では、ページ内の各要素はスタイルを統一できますが、さらにウェブサイトの場合は複数のページがあり、それらを含めてすべてスタイルを統一したいことがあります。

そんな時は、CSSを別のファイルとして保存して、各HTMLファイルから読み込むことができます。

まずは、新しいファイルを作成しましょう。styleタグは不要です。

p {
  color: red;
}

このファイルを、style.cssなどのファイル名で保存しましょう。そして、HTML のheadタグからは次のようにリンクします。

...
<head>
  ..
  <link rel="stylesheet" href="style.css">
</head>
...

これで読み込むと、同じようにスタイルが適用されます。そしてこのファイルは、他のHTMLからもリンクして利用でき、CSSファイルを変更すれば全部のスタイルが更新されます。

CSSはこのように外部参照全体を、内部参照でページ内を、インラインで各要素と範囲を指定して調整していきます。

ともすたチャンネルに
チャンネル登録する