CSSはインラインにも記述できる。CSSの3つの記述場所を解説

2023.01.31
cssはインラインにも記述できる

HTMLに装飾をする言語がCSSです。装飾するためにCSSをHTML内に記述する必要があります。
今回はCSSをHTMLに反映させるための記述方法について解説します。一般的には外部ファイルを読み込みますが、HTMLタグのインラインにも記述することができます。
それぞれの方法を理解し、適材適所で使い分けて、効率の良いCSSの記述を行いましょう。
おすすめの方法も紹介しますので、最後までご覧ください。

HTMLにCSSを反映させる3つの方法

CSSは、Cascading Style Sheetsの略であり、HTML(Hyper Text Markup language)を装飾する際に用いられる言語です。
HTMLに対して、CSSを割り当てるにはHTML内にその有無を記述しなければなりません。
ここでは、HTMLにCSSを反映させる3つの方法を紹介します。
CSSをHTMLに反映させる3つの方法は下記です。

  • インラインのstyle属性に書き込む
  • head内のstyle要素に書き込む
  • 外部ファイルを作成し、head内で読み込む

それぞれの方法を理解して、正しくCSSを記述しましょう。

インラインのstyle属性に書き込む

インラインとは、HTML内に「埋め込む」という意味があります。言葉のとおりライン(文章)のイン(中)ということであり、HTMLタグの中にCSSを書き込む方法です。

例えば、pタグ内の文字色を赤にしたい時は下記のコードのように記述します。

HTML
<p style="color: red;">HTML内に直書きしたよ</p>
htmlにスタイルを直書きした時の画像

style属性を記述する際は下記の記述が基本となります。

HTML
<p style=”プロパティ:値;”></p>

さらに、一つのHTMLタグに複数のstyleを記述したい時は、

HTML
<p style=”プロパティ:値; プロパティ:値;”></p>

それぞれのstyleの間に半角スペースを記述することで、複数のstyleを当てることができます。
複数のstyleを当てた時のコード例は以下です。

HTML
<p style="color: red; background-color: gray;">HTML内に直書きしたよ</p>
htmlに複数のスタイルを直書きした時の画像

3つ以上のstyleを当てることも可能です。

HTML
<p style="color: red; background-color: gray; border: 2px black solid;">HTML内に直書きしたよ</p>
htmlに3つ以上のスタイルを直書きした時の画像

これらのように、HTMLタグに直接書き込むことで、どのようなスタイルが適用されているかが一目瞭然です。これがHTMLに直書きするメリットになります。

headタグ内にstyleタグを用いてCSSを記述する

head内にstyleタグを作成して、CSSを当てることもできます。
まずはコードを紹介します。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <style>
        p{
            color: blue;
        }
    </style>
</head>
<body>
<p>headタグ内にstyleを記述したよ</p>
</body>
</html>
styleタグ内にスタイルを記述した時の画像

headタグ内でHTMLタグを指定して、プロパティと値を記述します。
複数のstyleを当てる場合は、下に並べます。

HTML
<head>
    <style>
        p{
            color: blue;
            background-color: darkgrey;
        }
    </style>
</head>
<body>
<p>headタグ内にstyleを記述したよ</p>
</body>
</html>
styleタグ内に複数のスタイルを描いた時の画像

headタグ内にstyleを記述する際は、idやclassを指定してstyleを割り当てることも可能です。

HTML
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <style>
        .green{
            color: green;
        }
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
<p class="green">クラスを指定するよ</p>
<p id="pink">idを指定するよ</p>
</body>
</html>
styleタグ内でクラスやidを指定した時の画像

クラスを指定したい場合は、「.(ドット)」をクラス名の前に記述します。
idを指定したい場合は、「#(シャープ)」をid名の前に記述します。

クラスやidの名前はスペルを間違うと反映しないので、常に気をつける必要があります。

他にも階層を記述したり、擬似要素を記載したりすることも可能です。

HTML
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <style>
       div>p{
           color: red;
       }
       p:hover{
           color: royalblue;
       }
    </style>
</head>
<body>
<div class="container">
    <p>階層も記述できるよ</p>
