CSSをHTMLに埋め込みする方法を3つ紹介！優先順位についても解説
- 「CSSを勉強したけれど、どうやってHTMLへ埋め込みをすればいいの？」
- 「複数のHTMLでスタイル統一することはできる？」
そんな疑問を抱えていませんか？
今回は、CSSをHTMLに埋め込む方法を学びたいという方に向けて、
- CSSの埋め込み方法とは？
- どの方法を主に使えば良いのか？
について、解説していきます。
この記事を読めば、CSSとHTMLを使いこなせるようになりますよ。ぜひ最後まで読んでくださいね。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSをHTMLに埋め込む方法は？3つ紹介
HTMLでは、Webサイトを構成する要素や情報などを記述します。
CSSを実装することで、HTMLで書かれた要素や属性値に対してデザインを適用することができます。
では、CSSはどのように実装すればよいのでしょうか？
CSSの実装方法は3つあります。
- link要素を用いて外部ファイルを読み込む
- head要素内に、style要素を記述する
- 要素のタグ内に直接記述する
それぞれについて、詳しく説明していきますね。
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>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要素内に記述するものがあります。
<!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つの要素にしか適用されないため、一般的にあまり使わない方法です。
ページごとではなく、要素の中でも特定のタグにのみデザインを適用したい場合に使用します。
プログラミングやパソコンを使って働きたい！
そのように考え、成長しているIT業界への転職を考えている方も増えてきました。
『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』
反対にこのような声も聞く事があります。
そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！
まとめ：基本的には外部ファイルを使用するのがおすすめ
ここまで、HTMLにCSSを埋め込む方法として、3つ紹介してきました。
初心者の方で、どの方法にするか迷っている場合には、外部ファイルを作成する方法をおすすめします。
外部ファイルを1つ作成すれば、複数のHTMLファイルで使用できますし、各ページのカスタマイズも容易にできます。
外部ファイルを読み込んだ後に、style要素などの記述をして、スタイルの情報を上書きすれば、ページごとの細かい設定ができます。
最初にデザインが複雑なWebサイトを作ることはないでしょうから、まずは外部ファイルでCSSを作ると良いでしょう。
Webサイトを作成する上で、今回の記事が少しでも参考になれば幸いです。
知っていますか？IT業界は市場価値が高まっています！市場価値の高い業界で働くことで、現在より年収UPが可能です。
また、 ITスキルを身につけることで、どの業界でも必要とされる人材に成長できます！
【DMM WEBCAMP】のプログラミングスクールでは、未経験から最短3ヶ月でエンジニアとして転職が可能です。
DMM WEBCAMPでは転職成功率９８％の転職コースを複数提供しています
✔︎︎︎企業が本当に求めるビジネススキルを優先的に取得可能！
✔︎︎︎︎キャリアカウンセラーとメンターがあなたの転職活動とスキル獲得を両面サポート‼
✔︎︎︎紹介可能企業は６００社以上！？
IT業界に転職したい方はぜひご覧ください！
「なんか今の仕事合わないな・・・」
「IT業界に転職してみたいなぁ・・・」
という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか？
「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です！
WEBCAMPの卒業生は転職後に年収もUP！（例：年収250万円→500万円）
しかも今なら受講料の最大70%が給付金として支給されます。
DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
