HTML・CSS独学応援 3-4「CSSの適応方法」

今回は、HTMLファイルにCSSを適応する方法をご紹介します。

  1. style要素
  2. style属性
  3. 外部ファイルを読み込む

上記の3つの方法があります。

ほとんどの場合は、「3、外部ファイルを読み込む」の方法を使います。
なので、その部分を注目してください。

「1、style要素」と「2、style属性」は
おまけ程度の認識でOKです。


1、style要素

前回の記事「3-3 CSSを書いてみよう」では、この方法を使用しました。

<head>要素の中に、<style>要素を作って記入する方法です。

要素とは何かについては、こちらの記事で紹介しています。
リンク!!!!!!!!!!

2、style属性

HTMLの属性として、styleを付属する方法です。

属性については、こちらの記事で解説しています。
リンク!!!!!!!!!!!!

サンプルコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>CSSを書いてみよう</title>
    </head>
    <body>
        <h1 style="color:red;">れおの冒険</h1>
        <p>昔々あるところにレオというライオンがいました。</p>
        <P>れおのトレードマークは、赤いアロハシャツです</P>
        <p>管理人さんは、レオが大好きでした。</p>
        <a href="https://www.google.com/?hl=ja">Googleで調べる</a>
    </body>
</html>

<h1>れおの冒険</h1>
に対して、style属性を付けて、色を変更しています。

特徴

この方法はおすすめしません。

属性として記入したものにのみ、適応されないので
下記のような場合は、
すべてのものに書き込む必要があります。

    <body>
        <h1>れおの冒険</h1>
        <p style="color:red;">昔々あるところにレオというライオンがいました。</p>
        <p style="color:red;">れおのトレードマークは、赤いアロハシャツです</p>
        <p style="color:red;">管理人さんは、レオが大好きでした。</p>
        <a href="https://www.google.com/?hl=ja">Googleで調べる</a>
    </body>

<p>要素は複数存在しますが
全ての<p>タグに対して、属性を付ける必要があります。

修正の時には、すべての要素を確認して
変更していく必要があります。

手間なうえに、思わぬエラーの原因にもなります。

3、外部ファイルから読み込む

HTMLファイルと別に、CSSだけを書いたファイルを用意して
<limk> 要素で読み込みます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>CSSを書いてみよう</title>

        <link rel="stylesheet" href="sample.css">
    </head>
    <body>
        <h1>れおの冒険</h1>
        <p>昔々あるところにレオというライオンがいました。</p>
        <P>れおのトレードマークは、赤いアロハシャツです</P>
        <p>管理人さんは、レオが大好きでした。</p>
        <a href="https://www.google.com/?hl=ja">Googleで調べる</a>
    </body>
</html>

<head>の中に、CSSファイルとリンクするための
<link>タグを書きます。

<link>の書き方

<link rel="どんなファイルか" href="リンクファイルのある場所">

<link rel="stylesheet" href="sample.css">

rel属性は、読み込むファイルが、どんなファイルなのか記入します。

HTMLでは、ほとんどrel="stylesheet"しか使わないのでこのまま覚えてOKです。

href属性は、ファイルパスを書きます。

特徴

外部ファイルとしてCSSを作ると、
複数のHTMLに対して、同じCSSを使いまわすことができます。

webサイトの製作では、複数のページ作ります。
そのため、同じCSSを適応できる
「3、外部ファイルを読み込む」方法が一般的に使用されます。

まとめ

HTMLにCSSを適応する方法を3つ紹介しました。

  1. style要素
  2. style属性
  3. 外部ファイル

どの方法を使ってもOKですが
基本的には3の「外部ファイル」の方法を使いましょう。