CSSをHTMLに埋め込みする方法を3つ紹介!優先順位についても解説

2021.09.15
css html 埋め込み
  • 「CSSを勉強したけれど、どうやってHTMLへ埋め込みをすればいいの?」
  • 「複数のHTMLでスタイル統一することはできる?」

そんな疑問を抱えていませんか?

今回は、CSSをHTMLに埋め込む方法を学びたいという方に向けて、

  • CSSの埋め込み方法とは?
  • どの方法を主に使えば良いのか?

について、解説していきます。

この記事を読めば、CSSとHTMLを使いこなせるようになりますよ。ぜひ最後まで読んでくださいね。

CSSをHTMLに埋め込む方法は?3つ紹介

HTMLでは、Webサイトを構成する要素や情報などを記述します。

CSSを実装することで、HTMLで書かれた要素や属性値に対してデザインを適用することができます。

では、CSSはどのように実装すればよいのでしょうか?

CSSの実装方法は3つあります。

  1. link要素を用いて外部ファイルを読み込む
  2. head要素内に、style要素を記述する
  3. 要素のタグ内に直接記述する

それぞれについて、詳しく説明していきますね。

link要素を用いて外部ファイルを読み込む

まずは、外部ファイルを用意する方法を紹介します。

外部ファイルを読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSを読み込む方法</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>初心者のためのCSS</p>
</body>
</html>
CSS
body {
background-color: #ccc;
}
p {
font-size: 20px;
color: red;
}

HTMLファイルとは別に、スタイルシートを記述したCSSファイルを用意し、HTMLに読み込みます。

head要素の中でlinkタグを使用すると読み込むことができます。

HTMLにCSSを適用させる場合、基本的にはこの方法を用いてWebサイトを作成します。

スタイルシートを1つ作っておけば、複数のHTMLファイルで利用できるため、スタイルの統一や書き換えが容易になりますね。

ただ、1つのHTMLファイルにのみ適用させたいという場合もあるでしょう。

そちらの方法も紹介していきます。

head要素内に、style要素を記述する

外部ファイルを作らず、内部に書き込む方法としてhead要素内に記述するものがあります。

style要素を記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSを読み込む方法</title>
<style type="text/css">
body {background-color: #ccc;}
p {font-size: 20px; color: red;}
</style>
</head>
<body>
<p>初心者のためのCSS</p>
</body>
</html>

head要素内にstyle要素を付け加えます。

CSSであることをブラウザに知らせるためにtype属性を指定していますが、初期値が「text/css」なので、これは省略可能です。

style要素で記述する方法は、1つのHTMLファイルにしか適用できませんが、このファイルでしか使わない場合には有効です。

先ほどの外部ファイルを読み込むlink要素の後に記述すると、その情報だけが上書きされます。

他のデザインはそのままなので、このページだけ見出しの色を変えたい、というときにも使えます。

要素のタグ内に直接記述する

要素のタグにstyle属性を追加すると、その要素にのみスタイルを適用することができます。

タグ内に直接記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSを読み込む方法</title>
</head>
<body>
<p style="font-size: 20px; color: red;">初心者のためのCSS</p>
</body>
</html>

1つの要素にしか適用されないため、一般的にあまり使わない方法です。

ページごとではなく、要素の中でも特定のタグにのみデザインを適用したい場合に使用します。


アプリケーションWEBサービス作成に興味のある方へ!
DMM WEBCAMP】は、独学では挫折率の高いプログラミング学習を徹底サポートします。
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔基礎知識をゼロから丁寧に学習できるコースを用意!

あなたに合ったカリキュラムを紹介

まとめ:基本的には外部ファイルを使用するのがおすすめ

ここまで、HTMLにCSSを埋め込む方法として、3つ紹介してきました。

初心者の方で、どの方法にするか迷っている場合には、外部ファイルを作成する方法をおすすめします。

外部ファイルを1つ作成すれば、複数のHTMLファイルで使用できますし、各ページのカスタマイズも容易にできます。

外部ファイルを読み込んだ後に、style要素などの記述をして、スタイルの情報を上書きすれば、ページごとの細かい設定ができます。

最初にデザインが複雑なWebサイトを作ることはないでしょうから、まずは外部ファイルでCSSを作ると良いでしょう。

Webサイトを作成する上で、今回の記事が少しでも参考になれば幸いです。


未経験からホームページWEBアプリケーションが作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎実践的なスキルが身に付くカリキュラムを用意!
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能!
✔通学不要!スキマ時間でプログラミング学習ができる!

生活スタイルに合わせて選べる3コース

関連記事

資料請求

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

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

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

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

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

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

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5