</div>
<p>階層の外</p>
</body>
</html>
styleタグ内で階層を記述した時の画像

headタグ内に書くので、CSSを記述する際にスクロールを繰り返さなければなりません。
効率的にCSSを記述したいのであれば、headタグ内にCSSを記述する方法は向かないでしょう。

外部ファイルを作成し、CSSを読み込む

HTMLにCSSを読み込む3つ目の方法は、CSSファイルを外部に作成して、HTMLファイルで読み込む方法です。

headタグ内にlinkタグを用いてCSSを読み込みます。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p>外部ファイルを読み込むよ</p>
</body>
</html>
CSS(style.css)
p{
  color: green;
  background-color: yellow;
}
htmlに外部cssファイルを読み込んだ時の画像

をheadタグ内に記述してCSSファイルを読み込みます。rel=”stylesheet”は、「外部のCSSファイルを読み込みます」と宣言しているようなものであり、href=”style.css”は読み込みたいCSSファイルを指定しています。

hrefで外部CSSファイルを読み込む際には、ファイルの階層に注意を払う必要があります。同階層にファイルを置くことが多いですが、CSSファイルを一つのフォルダにまとめることもあるので、その都度確認を行いましょう。
CSSが反映されないのは、階層が間違っている可能性があることを覚えておきましょう。

CSSは外部ファイルで読み込むのが一般的

ここまでは、CSSをHTMLに反映させる方法を3つ紹介しました。
3つの方法の中でも、CSSを外部ファイルで作成してHTML内で読み込ませる方法が一般的です。

ここでは、なぜCSSを外部ファイルで読み込む方法が一般的であるかをメリット、デメリットを交えながら解説します。

インラインより外部ファイルを使用するメリット

CSSをインラインではなく、外部ファイルを読み込んでHTMLに反映させる方法を使うメリットとしては、下記の3つが挙げられます。

  • 他のHTMLページにも読み込ませることができる
  • メンテナンスがしやすい
  • SASSなどの拡張機能が使える

外部ファイルを使用するメリットが多いため、一般的に使用されています。
それぞれのメリットを解説します。

他のHTMLページにも読ませることができる

Webサイトを作成するときにページが1ページのみで構成されることはあまりありません。メインページの他にも企業情報やアクセスなど様々なページが作成されます。
このメインページと他のページには、ヘッダーやフッター、見出しなど装飾が共通する部分は多く存在します。
この時にCSSを外部ファイルで作成することで、共通部分の装飾を設定する必要はなくなるのです。
簡単な例を紹介します。2つのページのHTMLを一つのCSS外部ファイルで装飾します。

HTML(ページ１)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページ1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h2>ファイル１の装飾</h2>
<p class="example">段落をクラスで装飾</p>
<div class="container"></div>
</body>
</html>
ページ1の画像
HTML(ページ2)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページ2</title>
    <link rel="stylesheet" href=”style.css">
</head>
<body>
<h2>ページ2の装飾</h2>
<p class="page2">段落をクラスで装飾</p>
<div class="container">
    ページ2のブロック
</div>
</body>
</html>
ページ2の画像
CSS(style.css)
h2{
  color: red;
}
.example{
  color: grey;
  margin-top: 10px;
}
.container{
  width: 100px;
  height: 50px;
  background-color: cyan;
}
.page2{
  color: brown;
}

上記のように、1つのCSSファイルで2ページのHTMLを装飾することができました。
1つのファイルで複数のページを管理できれば効率は良いですが、CSSの記述量は増えるため、メンテナンスは複雑になりやすいことを覚えておきましょう。

メンテナンスがしやすい

CSSを外部ファイルで読み込むことにより、メンテナンスがしやすくなります。

CSSは一度作ったら終わりではなく、その後のメンテナンスは必須です。作った本人がメンテナンスをすることもありますし、他の人がメンテナンスをすることもあります。
CSSを外部ファイルで作成することで、クラス名を見つけることが容易になったり、共通するパーツの装飾を一括で変更できます。

CSSは保守性、拡張性が必要ですので外部ファイルで読み込む方法が一番良い方法であると言えます。

SASSなどの拡張機能が使える

CSSを効率的に記述するためにSASSを使うことがあります。

