Home ＜ 第１号 ＞ 第３号

初心者のためのホームページ作り　第１号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

バックナンバーはこちらから → 第１号 目次

＜第２号＞マガジンのおさらい
まず、記事から抜書きでおさらいします。

　　　　　　　　　　　　　　　　　　毎週金曜日配信　What's New 2002/5/24
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　　　　　　　　　　初心者のためのホームページ作り
　　　　　　　　　　　　　　　＜第２号＞

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
決まりごと・・スタイルシート
HTMLを書く上でＷ３Ｃから勧告されている決まり事がたくさんあります。
最近ではスタイルシートを使って表現を定義するようにされていますが、講座を
すすめていく中でスタイルシートを解説します。非常に便利な機能ですので是非
利用してください。スタイルシートは（Cascading Stylesheet）カスケーディン
グ・スタイルシートの略で、テキストの段落やフォントの各種の設定など、見栄
え全体を定義して表現できるものです。
　例えば、ワープロソフトでは、フォントの大きさ、色、書体の種類を簡単に変
えられますよね。段落や位置の設定もクリックひとつです。枠線の太さや色づけ
も楽チンです。これらはすべてワープロソフトの持っているスタイルシートで行
っているのです。この機能がＷｅｂでも使えるのです。
　スタイルシートが使えなかったときには、すべての要素で見栄えを属性として
書いたものでした。もう面倒くさくて大変でしたが、スタイルシートの登場は制
作者にとって福音になったことでしょうね。
◆解説
過去、そして現在の多くのWebサイトでは、<spacer>、<table>、<blockquote>等の要素を使って、ページの見栄えをやりくりしています。しかしながら、厳密にはHTML4.01では文法違反なのです。と言いつつも私も、堂々と文法違反はしていますが・・

スタイルシートに関しては、TipsのCSS、もしくは基礎講座のスタイルシートをご覧ください。

ちなみにこの青線の四角い囲みはスタイルシートで作ったものです。 
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
スタイルシート　その１
Ｗ３Ｃでは近い将来 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> に置くエンベッド方式や外部
スタイル方式は、ページ全体の各要素に対してはじめから定義して、繰り返し使
うようにします。例えば、たまにどうしてもある部分のテキストを赤にしたい場
合、最初から定義してしまうよりも、そこの部分だけインラインで書いた方がス
タイルシート自体を管理する上でも後々楽になってきます。
◆解説
Sample 左の図は上記スタイルシートでのサンプルを表現したものです。
（ブラウザは、NS6.2）
スタイルシートを自分のものにすると本当に面白くなります。そのためにはスタイルシートの属性と値を熟知する必要があります。当サイトでは、皆さんのために少しでも支援ができるようCSSリファレンスを設けています。サンプルもふんだんに使用して分かりやすく解説していますのでご覧ください。主にエンベッド方式、外部方式に重点をおいて記述しています。分からない点があったり、記述に誤りがあったら御一報ください。

お詫び
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" と書き換えてください。
（英字半角小文字です、念のため。）
◆解説
スタイルシート（CSS)を外部に置くと、サイトすべてのページに流し込んで同じような表現が得られます。ちなみに当サイトでも大部分を外部スタイルシートに依存して表現しております。外部スタイルシートの利点として、どうしても表現に変更が生じたとき、すべてのページを変更していたのでは大変な作業になってしまいます。外部スタイルシートならばたった１行の変更で楽に作業が終えられます。
 今後の講座では、スタイルシートを中心に進めていきます。スタイルシートは必須です。最初はまったくの真似事から始めていき、徐々に自分のものにしましょう。覚えると楽しくなってきますよ。

次回は文書型宣言（DTD）、言語の設定、MIMEタイプなどを予定しています。難しい言葉が出てきますが、分かりやすく説明します。

＜今週のタグ＞
<b>、<blockquote>、<body>、<link>、<h3>、<style>

PageTop / Home / 目次
Copyright(C) 2002-2003 banban@scollabo.com