styleタグでCSSをHTMLファイルに記述する

styleタグはCSSをHTMLファイルに直接に記述して埋め込むことができます。

CSSは基本的にCSSだけを記述する専用のCSSファイル(style.css)を別のファイルとして作成し、HTMLファイルにリンクするのが推奨されているので理想的ですが、CSSファイルを使用できない場合のときには、styleタグでCSSをHTMLファイルに記述するやり方が役立ちます。

styleタグの使い方を説明しますので覚えてみてください。

1. styleタグの使い方をまずは覚える
- 1.1. 開始タグと終了タグでstyle要素にする
- 1.2. styleタグにtype= text/cssは不要
2. styleタグでCSSを記述する使い方
- 2.1. CSSを外部ファイルに書くように記述
- 2.2. styleタグを書くHTMLファイル内の位置
3. HTMLファイルにstyleタグでCSSを書いてみる
- 3.1. styleタグ内のCSSでボタンを作成
- 3.2. style要素にhoverのCSSも書いてみる

styleタグの使い方をまずは覚える

初歩的なstyleタグの使い方からになりますがstyleタグの使い方でまず覚えておきたいことはstyleタグの書き方です。以下のようにstyleタグを書きます。

styleタグはHTMLのタグなので大なりカッコと小なりカッコでstyleを挟んだ書き方をします。

そしてstyleタグでCSSをHTMLファイルに記述するときにはCSSの記述を<style>と</style>の間に挟んで書くのがstyleタグの使い方です。

開始タグと終了タグでstyle要素にする

styleタグは開始タグと終了タグを必ず記述して使います。

<style>がstyleタグの開始タグ
</style>がstyleタグの終了タグ

終了タグの</style>にはスラッシュの記述が必要です。また開始タグの<style>と終了タグの</style>どちらかでも記述忘れをしてしまうとstyleタグがstyle要素として成立しないのでCSSをHTMLファイルに記述してもCSSが効かないです。

styleタグの開始タグと終了タグをしっかり書いておけばstyle要素にCSSを書くことができますし、HTMLファイル内での<style></style>の記述はそのHTMLファイルのデザインやレイアウトをするCSSの記述場所、またはCSSが書いてある場所のマーク(目印)なのだと私たち、そしてブラウザが理解できます。

ちなみに要素というのは

上記のように「スタイルタグ内のCSS」と「styleタグの開始と終了のタグ」全部を含めた部分を要素と言います。つまりstyle要素。

styleタグにtype= text/cssは不要

styleタグの使い方を覚えようと、どこかのサイトを参考に読んだときに上記のstyle開始タグのような「type= text/css」の記述が含まれているstyleタグの使い方をみたことがあるかもしれません。

styleタグにtype= text/cssの記述は不要です。

少し細かく言えばstyleタグでtype= text/cssのtype属性が存在しない場合に使用される属性のデフォルト値は「text/css」なのでHTML5からは省略可能なため不要です。

そのため先述した<style></style>というstyleタグの使い方をすれば<style type=”text/css”></style>の使い方ができるということですね。

styleタグでCSSを記述する使い方

styleタグについての使い方をここまで説明してきましたが、次にstyleタグでCSSをHTMLファイルに記述する使い方を覚えていきます。

styleタグの要素内でCSSをどのように書くのか
styleタグを書くHTMLファイル内の位置

上記の2つについての使い方を一ずつ説明します。

CSSを外部ファイルに書くように記述

styleタグでCSSをHTMLファイルに記述するときのCSSの書き方は外部ファイルに書くのと同じようにCSSのセレクタ、プロパティと値のセットでstyle要素内に記述します。

<style>
    div{
        background-color: #333;
        color: #fff;
        font-weight: bold;
        }
</style>

上記のCSSならdivがセレクタ、background-color、color、font-weightがプロパティ、そしてプロパティの右横の記述が各プロパティに与えられた値です。複数のプロパティを記述する場合は、styleタグで記述するCSSでも値の最後にセミコロンを記述します。

