HTMLファイルにスタイルシート(CSS)を適用するための記述を紹介します。
各タグのstyle属性に記述する
最も簡単にスタイルシートを適用することができますが、スタイルシートを使用する目的のひとつ、「文書構造とデザインの分離」に反するため、あまり推奨されていません。
style属性に記述するサンプル
|
1 2 3 |
<body> <h1 style="color:blue;">見出し１</h1> </body> |
HEADタグ内にSTYLEタグで記述する
「文書構造とデザインの分離」を実現でき、HTMLファイル内で完結するため、初めてスタイルシートを勉強するときにおすすめです。実際にサイト制作をする場合には、共通のスタイルが重複するため、後述の方法がおすすめです。
【構文】
セレクタ｛プロパティ：値；｝
STYLEタグに記述するサンプル
|
1 2 3 4 5 6 7 8 |
<head> <style> h1{color:blue;} </style> </head> <body> <h1>見出し１</h1> </body> |
LINKタグで外部スタイルシートファイルを参照する
拡張子「.css」の外部スタイルシートにスタイルのみ記述し、HTMLファイルのHEADタグ内にて、LINKタグでスタイルシートファイルを参照します。別ファイルになるため、HTML/CSSファイルの位置関係によりパスが変わるので注意が必要です。実際にサイトを制作する場合には、1つのスタイルシートファイルを全てのページで共通に参照すると、デザインの統一が図れます。
LINKタグで参照するサンプル
|
1 2 3 4 5 6 |
<head> <link rel="stylesheet" href="sample2.css"> </head> <body> <h1>見出し１</h1> </body> |
|
1 |
h1{color:blue;} |
以上いずれの記述方法でも、Webブラウザでプレビューすると以下のようになります。
