【CSS初心者向け】styleタグでHMTLにCSSを直書きする方法を解説！メリットとデメリットも紹介
プログラミング学習やWebサイト制作をしている時に、
「CSSを直接HTMLに書き込む方法を知りたい」
「わざわざCSSの外部ファイルを作るのが面倒…」
と思ったことはありませんか？
そこで今回は、HTMLのstyleタグを使ってCSSを直接書き込む方法を解説します！
この記事を読んでわかる内容は以下の通りです。
- CSSをHTMLに直接書き込むstyleタグの使い方
- styleタグのメリットとデメリット
作業効率を上げたい方や、読み込みスピードを向上させたい方にCSSの直書きはおすすめ！
メリットだけでなく、デメリットも解説しますので、自分に合っている手法か判断したい方にぜひ読んでいただきたい内容となっています。
＼プログラミングスクールを比較／
|
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 |
HTMLのstyleタグを使って直接CSSを書き込む方法
CSSを、HTML内に直接書き込みたいといった場合には、styleタグを使用します。
styleはHTML属性の一つで、以下のように記述します。
<!-- HTMLコード -->
<style>
p {
color: blue;
font-size: 24px;
}
</style>
<body>
<p>styleタグ内に直接CSSを書き込んでいます。</p>
</body>▼ブラウザ表示▼
styleタグの記述方法について、もっと詳しく知りたい！という方は、以下の記事が参考になります。
【参考コード付き】htmlにstyleを直書きする方法について解説
ちなみに、タグに直接属性としてスタイルを指定する「インライン」に書く方法もあります。
<!-- HTMLコード -->
<body>
<p style="color:red; font-size: 24px;">styleタグ内に直接CSSを書き込んでいます。</p>
</body>▼ブラウザ表示▼
インラインに直接CSSを書き込む場合、複数のスタイルを指定することも可能です。
繋げて記述すると見づらくなってしまうため、「color:red; font-size: 24px;」のように半角スペースで区切りましょう。
styleタグを使ってCSSを直書きするメリット、デメリット
わざわざ外部CSSファイルを用意する必要がないので、便利なstyleタグですが、良い面ばかりではありません。
HTML内にCSSを直書きするメリットとデメリットを以下で紹介しますので、自身の学習や制作物に合っている手法かどうかの判断材料として参考にしてください。
メリット
sytleタグを使用するメリットは、主に以下の2つ。
- 通信コストが減るため、パフォーマンスが向上する
- 外部CSSファイルを作る手間がない
- どこの要素のCSSかがすぐにわかる（インラインの場合）
外部ファイルを通さずに、1つのリクエストでHTMLスタイルをまとめて送ることになるため、通信コストを削減できます。
通信にかかる時間や労力が削減されることで、表示速度や処理能力が向上します。
また、インラインでの記述の場合、各要素にCSSを指定するため「このクラス名はどの要素につけた名前だっけ？」などという問題も発生しません。
デメリット
sytleタグを使用するデメリットは、主に以下の2つ。
- コードが複雑になる
- メンテナンスが複雑になる
- 1ページずつコーディングしなければならない
HTMLのみでCSSも管理するため、コードがどうしても長くなりがちなのが最大のデメリット。
コードが長くなる分、問題が発生した時に原因を見つけるのが大変です。
また、classやidで管理する外部CSSの場合、重複する部分は一箇所のみの修正で済みますが、一つずつ記述しているstyleタグの場合は、全ての箇所をコーディングし直さなければならないため手間がかかります。
CSSのメディアクエリをHTMLに直書きする方法
画面サイズに応じて表示されるCSSを変更できるメディアクエリ。
レスポンシブ対応に欠かせない機能で、CSSに記述するのが基本です。
しかし、メディアクエリにおいてはsytleタグでの直書きができません。
つまり、以下のような記述はNGということなので、注意しましょう。
<div style=”media(max-width: 767px){}”><div>メディアクエリの正しい指定方法は、以下の通りです。
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
<link rel="stylesheet" href="medium.css" media="screen and (min-width:768px) and (max-width:1024px)">
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">
以下のように、CSSに直接記述することも可能です。
/* CSSコード */
@media all and (min-width:480px) {
.container{
/* 480px以上に表示されるCSSを記述 */
}
}
@media all and (min-width:768px) and (max-width:1024px) {
.container{
/* 768px以上1024px以下に表示されるCSSを記述 */
}
}
@media all and (min-width:1024px) {
.container{
/* 1024px以上に表示されるCSSを記述 */
}
}外部ファイルのCSSにメディアクエリを記述した場合には、必ず、以下のHTMLコードも記述しましょう。
レスポンシブ対応のWebサイトを制作する際に、重要なmetaタグとなります。
<meta name="viewport" content="width=device-width, initial-scale=1">直書きより外部ファイルCSSを読み込んで利用する方法がおすすめ
今回は、HTMLにCSSを直書きする方法とstyleタグを使用するメリットデメリットを解説しました。
以下は、この記事のまとめです。
- CSSをHTMLに直書きするにはstyleタグを使用する
- style属性として「インライン」に書き込む方法もある
- styleタグの使用はページ数や使用目的に応じて決める
簡易的な１ページのみのWebサイトや、勉強用にちょっとCSSを書いてみたいなどといった場合は、styleタグを使用してCSSを直書きするのも良いでしょう。
しかし、ページ数が多い場合や、複雑なコードを記述する必要がある場合は、直書きではなく、外部CSSファイルを作成してHTML内で読み込むのが最適です。
Webサイトの用途や目的などに応じてCSSの書き方を使いわけましょう。
＼プログラミングスクールを比較／
|
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 |
