HTMLにCSSを直接書き込む方法とデメリットについて紹介します。
CSSスタイルを直書きすることで簡単にスタイルを反映させることができ、レスポンシブレイアウトの作成も可能。
でも注意しないと後から修正するのが大変なコードになってしまうのでデメリットと合わせて直書きがよくない理由や注意点についても紹介します
HTMLにCSSを直接書く3つの方法
CSSスタイルをHTMLファイルの中に書き込む方法には次のようなやり方があります。
- HTMLのStyleタグを使って直書きする方法
- HTMLタグのstyle属性を使って直書きする方法
- スタイル用のHTMLタグで直書きする方法
それぞれできること、できないことがあるので以下にまとめて紹介します。
HTMLのStyleタグを使って直書きする方法
よく使われるのがこの方法。<style>タグの中にCSSコードを書いてスタイルを作成する方法です。
書き方は次のようになります。
<!DOCTYPE html>
<html>
<head>
<title>Styleタグサンプル</title>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>赤色のH1タグ</h1>
<p>青色のテキスト</p>
</body>
</html>結果はこんな感じ。
styleタグ内には普通にCSSコードを書くことができます。<head>の中だけでなく、<body>内やコンテンツごとに分けて、Styleタグを複数作ることもできます。
<!DOCTYPE html>
<html>
<head>
<title>Styleタグサンプル2</title>
</head>
<body>
<style>
h1 {
color: red;
}
</style>
<h1>赤色のH1タグ</h1>
<style>
p {
color: blue;
}
</style>
<p>青色のテキスト</p>
</body>
</html>他にも、下の方で紹介しているようにレスポンシブレイアウトに必要なメディアクエリの記述も可能。
HTMLタグのstyle属性を使って直書きする方法
2つめの方法は、HTMLタグにstyleという属性をつけて直書きする方法です。
先ほどと同じCSSコードをstyle属性を使って書いてみると以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>Style属性サンプル</title>
</head>
<body>
<h1 style="color: #333; text-align: center;">赤色のH1タグ</h1>
<p style="font-size: 18px; color: #666;">青色のテキスト</p>
</body>
</html>Style属性はどのタグにも使えます。HTMLタグに対して直接書き込むことができるので、どのタグにどんなスタイルが当たってるかがわかりやすいというメリットもあります。
また、Style属性ではフォントサイズとカラーなど複数のプロパティを書くこともできるので、複雑なスタイルでも対応可能です。
ただし、注意点としては以下のようなものがあります。
- メディアクエリを使えないのでレスポンシブレイアウトを作れない
- :hoverや:beforeなどの擬似属性が使えない
詳しくはデメリットのところでまとめていますが、Style属性を使ったインラインCSSはかなり制限がきついので使い方は限定的です。
スタイル用のHTMLタグで直書きする方法
HTMLタグにはスタイルを作れるタグも用意されています。多くは非推奨になっているので現在はあまり使われませんが、一応ブラウザで表示することができます。
スタイル用のHTMLタグは以下のようなものがあります。サンプルコードと合わせて紹介します。
フォントスタイルをいじれるHTMLタグ
fontタグはフォントスタイルを指定できるもので、現在は一応表示できるものの非推奨となっています。
以下のような書き方ができます。結果はStyleタグなどで書いたものと同じようになります。
<h1><font face="Arial" size="5" color="red">赤色の文字</font></h1>
<p><font face="Verdana" size="3" color="blue">青色のテキスト</font></p>要素を中央揃えにするHTMLタグ
centerタグは要素をセンタリングするために使われるもの。こちらも表示はできますが非推奨となっています。
使い方は以下のようにセンタリングしたい要素を<center>タグで囲むだけ。
<center>
<h1><font face="Arial" size="5" color="red">赤色の文字</font></h1>
</center>文字を強調するタグ
タグで囲った文字を太字にしたり、斜体にしたりして強調できるHTMLタグがいくつかあります。
こちらは非推奨にはなっていないですが、やはりできるだけCSSで書くことをおすすめします。
<!-- strong -->
<p>strongで文字を<strong>太字</strong>にする</p>
<!-- i -->
<p>iで文字を<i>斜体</i>にする</p>結果はこちらのようになります。
文字に線を引くHTMLタグ
文字に取り消し線をつけたり、下線を引いたり、マーカーをつけたりすることもできます。
こちらは非推奨になっていないので普通に使用できますが、できればCSSで書きたいです。
<!-- u -->
<p>uで文字に<u>下線</u>をつける</p>
<!-- s -->
<p>sで文字に<s>取り消し線</s>をつける</p>
<!-- mark -->
<p>markで文字に<mark>マーカー</mark>をつける</p>結果はこちらのようになります。markタグで手軽にマーカー作れるので覚えておくと便利。
直書きは良くない？HTMLにCSSを直書きするデメリット
ここまでHTMLにCSSを直書きする方法を紹介してきましが、デメリットもいくつかあるのでまとめておきます。
デメリットはあとあと大変なことになりかねないものもあるので注意が必要です。
スタイルを一括で変更できない
CSSファイルなら1つのファイルを変更することでそれを読み込んでいるページ全てに適用できますが、HTMLに直接書いている場合、同じ変更でも全ページのCSSコードをチェックする必要があります。
数ページだけでも変更ミスがないか気を遣いながら作業する必要があるものを、数十ページや数百ページ書き換えるとなると想像するだけで頭が痛くなりますね。
SCSSを使えない
CSSを書く際に変数やネストなどを使える便利なSCSSですが、Styleタグやインライン属性でSCSSを使うことはでいきません。
とくにBEM記法のようなセレクタ名が長くなるような書き方をしている場合、いちいち全ての文字を入力しないといけないので大変です。
ただ、最近はCSSだけでもネストが使えるようになったり、CSS変数も使えたりと、徐々にSCSS的な書き方ができるようになってきてます。
直書きだとレスポンシブ化できない
Styleタグの場合はできますが、Style属性の場合はメディアクエリを使えないのでレスポンシブ対応できません。
またStyle属性では:beforeや:hoverのような擬似属性も使えないのでスタイル方法がかなり制限されています。
そもそも非推奨
スタイル用のHTMLタグを使う場合はほぼ非推奨なので基本的には使ってはいけません。
以前fontタグやStyle属性だけで作られたサイトのCSSを外部ファイル化してほしいと言われたのですが、デメリットを全て煮詰めた感じのコードでとにかく大変だったのを覚えてます。
さすがに最近はそこまで酷いサイトは減ってきてますが、あとあと被害を残さないためにも非推奨のタグは使わないようにしましょう。
直書きでレスポンシブデザインを作るには？
HTMLファイルにCSSを直接書く方法でレスポンシブレイアウトを作るにはStyleタグを使用する必要があります。
HTMLのstyle属性ではセレクタを書いたり、メディアクエリを書くことができないためです。
Styleタグなら通常のCSSと同じように記述できるのでレスポンシブレイアウトの作成も可能です。
CSS直書きでレスポンシブを作るサンプルコード
以下に簡単なサンプルコードを作ってみたので参考にしてみてください。スマホで1列、タブレットで2列、PCで3列で表示されます。
結果はこちらのようになります。
<!DOCTYPE html>
<html>
<head>
<title>シンプルなレスポンシブレイアウトの例</title>
<style>
.container {
width: 100%;
padding: 15px;
box-sizing: border-box;
}
.box {
width: 100%;
padding: 20px;
margin-bottom: 20px;
background-color: #eee;
box-sizing: border-box;
text-align: center;
}
@media screen and (min-width: 768px) {
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
width: calc(50% - 20px); /* minus margin */
}
}
@media screen and (min-width: 1024px) {
.box {
width: calc(33.333% - 20px); /* minus margin */
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>CSSファイルの外部化方法
CSSの直書きはデメリットもあるので、外部ファイル化するのが一般的です。
CSSファイルの外部化する場合の方法とCSSファイルの読み込みについてはこちらの記事をご覧ください。
外部のCSSファイルをStyleタグに入れて直書きにする方法
AMPを使う場合のように、コードを書くときはSCSSなどで書いて、ファイルにはStyleタグで直書きしたい場合もあります。
その場合はPHPであれば、file_get_contents()を使うことで実装可能です。
Wordpressを使う場合のサンプルコードを以下に書いてみたので参考にしてみてください。
// header.php
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('name'); ?></title>
<style>
<?php echo file_get_contents(get_template_directory() . "/styles.css"); ?>
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>まとめ
この記事ではHTMLにCSSコードを直接書いてスタイルを作る方法を解説しています。ここまでの内容をまとめると次のようになります。
- HTMLにCSSを直書きするには、Styleタグを使う方法、Style属性を使う方法、スタイル用のHTMLタグを使う方法の3つがある
- 直接書く場合、メンテナンス性が悪くなったり、方法によっては書き方に制限があるといったデメリットがある
- Styleタグを使う方法ならレスポンシブレイアウトを作ることができる
- 基本的にはCSSファイルは外部化するべき、どうしても直書きにする場合はバックエンドでCSSコードを書き込むことも可能
直接書く方法はデメリットもいくつかありますが、使い方によってはページスピードの向上などメリットもあります。
とくに最近はコンポーネント単位でコードを管理することも増えていて、CSSを直接書いてもそれほどメンテナンス性が落ちることもありません。
外部ファイル化にそれほどこだわる必要もないかなと思ってます。