●これから学ぶのはカスケーディングスタイルシートといいます。CSSと略します。W3CのHTML4.0から取り入れられた手法で、画像などを利用しなくてもかなりの見栄えを確保し、なおかつ指定も易しく、文章の内容もわかりにくくならない優れた方法です。
●文章内の役割をタグで表し、見栄えをスタイルシートにまかせます。文章はそのままで、スタイルシートだけを取り替えて全く違う見栄えにすることができます。
●カスケーディングスタイルシート(以下CSS)はタグごとに見栄え(以下スタイル)を指定します。指定の方法はいくつかありますが、最も簡単なヘッドの部分に書くやり方からはじめます。
●例えば次のように指定します。
<head> <title>情報で学んだこと</title> <style type="text/css"> <!-- h1 {color:blue; } h2 {color:green; background-color:palegreen; } p {color:teal; } body {background-color:ivory; } --> </style> </head>
●スタイルシートは head の部分に、<style></style>で挟んで記述します。
●最初のタグに type="text/css" を入れてテキストで書かれたcssの形式のものであると宣言します。将来にもっとよい方法が考えられたときはここを書き換えて対応できます。
●<!-- と --> はスタイルシートに対応していないブラウザのためにあります。そろそろ不要なのですが、習慣でいれています。
<style type="text/css"> <!-- スタイルシートの指示がここに入る --> </style>
基本的にCSSの設定は、以下のような書式で行われます。
セレクタ {属性 : 値}
例えばこのように書きます。
h1 { color : blue } h1 タグについては 色(color) を 青(blue)にする
複数の指定をするときは ; (セミコロン)でくぎって書きます。
h2 {color:green; background-color:palegreen }
h2 タグについては
色(color)を緑(green)にし、背景色(background-color)を薄緑(palegreen)にする。
最後の ; (セミコロン)はいらないのですが、書いてもかまいません。
h2 {color:green; background-color:palegreen; }
改行や半角スペースは無視されますから工夫すると見やすく書けます。つぎの2つの書き方は全く同じ意味になります。
h2 {color:green; background-color:palegreen; }
h2 { color: green; background-color: palegreen; }
指定する属性が多くなると下の書き方の方が人間にとって見易くなります。ただし全角スペースは絶対にいれないこと
|
|