本講座では、styleタグとそれを使った装飾について学んでいきます。

なお、style属性とstyleタグ(要素)が連続して出現する場所では、混乱を避けるために以下のように表記を変更します。

  • styleタグ(要素) = <style></style>
  • style属性 = style=""

styleタグとは?

styleタグはCSSを記述できる専用のタグです。
styleタグはhead要素の中に配置します。

styleタグを使ってみよう

styleタグを使ってHTMLを装飾してみましょう。

まずはじめに、現在のindex.htmlを確認してみましょう。

<!doctype html>
<html>
<head>
  <title>はじめてのHTML</title>
</head>
<body>
  <h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank">Googleへ</a>
</body>
</html>

装飾を行っているh1タグに注目してみます。

  <h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>

style属性を追加することで装飾を行っていますね。

表示も確認しておきます。

style属性で装飾

「はじめてのHTML」という見出し文字が赤色で表示されています。

これを、以下の手順でstyleタグを使って装飾するように変更していきます。

  1. head要素内にCSSを記述するための<style></style>を配置する
  2. h1タグのstyle=""を削除する
  3. <style></style>h1タグに対して装飾を行う

では行きましょう!

1. head要素内にCSSを記述するための<style></style>を配置する

<head>
  <title>はじめてのHTML</title>
  <style></style>
</head>

title要素の下に配置しました。

2. h1タグのstyle=""を削除する

  <h1>はじめてのHTML</h1>

ここで一度表示を確認してみましょう。

style属性を削除

見出しが何も装飾されていない、大きな黒文字に変わりました。

3. <style></style>h1タグに対して装飾を行う

<head>
  <title>はじめてのHTML</title>
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  </style>
</head>

h1 {}という初めて見る記述がありますが、先に正しく装飾されているか確認していきましょう。

styleタグで装飾

style=""で指定していた時と同じように、赤文字表示になっていれば完璧!です。

style要素の書き方

style属性は適応するタグに直接CSSを記述していましたが、style要素へ切り出すとどの要素に適応するかが不明になってしまいます。

このどの要素に適応するかh1 {}という記述です。

タグ { 装飾内容 }という書き方になっていて、該当のタグに装飾内容が適応されます。

装飾内容は複数になることが多いため、開始の波括弧{の後、終了の波括弧}の前に改行を入れいます。
装飾内容にはインデントをすることで見やすくなります。

class属性で要素を特定しよう

h1 {}のようにタグに対して装飾を行うのは少し問題があります。

例えば、index.html内の「Googleへ」のリンクに対して装飾をしたいとします。
以下のようにCSSを追加してみましょう。

  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  a {
    color: orange;
  }
  </style>

これで表示を確認すると、全てのリンクがオレンジ色になってしまいます。

タグで装飾

このように、タグに対する装飾は意図しないタグも装飾されてしまうため、別の方法で要素を特定する必要があります。
これを可能にするのがclass属性です。

では、「Googleへ」のリンクにclass属性とその値を設定しましょう。

  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>

「外部リンクだよー」という意味で"outsideLink"としてみました。
ここclass属性の値は基本自由に設定できます。 ※

次に、先ほど追加したCSSの記述を少し変更します。

  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  </style>

a {}という記述を.outsideLink {}に変更しました。

これで表示を確認してみます。

class属性の値で装飾

「Googleへ」のリンクだけがオレンジ色に変わりました!



class属性はCSSで使われることが大半のため、CSSの規約に沿う必要があります。
半角英字(a-z, A-Z)は問題なく使えるため、この範囲で値を決めると良いでしょう。

class属性の使い方

class属性の値をCSSで使用する場合は、値の前に.(ドット)を付けます。
"outsideLink"という値であれば.outsideLink {}となります。

style属性とstyleタグ

私たちは今、HTML装飾の方法としてstyle=""で行う方法と<style></style>で行う方法を知りました。
では、今後HTML装飾を行う場合はどちらを使うのが良いのでしょう?

今後は<style></style>を使うようにしましょう。
<style></style>を使うメリットを考えてみます。

styleタグを使うメリット

外部リンクをいくつか追加したいとしましょう。
あまり目立たせないように、フォントサイズも少し小さくします。
これをstyle=""で装飾を行うと

  <a href="https://www.google.co.jp/" target="_blank" style="color: orange; font-size: 10px;">Googleへ</a>
  <a href="https://www.yahoo.co.jp/" target="_blank" style="color: orange; font-size: 10px;">Yahooへ</a>
  <a href="https://gieer.tech/" target="_blank" style="color: orange; font-size: 10px;">Gieerへ</a>

こうなります。

外部リンクの文字色を変更したくなったり、フォントサイズを変更したくなったら、すべてのstyle=""の内容を書き換えなければいけませんね。
しかし<style></style>で装飾を行えば

  • head要素内
<style>
.outsideLink {
  color: orange;
  font-size: 10px;
}
</style>
  • body要素内
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
  <a href="https://www.yahoo.co.jp/" target="_blank" class="outsideLink">Yahooへ</a>
  <a href="https://gieer.tech/" target="_blank" class="outsideLink">Gieerへ</a>

head要素内の<style></style>の内容を書き換えるだけで、すべての外部リンクの装飾が変わります。
装飾の場所も<style></style>内にまとめられているので、すぐに見つけて変更ができます。 HTMLも少しですがすっきりしましたね。

まとめ

本講座では

  • styleタグの使い方
  • class属性の使い方
  • styleタグのメリット

について学びました。

CSSをstyle要素にすべて切り出したことで、HTMLとCSSの領域が分かれて理解しやすくなりませんでしたか?
それぞれの作業領域を分けるこの考え方は、今後のコーディングでも必ず活きてきます。
この感覚をしっかり掴みましょう!

最終コード

  • index.html
<!doctype html>
<html>
<head>
  <title>はじめてのHTML</title>
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  </style>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
</body>
</html>
  • link.html
<!doctype html>
<html>
<head>
  <title>はじめてのリンク</title>
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html>
<head>
  <title>HTML入門課題</title>
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...