刻々と進化する World Wide Web
の世界で、技術革新の中でも最大の革命となったと考えられているのがスタイルシートの導入でした。
スタイルシートを使うようになってから、Web制作にあたって、本格的なレイアウトの設計が可能になりました。フォント、色、枠線、コンテンツの余白や配置などを制御し、しかも HTML
ソースが人間にとってもコンピューターにとっても分かりやすいものになっています。
HTML
で使用するスタイルシートは CSS (Cascading Style Sheet)
という規格で、HTML
タグに対してどのように表示するかを指定します。
詳しくは当サイト内の CSSリファレンス をご覧ください。
CSS
は選択部(セレクタ)と宣言部で構成され、宣言部には属性(プロパティ)とそれに割り当てる値で構成されています。例えば、
h1 { color: blue }
h1
がセレクタとなり、{ }
で囲まれた部分が宣言部になります。color
が属性(プロパティ)で、blue
という ColorName
が値となります。blue
の替わりに16進法の #0000ff
、あるいは #00f
でも構いません。プロパティと値はコロン ":"
で区切ります。また、宣言部の中の属性と値は、続けて複数設定することもできます。body { background-color: #fff; color: #000 }
";"
で区切ることによって、複数のスタイルシーを設定することができます。CSS
の実装・貼り付けHTML
の要素に直接 style
属性を使って設定します。
<body style="background-image:url('images/kabe.gif')">
body
要素に、 style
属性を使って全体の背景に URI で指定した画像を張り込みます。直接 HTML
タグに書き込みます。テキストなどの修飾にめったに使わないときに使用します。head
要素の中に style
要素を使って埋め込みます。このことからエンベッド (埋め込み) 方式といわれています。エンベッド方式では、ヘッダ部に記述します。
<html> <head> <style> <!-- h1 {color: blue} --> </style> </head> <body> <h1>Blue Header</h1> </body> </html>
h1
要素をページ内で複数使うときに、すでに埋め込んであるためにインライン方式のようにいちいち設定する必要がありません。つまり、一度設定すると、そのページにおける h1
要素すべてに適用するものです。body { background-image: url(images/kabe.gif); color: #000 } .text { font-size: 1.2em; color: #006; font-weight: bold }
「.css」
となります。HTML
のヘッダに次のように埋め込みます。<html> <head> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head>
link
要素を使って、外部のスタイルシートを Webページに読み込ませます。これによって、読み込まれたスタイルシートが、その HTML
文書に適用されます。