【CSS疑問解決】CSSってどこに書くの?HTMLにCSSを反映させる3つの方法

こんにちは。うめです。

CSSってよく聞くけれどなんだか書き方の紹介が色々あってよく分からない…結局どこに書くの!?と疑問に思った方へ。私も最初そうでした…。

突然HP作れと言われて、せっせとすべての要素に直書きしていて、HP制作中盤くらいで外部リンクやid・classでデザインの使い回しができることを知り、嬉しさ半分、今までの苦労を思い出し、がっくり…なんて事もありました。

なので、皆様にはそんな体験してほしくない！と思い、筆…もといキーボードを取りました。

本日は、CSSをHTMLに反映させる3つの方法があること、おすすめはどの方法なのかをご紹介します。

CSSを使う方法３つ

CSSをHTMLに組み込んで、デザインを反映させる方法は大きく3種類あります。

外部に別で作ったCSSファイルを読み込ませる
<head>の中に書く
要素に直書き

この3種類です。それぞれの方法をご紹介していきます。

方法① 外部に別で作ったCSSファイルを読み込ませる

これはもっともおすすめする方法です。

どういう方法なの？

link要素を使って<head>～</head>の中にCSSファイルが置いてある場所へのリンクを設置して呼び出すという方法です。

複数のHTMLで同じCSSを呼び出し、同じデザインを繁栄させることや、1つのHTMLで複数のCSSを呼び出すこともできます。

1つのHTMLで複数のCSSを呼び出すなんて必要ある？と思った方もいるかもしれません。

例えばスマホで見た時とパソコンで見たときのデザイン変えたいな～という時に、それぞれのCSSを1ファイルで書くと、なが～いCSSのファイルになってしまいますが、別で書いておけば修正が楽々になりますよ。

外部リンクからCSSを呼びだす方法と例

では、外部リンクからCSSを呼びだす手順をご紹介します。初心者の方は一見難しそう…と思ってしまうかもしれませんが、実はウルトラ単純だったりするのでご安心ください。

①HTMLファイルとCSSファイルを準備

まず、HTMLとCSSのファイルを1つずつ準備します。それぞれのファイルの作り方は省略しますね。

②HTMLの<head>～</head>の中にリンクを書く

次にHTMLファイル内にCSSへのリンクを書きます。

書く内容はこちら↓

<link rel="stylesheet" href="CSSのファイルの場所">

＜書き方例＞

<!DOCTYPE html>
<html lang="ja">
<head>
・・・・・
<link rel="stylesheet" href="./css/style.css">
・・・・・
</head>
<body>
・・・・・
</body>
</html>

これで外部のCSSを読み込んでHTMLにデザインを反映させることができます。

もし読み込めない場合は、CSSのファイルを置いている場所のパスが正しく書けていない場合が多いので確認してみてください。

方法② <head>の中に書く

どういう方法なの？

<head>～</head>の中にすべてのCSSを書いてしまおう。という方法です。

他のHTMLから読み込むことはできませんが、同じHTML内であれば書いたデザインをclassで他の要素に使いまわすことができます。

<head>内に書く方法と例

書き方は<head>内に<style>～</style>で囲んで書きます↓

<style>
ここにCSSを直接書き込める
</style>

＜書き方例＞

<!DOCTYPE html>
<html lang="ja">
<head>
・・・・・
<style>
  h1{
    color:#fff;
    background:#ef5d60;
    font-size:1.25em;
  }
</style>
・・・・・
</head>
<body>
・・・・・
</body>
</html>

この方法で1つのCSSで同じclassの要素に同じデザインが反映できます。HTMLメルマガにはこの方法でCSSが書かれていることが多いですね。

方法③ 要素に直書き

この方法はソースも長くなりますし、デザインも使いまわせないので普段使いにはあまりお勧めできません。本当にその部分だけ何かデザインを反映させたい時などには使うかもしれませんね。

どういう方法なの？

デザインを反映させたい要素の中にstyle属性を直接書くという方法です。要素そのものが適用先になるので今までのCSSのように｛｝で記入することはありません。

ちなみにこの方法がCSSの適用順では最強です。もし、他の方法でこの要素にCSSでデザインが適用されていても、この直接書いたデザインが優先されます。
※ただ、!importantを使用した場合はそちらが優先されます。（最強じゃないじゃん！…ごめんなさい…）

要素に直接書く方法と例

書き方は、要素の中に「style=” “」を書き、「” “」の中にCSSのデザインを書いていきます。

＜書き方例＞

<!DOCTYPE html>
<html lang="ja">
<head>
・・・・・
</head>
<body>
・・・・・
<h2 style="color:#fff; background:#ef5d60; font-size:1.25em;">
・・・・・
</body>
</html>

どこかのCSSでデザインが指定されているけれど、どこか分からない…けれども今すぐこのデザイン変えたい！なんていう緊急事態では重宝するかもです。