超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのスタイルシート講座 > スタイルシート? > Next 

■ スタイルシートってどんなの?

スタイルシート(Cascading Style Sheet:CSS)っていうのは、HTML で作ったページの見栄えをもっとよくするための技術です。
HTML だと、ページのレイアウトを整理するのに、<table> や <blockquote> を駆使してたと思うけど、CSS を使えば、簡単(?)にもっと細かく作れるようになります。レイアウトだけじゃなく、文字の大きさや色、字体、行間なんかも自由自在になります。
見栄えなんかどうでもいいやって人も覚えとけば便利。
ページの外にスタイルの設定を書き込んだシートを作って、これをページに適用することができるから、たくさんページを作ってもスタイルを設定したシートを修正するだけで、すべてのページを修正することができます。

それでは、実際に試してみましょう。
まずメモ帳(テキストエディタ)で、普通の HTML ファイルを作ります。
こんな感じかな。

<html>
<head>
<title>CSS設定の方法</title>
</head>
<body>
<h3>CSS設定の方法</h3>
<p>ここではCSSの設定方法について勉強します。CSSの設定方法には3種類あります。</p>
<h4>1.タグではさまれた部分に適用する方法</h4>
<div>この方法はページの一部分だけスタイルを変えたいときに使います。その単語を目立たせるように字の太さや字体を変えたいときに使います。HTMLよりもより細かい設定が可能ですが、あまりCSSを使う意味はありません。ちょっとしたアクセントにどうぞ。</div>
<h4>2.ページ全体に適用する方法</h4>
<div>ページ全体に適用するには、ページのヘッダー部分に書き込みます。<body>タグを使うのとあまり変わりませんが、より細かい設定が可能です。複数のページを1つのスタイルシートで設定して、その中にある1ページだけ違う設定を混ぜたいときなどに使えます。</div>
<h4>3.リンクを使って複数ページに適用する方法</h4>
<div>この方法が一番おすすめです。外部にスタイルシートを1つ作って、複数のページからリンクを張ります。スタイルシートを一部変更するだけで、複数ページ全てのスタイルを変更することが出来ます。これでサイト全体のスタイルを設定し、部分部分は1または2の方法で設定すればいいでしょう。</div>
</body>
</html>

これをブラウザで見るとこうなりますね。

画面です

これだとちょっと素っ気ない感じですね。次のページで、このページにスタイルシートを適用してみます。画像使ってるんでちょっと重いかも。


 Home < 超初心者のためのスタイルシート講座 < スタイルシート? > Next