Home > TagScript > html、css、Java > html5css3

ベクトルドロー・レベルゼロ

htmlファイル内にスタイルを記述する

新規作成日 2016-04-01
最終更新日

通常、スタイルシートは、cssファイルとして別ファイルで管理します。

cssの使い方の記事等で、そこでしか使わないスタイルを別ファイルで管理するのは、面倒な上に、混乱の元です。 そのような場合は、htmlファイル内に、スタイルを記述します。

スタイル属性を使用する

それぞれのタグのスタイル属性の中に記述する方法です。

headの記述

ヘッダに以下の記述をスる必要があります。

<meta http-equiv="default-style" content="text/css">
<h1 style="background-color:yellow">サンプル</h1>

ヘッダ要素内のスタイルタグ内に記述します

cssの使い方の記事等で、そこでしか使わないスタイルを記述するのに適した方法です。

headの記述

stylタグの内容が表示されないように、コメントタグ<!--  -->で囲います。

複数のクラスや属性を指定する場合は、スペースで区切ります。複数のスタイルをを指定する場合は、;で区切ります。

<style type="text/css">
<!--
        h1{background-color: yellow;
        	font-size: 24px}
        .sample01{color: cyan}
        #title{font-size: 24px}
-->
</style>

外部スタイルシートファイルを作成する

最も一般的に使用される方法です。

headの記述

href属性に、スタイルシートのフルパスを入力します。トップディレクトリ直下にcssフォルダを作成し、そこに格納するのが一般的です。

<link rel="stylesheet" type="text/css" href="style.css">
このエントリーをはてなブックマークに追加

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2015 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」