毎週金曜日配信 What's New 2002/5/24 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 初心者のためのホームページ作り <第2号> ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 決まりごと・・スタイルシート HTMLを書く上でW3Cから勧告されている決まり事がたくさんあります。 最近ではスタイルシートを使って表現を定義するようにされていますが、講座を すすめていく中でスタイルシートを解説します。非常に便利な機能ですので是非 利用してください。スタイルシートは(Cascading Stylesheet)カスケーディン グ・スタイルシートの略で、テキストの段落やフォントの各種の設定など、見栄 え全体を定義して表現できるものです。 例えば、ワープロソフトでは、フォントの大きさ、色、書体の種類を簡単に変 えられますよね。段落や位置の設定もクリックひとつです。枠線の太さや色づけ も楽チンです。これらはすべてワープロソフトの持っているスタイルシートで行 っているのです。この機能がWebでも使えるのです。 スタイルシートが使えなかったときには、すべての要素で見栄えを属性として 書いたものでした。もう面倒くさくて大変でしたが、スタイルシートの登場は制 作者にとって福音になったことでしょうね。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ スタイルシート その1 W3Cでは近い将来 font、centerなどのタグが廃止することを決定しています。 便利なタグでしたが、今後はスタイルシートで表現するように勧めています。で は、スタイルシートで書くとどうなるでしょう。これからが本格的になります。 <html> <head> <title>初心者のためのホームページ作り</title> <style type="text/css"> <!-- h3 { font-weight: bold; color: #0000ff; text-align: center } body{ background-color: #ffff00 } //--> </style> </head> <body> <h3>初心者のためのホームページ作り</h3> </body> </html> となります。<head>の中にスタイルシートを書くことをエンベッド方式(埋め込 み方式とでも呼ぶのかなと思う)といい、そのほかに外部からスタイルシートを 読み込むリンク方式、適応したい要素に直接書き込むインライン方式があります。 全ページにわたって統一した表現するときにはリンク方式が便利ですね。 コロン「:」とセミコロン「;」を間違えないように注意してくださいね。 ちなみにインライン方式では <font size="6" color="blue"><b>初心者のためのホームページ作り</b> を <h3 style="color:#0000ff;text-align:center"> 初心者のためのホームページ作り</h3> と変えます。結果は同じですが、<h> 要素は見出しタグと呼び、ブロックレベル エレメントなので、上下に空白が入ります。ブロックレベルエレメントについて は講座「段落」で取り上げます。 インライン方式はほとんど使うことがないような場合に使います。(日本語に なっているのかいな?)つまり、<head>〜</head> に置くエンベッド方式や外部 スタイル方式は、ページ全体の各要素に対してはじめから定義して、繰り返し使 うようにします。例えば、たまにどうしてもある部分のテキストを赤にしたい場 合、最初から定義してしまうよりも、そこの部分だけインラインで書いた方がス タイルシート自体を管理する上でも後々楽になってきます。
お詫び
HTMLリファレンス同様、すべて完成していません。普段は会社勤めで制作時間に限界があります。なるべく講座に沿って制作しておりますが、行き届かない点はあらかじめお詫びいたします。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ (外部スタイルシートの作り方と実装方法) それでは今度は、スタイルシートを外部に作って、HTML文書に読み込ませましょ う。それほど難しくはありません。 まず、テキストエディタで新規文書を作ります。次のようにタイプします。 body { background-color: #fff; color: #000} h3 { font-weight: bold; color: #0000ff; text-align: center } 入力が終わったら保存します。保存方法はHTML文書と同じフォルダに小文字で stylesheet.css と、必ず拡張子 .css を忘れないようにします。 次に、今作った css文書(スタイルシート・ドキュメント)をHTML文書に実装し ます。今まで作った index.html を変更しましょう。 <html> <head> <link rel="stylesheet" href="stylesheet.css" type="text/css"> <title>初心者のためのホームページ作り</title> </head> <body> <h3>初心者のためのホームページ作り</h3> </body> 入力が終わったら同じ名前で保存してください。→ index.html HTML文書をダブルクリックでブラウザを立ち上げてください。見事に表示できた らスタイルシートが無事読み込まれた証明です。 なお、スタイルシートの名前は自由に設定できまので、色々とアレンジしてみて ください。 例 好きな名前.css で保存後 <head>内での<link>属性は href="好きな名前.css" と書き換えてください。 (英字半角小文字です、念のため。)
次回は文書型宣言(DTD)、言語の設定、MIMEタイプなどを予定しています。難しい言葉が出てきますが、分かりやすく説明します。
<今週のタグ>
<b>、<blockquote>、<body>、<link>、<h3>、<style>