←自分のホームページでお金がもらえるの知ってましたか？スタイルシート
スタイルシートを使うともっと細かいデザインができます。
これまでの説明(準備〜フレーム)はHTMLという言語でした。
HTMLの主な目的は基本的な文章の構造、骨組みを決めることで、
スタイルシートはHTMLで作った文章に対し細かい「見栄え」を加えてやることが目的です。
HTMLでも見栄えを変えるタグはありますが、スタイルシートを使えばもっと細かくデザインできます。
ここでは使い方だけを説明していて詳しい修飾内容については説明していません。修飾内容についてはここでは気にせず、とにかく使い方を理解してもえれば十分です。
ここの内容が分かれば、あとは[タグ一覧]で修飾内容を参考にしてもらえれば使えるようになります。早く慣れるためにも実際に使ってみましょう。
上から順に見ていってください。でないとまったく理解できないと思うので。
それでは、下の例を見てください。
<span style="‥‥‥">はお決まりの形で、"..."の中が修飾する内容です。
<span>自体には何の効果もありません。
<span>を使う
<span style="color:red;">スタイルシート</span> →スタイルシート個別にタグに効果を追加する
太字＋背景色を指定<b style="background:yellow;">スタイルシート</b>
→スタイルシート
リンク＋文字サイズ指定
<a href="style.html" style="font-size:25px;">スタイルシート</a>
→スタイルシート
一括して指定する
<html>
<head>
<style type="text/css">
b {background:yellow;}
</style>
</head>
<body>
スタイルシート
<b>スタイルシート</b>
<b>Style Sheet</b>
</body>
</html>
↓
スタイルシート
スタイルシート
Style Sheet
classを使う
<html>
<head>
<style type="text/css">
.ao {background:blue;}
.ki {background:yellow;}
</style>
<body>
<b>スタイルシート</b>
<b class="ao">スタイルシート</b>
<a href="style.html" class="ki">スタイルシート</a>
</body>
</html>
↓
スタイルシート
スタイルシート
スタイルシート
外部ファイルを使う
◆[a.htmlの内容]
<html>
<head>
<link rel="stylesheet" href="abc.css" type="text/css">
</head>
<body>
<b>スタイルシート</b>
<p>
あいうえお
かきくけこ
さしすせそ
</p>
</body>
</html>
◆[abc.cssの内容]
b {color:red; font-size:15pt;}
p {background:yellow; width:200px;}
↓
スタイルシート
あいうえお
かきくけこ
さしすせそ
