最近ではスタイルシートによるWEBレイアウトが主流になっています。
そしてスタイルシートを使ってレイアウトをするとき、外部CSSファイルを読み込ませる方法が殆どです。一括管理ができ、後々の修正が容易に出来るからです。
基本的な考え方として、HTMLファイルにブラウザに表示する文書を書いたり、表示する画像ファイルを配置したりします。そしてCSSファイルでその文字や画像を「どこに配置するか」「色は何色にするか」「大きさはどれくらいにするか」などを指定します。
やり方はタグで指定した範囲に外部CSSファイルに記述したスタイルシートを読ませ、そのスタイルシートで指定範囲をいろいろと変化させ装飾していきます。ここではHTMLファイルを"index.html"、スタイルシートを
"style.css"として説明していきます。
まず、"index.html"内に"style.css"のリンクを記述します。
<link href="css/style.css" rel="stylesheet" type="text/css"> を<head>〜</head>内に記述します。
次に
<body>〜</body>内に下記を書き込んで開いてみます。
<div class="red">ここは赤</div>
<div class="blue">ここは青</div> →check
この場合の外部CSSファイル"style.css"はこうなってます。
.red{
color:#FF0000;}
.blue{
color:#0000FF;}
次に このCSSファイルの記述だけを変えてみます。
.red
{color:#FF00000;
background-color:#CCCCFF;
font-size:24px;"}
.blue{
color:#0000FF;
background-color:#FFFFCC; }
そしてHTMLファイルはそのまま変更なしで開いてみます。 →check
このようにCSSファイルを変更するとHTMLファイルのレイアウトが変わります。
複数ページに同じレイアウトを用いている場合などの修正に便利です。
|
| << スタイルシート |
|
 |
|
|
|
|
| |
■WEBデザインの基本 |
 |
|
|