必ず<style></style>のstyle要素内にCSSの記述をすることも忘れずにです。style要素内に必ずCSSを記述することが、CSSを外部ファイルに記述する場合との大きな違いでもあります。

またstyleタグでHTMLファイルにCSSを記述したとしても、後になってstyleタグで記述したCSSを外部ファイルに移動したい場合はstyleタグを削除して残りのCSSをコピペするだけで、外部のCSSファイルに書いてあるCSS達にメンバー入りできます。

styleタグを書くHTMLファイル内の位置

styleタグでCSSをHTMLファイルに記述するときのstyleタグを書くHTMLファイル内の位置も覚えておきたいことです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            background-color: #333;
            color: azure;
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
            font-weight: bold;
            }
    </style>

</head>

<body>
    <div class="btn">styleタグで書いたCSS</div>
</body>

</html>

styleタグを書くHTMLファイル内の位置はhead内です。また推奨されているstyleタグを記述する位置もheadです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="btn">styleタグで書いたCSS</div>
    <style>
        .btn{
            background-color: #333;
            color: azure;
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
            font-weight: bold;
            }
    </style>
</body>
</html>

HTML5からはstyleタグをbody要素でも使えるようになっています。ですが推奨のstyleタグを記述する位置ではないので「styleタグはbodyに記述することもできるんだな」くらいに覚えておくと良いかと思います。

styleタグを書くHTMLファイル内の記述位置でbody要素が推奨ではないのは、styleタグを書いてCSSを読み込ませると再描画が発生する可能性があるためで、おそらく再描画することでページの読み込み速度の低下やレンダリングブロックなどの理由からです。

そのためstyleタグはHTMLファイル内のhead要素で記述します。

HTMLファイルにstyleタグでCSSを書いてみる

styleタグはHTMLファイルのheadに記述して開始タグと終了タグを記述したstyle要素内でCSSを外部ファイルに書くように記述するというのが、ここまで説明してきたことの流れです。

あとは実際にHTMLファイルにstyleタグでCSSを書いてみるのみです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Slackey&display=swap" rel="stylesheet">

    <style></style>

</head>
<body>
    <div class="btn">Button</div>
</body>
</html>

まずはHTMLファイルのhead要素にstyleタグをマークアップしておきます。

そしてstyleタグで記述するCSSが適用される要素をbody要素にマークアップしておきます。上のHTMLではdiv要素にbtnクラスを付けてマークアップしてます。

styleタグ内のCSSでボタンを作成

style要素のCSSでボタンを作ってみることにします。

<style>
    .btn{
        width: 300px;
        font-weight: bold;
        background-color: #444;
        color: #e89292;
        border: 5px solid deeppink;
        margin: 50px auto;
        padding: 20px;
        text-align: center;
        letter-spacing: 0.1em;
        transition-duration: 0.1s;
        }
</style>

先にHTMLファイルのheadにstyleタグを記述してあるので、style要素にボタンにするCSSを書きます。

bodyにマークアップしているdiv要素にはbtnのクラスを付けたため、style要素の中に.btnのクラスセレクタを作成してボタンの幅や背景色、文字色、余白やボタン枠など、各プロパティとその値でデザインします。

そうするとstyle要素に記述したCSSがbtnクラス付きのdiv要素に適用されて上の画像のようなボタンのデザインでブラウザに表示できます。(フォントはGoogle FontのSlackeyを使用してます)

style要素にhoverのCSSも書いてみる

style要素のCSSで適用されたボタンにhoverのCSSも追加して書いてみることにします。

<style>
    .btn{
        width: 300px;
        font-weight: bold;
        background-color: #444;
        color: #e89292;
        border: 5px solid deeppink;
        margin: 50px auto;
        padding: 20px;
        text-align: center;
        letter-spacing: 0.1em;
        transition-duration: 0.1s;
        }
    .btn:hover{
        background-color: deeppink;
        color: #444;
        border: 5px solid #444;
        }
</style>

hoverはCSSの擬似クラスなのでHTMLファイルのheadにマークアップしたstyle要素内に.btn:hoverのセレクタを作成してボタンにマウスが乗ったときのホバー状態のCSSを記述します。