CSSを記述する方法は、

・タグに「style」属性を使って、直接コードを記述する方法
・「style」タグを使って、タグ内にまとめて記述する方法
・CSS専用のファイル（スタイルシート）を作り、HTMLファイルとリンクさせる方法

の3通り。

HTMLに直接CSSを記述するには、
・タグに「style」属性を使って、直接コードを記述する方法
・「style」タグを使って、タグ内にまとめて記述する方法
の2つ。

HTMLファイルに全てのCSSを直接記述してしまえば、
外部CSSファイルを使う必要はない。
だが、他のページにも適用したいCSSは、
他のページに再度同じ記述をするか、
外部CSSファイルを作って記述し直すことが必要なので、
やはり推奨通りに、CSSは外部CSSファイルを作成して記述するのが無難。

注意も必要。
すべてのCSSを、
HTMLタグの「style」属性に記述することはできない。

HTMLタグの「style」属性には、
「疑似クラス」を直接記述することができないので、
「a」タグのリンク作成時によく使われる疑似クラス「:hover」「:active」などは、
HTMLタグの「style」属性には記述できない。

「疑似クラス」を記述する場合は、
HTMLの「style」タグを使って「head」タグ内に記述するか、
外部CSSファイルを作成して、CSSを記述する方法のどちらかを使用する。

HTMLファイルのCSSが記述できる場所

<!DOCTYPE html>
<html>
<head>
<title>Sample.htmlのタイトル</title>

<--!CSSの直接記述する方法-->
<style type="text/css">
<--!CSSを記述-->
</style>

</head>
<body>

<--! HTMLタグに「style」属性を使って直接CSSを記述する -->
<div style="margin 5px 10px; padding: 5px 10px;"></div>

</body>
</html>

「style」タグを使って「CSS」を記述する方法

そのページだけや、その部分だけにレイアウトデザインを適用させたい時に、
「style」タグを使って「CSS」を「HTML」ファイルに直接記述することができる。

「style」タグの「HTML」ファイルへの記述例

<!DOCTYPE html>
<html>
<head>
<title>Sample.htmlのタイトル</title>

<--!CSSの直接記述する方法-->
<style type="text/css">
<--!CSSを記述-->
</style>

</head>
<body>
</body>
</html>

「style」タグの属性

属性	意味
disabled	このスタイルシートを無効化。
media=media	スタイルシートを適用するメディアを指定。 screen＝画面など、ページ分割の無いメディア print＝プリンタなど、ページ分割のあるメディア all＝全メディア（既定値）
type=type	スタイルシートの言語を指定。「text/css」＝Cascading Style Sheets 「text/javascript」＝JavaScript Style Sheets
scoped	style要素の親要素をルートとするサブツリーにのみ、スタイルを適用。
href属性	外部ファイルのURL。
rel属性	「リンクタイプ」といい、リンク先のリソースとの関係を記述。 index ----- 現在のドキュメントに対してインデックスを提供する文書へのリンク。 contents ----- 現在のドキュメントに対して目次を提供する文書へのリンク。 next ----- 順序が定められた一連の文書の中で、次の文書へのリンク。 prev ----- 順序が定められた一連の文書の中で、前の文書へのリンク。 start ----- 一連の文書の中の最初の文書へのリンクを示します。サーチエンジンのロボットなどへのナビゲーションとしても利用可能。 stylesheet ----- 別のファイルとして用意したスタイルシートを使う場合に記述。 alternate ----- hreflang属性などと合わせて、ドキュメントの別バージョンへのリンクを用意します。 made ----- これのみrev属性の値となります。ドキュメントの作者を示し、作者へのメールURLや、ホームページのURLを指定。 chapter ----- section ----- subsection ----- appendix ----- glossary ----- copyright ----- help ----- bookmark -----
rev属性	リンクタイプと呼ばれ、リンク元のリソースとの関係を記述。
type属性	参照先の文書のタイプを記述。
hreflang属性	リンク先の言語バージョンを記述。
media属性	リンク先のメディアバージョンを記述。印刷用などへのリンクの際利用する属性。
title属性	リンク先のタイトルを記述。
charset=charset	参照先の文書のキャラクタセットを記述。（Shift_Jisなど） HTML5 には未定義。 disabled = (e4+)このリンクタグを無効化。
hreflang=lang	参照先の文書の言語を指定。
media=media	文書の出力先を指定。 screen - 通常の画面に出力。 print - 印刷プレビュー画面に出力。 all - 全出力先に出力。
target=target	表示ターゲットを記述。
type=type	参照先の文書の文書タイプを記述。
sizes=n	「rel="icon"」の際のアイコンサイズを「sizes="16x16"」という指定で変更する。「sizes="16x16 32x32" 」という複数記述も可能。

Back

「style」属性を使って「CSS」を記述する方法

「CSS」は、「HTML」タグに直接入力することも可能。
その際は、タグ内に「<div style="CSSを記述">」のように入力することで、CSSがそのタグに適用される。

HTMLタグに直接記述する書式

<div style="CSSを記述">
HTMLコードを記述
</div>

Back