Web検索はbingがおすすめ!

HTMLファイルにスタイルシートを埋め込む - 埋め込み型スタイルシートを利用する - CSS

HTMLファイルにスタイルシートを埋め込む方法(埋め込み型のスタイルシート)を紹介します。
補足
スタイルシートを別ファイルにする方法はこちらの記事を参照して下さい。

書式

<head></head> タグ間に下記のコードブロックを記述します。
<style type="text/css">
<!--
 (スタイルを記述)
-->
</style>

スタイル記述部分を <!-- --> のコメント記述で囲んでいるのは、古いブラウザの場合 styleタグを認識できず、styleタグ内に記述したテキストがページの本文として表示されることを防ぐために記述しています。現在のWebブラウザでstyleタグを認識できないWebブラウザはほぼ無いため、下記のようにコメント処理を記述しない書式でも問題ありません。
<style type="text/css">
 (スタイルを記述)
</style>

実装例 サンプル

コード

以下のHTMLファイルを作成します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Demo</title>
    
    <style type="text/css">
    <!--
    .Text
    {
        font-size:24px;
        font-weight:700;
        color:#0000FF;
    }
    -->
    </style>
</head>
<body>
  <div class="Text">埋め込み型スタイルシートのデモ</div>
</body>
</html>

表示結果

上記HTMLファイルをWebブラウザで表示すると下図になります。スタイルが適用されており文字色とフォントサイズが変わっていることが確認できます。


著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-04-20
改訂日: 2024-04-20
作成日: 2012-07-04
iPentec all rights reserverd.