インラインにCSSを記述することはできますが、SASSなどの拡張機能を使うことはできません。
SASSは変数を指定できたり、コードを書くときに記述量を減らすこともできます。

Webサイトを制作する上ではよく使用される拡張機能になるので、CSSを外部ファイルで作成して、SASSなどを使用できる状態にしておくことをおすすめします。

外部ファイルを使用するデメリット

CSSの記述量が少ない場合、外部ファイルを使用するとWebサイトの表示速度が遅くなる可能性があります。
しかし、それ以上に外部ファイルを使用するメリットが大きいため、基本的にはCSSを外部ファイルで記述する方法をおすすめします。

CSSをインラインに書くメリットとデメリット

外部ファイルを使用した方法が良いということはわかりました。
しかし、CSSをインラインで書く方が良い場合もあります。ここでは、CSSをインラインで書くメリットとデメリットについて解説します。

CSSをインラインで書くメリット

CSSをHTMLタグ内で記述するメリットとしては、外部ファイルで装飾されたCSSを打ち消し、インラインで書いたCSSが優先されることです。
簡単なコード例で解説します。

HTML
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h2 style="color: red;">インラインが優先される</h2>
<p>外部ファイルのCSSが適用される</p>
</body>
</html>
CSS(style.css)
h2{
  color: blue;
}
p{
  color: green;
}
cssをインラインに書いた時に優先される画像

上記のh2には、インラインでCSSを記述しています。

外部ファイルでもh2へのCSSを記述していますが、インラインで記述したCSSが適用されていることがわかります。pタグにはインラインで記述をしていないため、外部ファイルのCSSが適用されています。

このように外部ファイル内で、ある一定の箇所だけスタイルを変更させないためにインラインでCSSを記述する方法が使用できます。絶対にスタイルを変更させたくない場所だけインラインでCSSを書く場合もあります。

CSSをインラインで書くデメリット

CSSをインラインで記述するデメリットは大きく分けて3つあります。

  • 一括で指定できない
  • 優先度が高いため、スタイルシートで変更できない
  • 擬似要素が使えない

上記のデメリットを理解した上で、CSSをインラインで記述するようにしましょう。それぞれ解説します。

一括で指定できない

例えば、HTML内のh2タグすべての文字色を赤にしたい時に、一括で指定することができません。インラインでCSSを記述する際はそれぞれのタグに対してstyleを記述する必要があります。

コード例を紹介します。

HTML
​​<body>
<h2 style="color: red;">h2を赤にします</h2>
<p>インラインCSSはそれぞれに指定が必要</p>
<h2 style="color: red;">h2を赤にします</h2>
</body>

h2それぞれにstyleを記述しなければなりません。外部ファイルでCSSを記述すれば、一括で指定できます。

HTML
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h2>h2を赤にします</h2>
<p>インラインCSSはそれぞれに指定が必要</p>
<h2>h2を赤にします</h2>
</body>
CSS(style.css)
h2{
  color: red;
}
外部cssファイルであれば一括でスタイルを指定できる画像

このように簡単に一括でスタイルを指定できます。インラインでCSSを記述してしまうと、記述が複雑になるので注意が必要です。

優先度が高いため、スタイルシートで変更できない

上記で、インラインでCSSを記述すると優先度が最も高くなると説明しました。そのため、外部ファイルでstyleを変更しようとしてもうまくいきません。

インラインのCSSを消去して外部ファイルに記載するか、外部ファイルにて!importantを指定することで外部ファイルのCSSを適用させることができます。
!importantでインラインのCSSの優先度を超えるコード例を紹介します。

HTML
<h2 style="color: red;">h2を赤にします</h2>
CSS
h2{
  color: blue !important;
}
importantを使用した時の画像

上記コードでは、インラインにCSSを記述していますが、外部ファイルのCSSに!importantを使用しているので外部ファイルのCSSが適用されます。!importantはどのスタイルよりも優先して適用されるので便利だと思われます。しかし、たくさんの!importantを使用してしまうと、どのスタイルが適用されているかの判別が難しくなるため、実際にコードを記述する際には使わないように心がけましょう。

擬似要素が使えない

