ぱそおーるCSS講座

スタイルの記述方法


HTMLファイルでスタイルシートを記述する方法は３種類あります。
  1. HTMLファイルの特定タグに直接記述する方法
    各タグに個別にスタイルを設定出来るので、細かなデザインが可能
  2. HTMLファイル全体に<style>タグを使って記述する方法
    ページ全体にスタイルを設定する事で、作成時間が短縮されます。
  3. スタイルシートを記述した専用の外部ファイルを作成して、そこから読み込ませる方法
    サイト全体にスタイルを適用する事で、デザイン変更が容易になります。
どの記述方法でも問題ありません。
また、併用させても問題ありません。

併用させたスタイルシートには優先順位があります。
上のリストの順番通りの優先順位になっています。

HTMLファイルの特定タグに直接記述する方法

HTMLファイル内にタグに直接記述します。
<p style="color : #ff3300; font-size : 20px;">こんな感じです</p>

こんな感じです


HTMLファイル全体に<style>タグを使ってスタイルを設定する方法
ページ全体にスタイルが適用されます。

<style></style>タグは<head></head>タグ内に記述します。

HTMLソース内の図の部分に記述します。
<head>タグ内に書き込みます。

基本セレクタ(<h1><table><a><p>など)の場合は、HTMLにタグを記述しただけでスタイルが適用されます。
classセレクタの場合は適用させるタグに下のように記述します。
<p class="test">こんな感じです</p>

こんな感じです

idセレクタの場合もclassセレクタと同じように設定します。
<p id="test">こんな感じです</p>

こんな感じです

疑似クラス、疑似要素は、<style>タグで記述しておけば、自動的にスタイルが適用されます。

外部ファイルで記述する方法
ページにリンクを設定するだけで、サイト全体にスタイルを設定出来ます。


HTMLソース内の図の部分にスタイルシートを読み込むタグを記述します。
<link href="ファイル名.css" rel="stylesheet" type="text/css">と記述します。
外部ファイルが複数ある場合は、その数の分だけ記述してください。

外部ファイルの作成方法

メモ帳などのテキストエディタに記述していきます。
記述方法はページ全体にスタイルを設定する時と同じように記述してください。
<style>タグは必要ありません。
記述が完了したら、ファイル名を決めて保存します。拡張子は.cssにする必要があります。
使い方は、ページ全体にスタイルを設定した時と同じです。
HOMEへ