CSSってなに?

CSSとは、Cascading Style Sheets(カスケーディング・スタイルシート)の略で、ウェブページのレイアウトやデザインの指定を行なう規格のことです。
これまで、ウェブページのレイアウトやデザイン(文字の色や大きさ、行間、背景など)の指定は、HTML文書に直接書き込んでいましたが、CSSの登場により、レイアウトやデザインに関する指定を、HTML文書から切り離して記述することができるようになりました。 これにより、HTML文書は単純化し、文書の装飾や複数のページ・レイアウトなども、一括して変更することができようになりました。
CSSの記述方法には、以下の3つの方法があります。
1.HTMLのタグ(要素)に直接書き込む
1 <p>海も<font color="#0066FF"><b>青い</b></font>し、空も<font color="#0066FF"><b>青い</b></font>よ。</p>
2 <p>海も<span style="color: #0066FF; font-weight: bold;">青い</span>し、空も<span style="color: #0066FF; font-weight: bold;">青い</span>よ。</p>
上のコードは、1行目がHTMLでの記述、2行目がCSSを使った記述の例です。文章中の、「青い」という文字だけ、青色の太字にしています。 こんな感じ。「海も青いし、空も青いよ。」
CSSを使っている方がコードも長くなり、逆に見にくくなっちゃってます。 つまり、この方法だとCSSの使う価値はあんまりないよねってことです。
2.HTML文書内に書き込む
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3 <head>
4 <title>青い海と青い空</title>
5 <style type="text/css">
6 .blue_bold {
7 color: #0066FF;
8 font-weight: bold;
9 }
10 </style>
11 </head>
12 <body>
13 <p>海も<span class="blue_bold">青い</span>し、空も<span class="blue_bold">青い</span>よ。</p>
14 </body>
15 </html>
5〜10行目がCSSに関する記述です。
6行目で固有の名前(ここでは「blue_bold」というクラス名)をつけて、スタイルを定義しています。内容は名前の後に続く{ }内に、いくつでも指定しておくことができます。
13行目。ここで定義しておいた「blue_bold」というスタイルを2箇所で適用しています。
CSSの超便利なところは、このようにスタイルを1箇所で定義しておけば、複数の箇所で同一の表現を実現できること。 そして、その定義している1箇所を変更するだけで、それを適用しているところ全てのスタイルを変更することができるということです。
3.外部ファイルに書き込み、HTMLで読み込む
ちょっと長くなってしまったので、一応「つづく」にさせていただきますが、CSSがその真価を発揮するのは、外部ファイルとして読み込むときなのです。
レイアウトやデザインに関するHTMLタグの多くは、今後廃止されていく方向にありますので、ホームページをつくるにはCSSは必須にってことになりますね。 (整備士

ブログランキング・にほんブログ村へ

人気ブログランキングへ

BlogPeopleランキングへ

blogoo.gif

FC2 Blog Ranking

ブログランキング【くつろぐ】

※ ブログランキングに参加しています。気がむいたときにでもクリックお願いします。

XHTML+CSS | 2009-01-09 11:49 | Comment(0)
この記事へのコメント
コメントを書く
お名前 : [必須]

メールアドレス :

ホームページURL :

コメント :