インラインでCSSを記述する際は、hoverなどの便利な擬似要素を使うことができません。
今のWebサイトでは擬似要素を使うのは当たり前ですので、擬似要素が使えないインラインは使用されることが少ないです。

CSSをインラインに書く場面を解説

ここまで、インラインでCSSを記述する方法やメリット、デメリットについて解説しました。外部ファイルのCSSを使用した方がよいと述べましたが、インラインにCSSを書いた方が効率が良くなる場面もあるので簡単に紹介します。

インラインでCSSを記述する場面としては、

  • コードが単純な部分
  • ページ内で一回しか使わない装飾
  • 外部ファイルのCSSを打ち消したい時

実際に使用する頻度は非常に少ないですが、使い所だけでも知識として持っておきましょう。

コードが単純な部分

コードが単純な部分とは、例えば文章中の一部分の色のみを変更するspanタグが挙げられます。

Webサイトの1ページの中で一部分のみ変更するのであればCSSをインラインに書いても問題ありません。
簡単なコード例を紹介します。

HTML
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p>プログラミングを学ぶなら<span style="color: red;">DMM</span></p>
</body>
CSS(style.css)
p{
  color: blue;
}
インラインにcssを適用させた時の画像

上記では、DMMの部分のみをインラインで装飾しました。
このように一部分のみを装飾したい時などにCSSをインラインで書くことがあります。

ページ内で一回しか使わない装飾

Webサイトの中で一度しか使わない装飾は、インラインで記述しても問題ありません。しかし、後から変更する可能性がある部分については外部ファイルに記述した方が良いです。
インライン上にCSSを記述すると、どこにコードが書いてあるか探すのに手間がかかるからです。
今後変更しないであろう装飾はインラインで記述することもあります。

外部ファイルで記述されたCSSを打ち消したい時

すでに外部ファイルでCSSが反映されているWebサイトを改修したり、作り直す時にインラインにCSSを記述して、外部ファイルのCSSを打ち消すことがあります。
上記でも述べましたが、インラインのCSSはどのCSSよりも優先して表示されるため外部ファイルのCSSを打ち消し、装飾を変更できます。
簡単なコード例を紹介します。

HTML
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p>プログラミングを学ぶならDMM</p>
</body>
CSS(style.css)
p{
  color: blue;
}
外部cssのスタイルを打ち消した時の画像

上記の外部ファイルのCSSのコードを打ち消し、新たにインラインにCSSを記述します。

HTML
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p color:red;>プログラミングを学ぶならDMM</p>
</body>
インラインで打ち消して赤にした時の画像

外部ファイルでは青に装飾していた文字が、インラインでCSSを指定したことにより、外部ファイルのCSSは打ち消されました。
インラインにすることで、HTMLタグにどのような装飾をしているかがわかりやすくなるケースもあります。

基本的にCSSをインラインに記述することは少ないですが、特徴や記述方法だけでも知っておくことをおすすめします。

HTMLにCSSを反映させる方法：まとめ

HTMLにCSSを反映させる方法3つを紹介しました。

  • インラインのstyle属性に書き込む
  • head内のstyle要素に書き込む
  • 外部ファイルを作成し、head内で読み込む

それぞれの記述方法や特徴を理解し、使い分けてください。

ほとんどの場合は外部ファイルを作成してCSSを記述することになりますが、一部ではインラインでCSSを記述することもあります。その時に混乱しないように、ポイントだけでも本記事で抑えておいてください。
CSSの正しい反映の方法を理解し、キレイなWebサイトを制作しましょう。

関連記事

  • タイピング

    Ruby入門を決めた人がするべきことやおすすめの学習サイトを紹介！

    2023.01.31
  • リセットcss

    【リセットCSSとは？】７つのリセットCSSを比較検証！

    2023.03.29
  • 疑似クラスnth-childの使い方まとめ

    【CSS】疑似クラスnth-childの使い方やnth-of-typeとの違いを解説

    2023.02.23
  • HTMLで図形を描くCanvas要素を紹介

    【初心者向け】HTMLで図形を描くCanvas要素を紹介

    2023.01.29

    • 資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2023 WEBCAMP MEDIA Powered by AFFINGER5