スタイルシートの適用

HTMLファイルにスタイルシート(CSS)を適用するための記述を紹介します。

各タグのstyle属性に記述する

最も簡単にスタイルシートを適用することができますが、スタイルシートを使用する目的のひとつ、「文書構造とデザインの分離」に反するため、あまり推奨されていません。

style属性に記述するサンプル

HEADタグ内にSTYLEタグで記述する

「文書構造とデザインの分離」を実現でき、HTMLファイル内で完結するため、初めてスタイルシートを勉強するときにおすすめです。実際にサイト制作をする場合には、共通のスタイルが重複するため、後述の方法がおすすめです。

【構文】
 セレクタ{プロパティ:値;}

STYLEタグに記述するサンプル

LINKタグで外部スタイルシートファイルを参照する

拡張子「.css」の外部スタイルシートにスタイルのみ記述し、HTMLファイルのHEADタグ内にて、LINKタグでスタイルシートファイルを参照します。別ファイルになるため、HTML/CSSファイルの位置関係によりパスが変わるので注意が必要です。実際にサイトを制作する場合には、1つのスタイルシートファイルを全てのページで共通に参照すると、デザインの統一が図れます。

LINKタグで参照するサンプル

以上いずれの記述方法でも、Webブラウザでプレビューすると以下のようになります。
sample2