初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。
初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。
毎週金曜日配信 What's New 2002/6/7
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
＜第４号＞
今週の課題■テキストと段落
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
テキストを中心としたホームページを作る・・スタイルシート活用
今回は実戦的にページを作りたいと思います。テキストを中心にページを見栄え
よく表現します。そのためにもスタイルシートは欠かせません。今回のスタイル
シートの実装は外部にスタイルシートを置いてページに読み込ませる方法を取り
ます。
まず最初にスタイルシート文書を作成します。テキストエディタ（メモ帳など）
を立ち上げて下記のようにタイプします。コロン「：」、セミコロン「；」を間
違えないように入力してください。間違えるとスタイルシートがページに反映さ
れません。すべて英字半角小文字です。
body { background-color: #ffffcc; font-size: 12pt; color: #000000 }
div.test { color: #000066; line-height: 135% }
span { color: #cc3300 }
h2 { font-size: 20pt; font-weight: bold; text-align: center }
ここまで入力が終わったら保存します。今まで使っていたフォルダに小文字で
test_01.css と必ず拡張子 .css をつけて保存してください。なお、記述中の空
白はブラウザは無視しますので、見やすいように適当に入れています。
アンダーバーの入力の仕方は分かりますか。先週のマガジンを参照してくださ
い。アンダーバーの代わりに test-01.cssでもかまいません。ただし、下記にあ
るHTML文書の <link> 内のスタイルシートには必ず test-01.css とタイプして
ください。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
次に上記スタイルシートを利用するHTML文書を書きます。下記のようにタイプし
てください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<link rel="stylesheet" href="test_01.css" type="text/css">
<title>テキストページ</title>
</head>
<body>
<h2>これはテキストのページです</h2>
<div class="test">
初心者のためのホームページ作りの勉強をしています。今週はテキストを中心と
したページの勉強をしています。だんだん<span>本格的</span>になりました。
</div>
</body>
</html>
「SHIFT_JIS」のアンダーバー「 _ 」は キーボード右下のひらがな「ろ」です。
このキーをシフトキーを押しながらタイプします。
<div>〜</div> 内のテキストは改行なしで入力します。
入力が終わったらHTML文書として保存します。
英字半角小文字でtest_01.html と拡張子 .htmlを忘れないようにしてください。
保存できたらHTML文書 test_01.html をダブルクリックしてブラウザを立ち上げ
ます。 Sample
CSS文書はHTML文書にリンクして読み込まれます。Webページの見栄えの向上としてCSS文書が効果を発揮します。上記のHTML文書中の<link rel="stylesheet" href="test_01.css" type="text/css">の部分を削除してブラウザで見てください。味気のないつまらないページです。それがCSSを使うだけでページ全体にメリハリが出て感じのよいものになります。
| セレクタ | 属性 | 値 |
|---|---|---|
| body | background-color | #ffffcc |
| color | #000000 | |
| div.test | color | #000066 |
| line-height | 135% | |
| span | color | #ff0000 |
| h2 | font-size | 20pt |
| font-weight | bold | |
| text-align | center |
これは、body要素（表現するすべて）に対して、背景を薄いクリーム色、文字を黒で表示することを設定しています。なお、ひとつのセレクタにスタイルを複数設定する場合は、「；」とセミコロンで区切って行います。
div.test { font-size: 12pt; color: #000033; line-height: 135% }
div要素はブロックレベル要素ですがこの要素だけでは何もしないので属性やスタイルシートで表現を設定します。ブロックレベル要素ですが、div だけでは前後に改行を持つことはありませんが、ひとつの段落を意味します。ブロックレベルというのは、大きな段落のかたまりを形成すると思ってください。
このブロックレベル要素については次回の講座で説明します。 div要素に対しては、好きな名前をつけてセレクタに置きます。
ここでは、フォントサイズを12ポイント、文字の色を濃い青 #000033、文字の行間line-height を文字の大きさの135%で、つまり、文字の大きさ＋35％分の空白を設定しました。
span { color: #cc3300 }
span要素はインラインレベル要素で、上下前後に空白はありません。また<span>タグだけでは何もしないので、スタイルシートで表現を記述します。ここでは、文字の色をオレンジ色 #cc3300に設定しました。h2 { font-size: 20pt; font-weight: bold; text-align: center }
h要素（見出し要素）もブロックレベル要素で上下に空白を持っています。このタグに数字の１〜６まで使え、<h1>が一番大きなフォントサイズで表示します。ここではフォントサイズを20ポイント、フォントの字体 font-weightを太字に、また位置関係 align を中央揃え center に設定しました。
………………………………………………………………………………………………
◆汎用属性・・class（クラス）属性とID（アイディー）属性
スタイルシートでピリオド「. 」を入れて書く場合、（この場合 div.test）HTML
文書の記述は、クラス属性（class= ）を用います。これが div#testの場合はID
属性（id= ）で示します。
（例 CSS文書 div.test { margin: 20px; padding: 10px; border: …… }
HTML文書 <div class="test">
CSS文書 div#test { margin: 20px; padding: 10px; border: …… }
HTML文書 <div id="test">
ただしID属性については、同じIDは１ページ当たり１回しか使えませんので注
意が必要です。これを無視すると、表示が極端に遅くなったり、表現が無視され
る場合があります。クラス属性は何度も使えます。
………………………………………………………………………………………………
◆継承
body要素で設定した背景色は、すべての要素で通用していますね。つまり<h2>や
<div> のような他の要素に対しても背景色が同じになっています。これを「継承」
といって、親の要素であるbodyで設定された背景色、文字色、フォントサイズが
他の要素にも通じるということです。
ただし、他の要素がその属性で設定してある場合は、そちらが優先されます。
<span>では、オレンジ色に設定しましたから、親要素の黒ではなくオレンジ色で
表現されるわけです。 <div>の文字色もそうですね。でも<h2>では文字色を設定
していないので、親要素の色が適用されるというわけです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■