初心者のためのホームページ作成動画解説付

CSS(Cascading Style Sheet)について

スタイルシートを覚えよう

本来htmlというのはホームページの構造を記述するのに用いるもので、デザインや配置などのスタイルに関してはスタイルシートを利用するよう奨励されています(^^)
スタイルシートを使用するとhtmlだけでは実現できないことが、表現できるようになります。
今までさんざんhtmlを使用して文章に色をつけてきましたが、これからはcssを使用してデザインを作成します。
CSSのメリット
今までhtmlを使用して文章の色を変更してきましたが、この場合変えたい文章の個所すべてにタグを1個1個使用していました。
ですが、CSSを使用するとこれらデザインを容易に変えることができます。

では、具体的に見ていきましょう。
今回は段落を表す<p></p>で説明いたします。
以下のようなhtmlがあるとします。
<p>初心者のためのホームページ講座もだんだんと難しくなってきました。</p>
<p>なんとかついていってホームページを作れるようになるぞ!</p>
この2行分の文章の色を青に変えるには今まで
<p><font color="#0000ff">初心者のためのホームページ講座もだんだんと難しくなってきました。</font></p>
<p><font color="#0000ff">なんとかついていってホームページを作れるようになるぞ!</font></p>
と2行分<font color="~"></font>やっていたわけです。 ここでCSSを使用してみるとどうなるか。
とその前にCSSの書き方(というか書く場所)は3種類あります。

1.style属性の値として記述
2.head部分に記述
3.外部ファイルに記述(これが一般的です)
意味は分からないと思いますが、とりあえず今回は2の「head部分に記述」でいきたいと思います。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>初心者のためのホームページ講座</title>
<style type="text/css">
<!--

-->
</style>

</head>
<body>
<p>初心者のためのホームページ講座もだんだんと難しくなってきました。</p>
<p>なんとかついていってホームページを作れるようになるぞ!</p>
</body>
</html>
上記の
<!--

-->
の間に記述します。
では実際にやってみましょう(^^)/
スタイルを設定したい要素(この場合はp)の後に中カッコ「{ }」をつけて「プロパティ:値」を記述します。
この場合プロパティはcolor、値は#0000ff(blue)です。ですので、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>初心者のためのホームページ講座</title>
<style type="text/css">
<!--
p {color:#0000ff}
-->
</style>
</head>
<body>
<p>初心者のためのホームページ講座もだんだんと難しくなってきました。</p>
<p>なんとかついていってホームページを作れるようになるぞ!</p>
</body>
</html>
赤にしたければ、#0000ff(blue)を#ff0000(red)に変えれば良いだけです。
例えばホームページが何十ページもあった場合、htmlでは要素pの色を変えるにはすべての個所の色を変更しなくてはならないですが、 CSSを使用して変更すればすべての要素p個所の色が一気に変わるわけです(゚ロ゚;)

さらに文章の背景に色をつけたい場合は「background-color」というプロパティを使用するのですが、セミコロン「;」でつなげることができます。
p {color:#0000ff;background-color:#eeeeee}
これはp要素の文字色は#0000ffでbackground-color(背景)は#eeeeeeということを表してます。
「;」で連結していけばいろいろなデザインを指定することができます。


このエントリーをはてなブックマークに追加

(゜д゜メ)ゴルァ
最高に意味がわかりませんという方
下記をコピペしてみてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>初心者のためのホームページ講座</title>
<style type="text/css">
<!--
p {color:#5555cc;background-color:#eeeeee;padding:10px;font-weight:bold;border:dotted 3px #aaaaff;}
-->
</style>
</head>
<body>
<p>初心者のためのホームページ講座もだんだんと難しくなってきました。</p>
<p>なんとかついていってホームページを作れるようになるぞ!</p>
</body>
</html>
初心者のためのホームページ講座もだんだんと難しくなってきました。

なんとかついていってホームページを作れるようになるぞ!
上記のように表示されたかと思います(^^)