テキストページ

のような他の要素に対しても背景色が同じになっています。これを「継承」といって、親の要素であるbodyで設定された背景色、文字色、フォントサイズが他の要素にも通じるということです。（ただし特定の要素についてはそうでない場合があり、これも講座を進めていく中で解説します。）　しかし、他の要素がその属性で設定してある場合は、そちらが優先されます。では、オレンジ色に設定しましたから、親要素（この場合は div要素の濃い青）ではなくオレンジ色で表現されるわけです。　でも

では文字色を設定していないので、親要素の色が適用されるというわけです。（この場合はbody要素の黒色になります。）詳しくはこの講座のサイト内にある「要素の親子関係」　http://www.scollabo.com/banban/lectur/ht6.html を参照してください。 ……………………………………………………………………………………………… ◆タグに記述する属性や値とスタイルシートに記述する属性や値の違い第１号でタグやは廃止予定と述べました。これは要素として廃止予定ということで、スタイルシートにおける属性までは廃止されません。同様に
というふうに h1の属性として記述する align属性とcenter という値は廃止予定ですがスタイルシートにおける属性と値は廃止されません。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 今度はスタイルシート文書（test_01.css）はそのままにしてHTMLを変えてみましょう。新たに
という要素を使います。この要素もブロックレベル要素で、段落を表現します。前後に改行が入ります。テキストページ
これはテキストのページです

初心者のためのホームページ作りの勉強をしています。今週はテキストを中心としたページの勉強をしています。だんだん本格的になりました。

講座は、だんだん難しくなりますが、踏ん張り時です。

この講座で勉強して、必ずプロ並みの表現力を身に付けて素晴らしいホームページを作りたいと思っています。
上記のHTMLを使って自分で好きな文章に書き換えてください。Webページ作りの楽しさが少しづつ実感できると思います。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ さて、ここまで無事にできましたか？時間をかけてゆっくり、ひとつづつ理解しながら作業してくださいね。どうしても分からない場合は、Webページの掲示板を利用するなり、直接メールください。次に、今度はスタイルシートだけを変更してみましょう。テキストエディタでtest_01.cssを開いてください。下記の通りにタイプしてください。入力できたら上書き保存してくださいね。 body { background-color: #cff; font-size: 12pt; color: #000 } div.test { background-color: #6ff; color: #006; line-height: 135% } span { color: #c30 } h2 { font-size: 20pt; font-weight: bold; color: #096; text-align: center } p {font-weight: bold } spanはそのままで、それ以外を変えました。色の16進法の記述が３桁になっていますが、問題ありません。これについては講座を進めていく中で説明します。保存できたらHTML文書をブラウザで立ち上げるか、立ち上がっていたら「再読込み」もしくは「更新」ボタンを押してください。　HTML文書は変わらないのに、表現がだいぶ変わりましたね。外部にスタイルシートを置くと、CSS文書の中身を少し変えるだけでWebページの雰囲気が大きく変わるものです。このテクニックをマスターすると楽しさがグンと広がります。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆解説 body { background-color: #cff; font-size: 12pt; color: #000 } 全体の背景色を薄い青緑に、フォントのサイズを12ポイント、文字色を黒に設定しました。ここに記述された属性と値は、他の要素にも使えるものです。 div.test { background-color: #6ff; color: #006; line-height: 135% } 段落を表示する div要素に背景色をやや濃い青緑に、文字色を濃い青に、文字の行間を135%に設定しました。ここに記述された属性と値も、他の要素にも使えるものです。 h2 { font-size: 20pt; font-weight: bold; color: #096; text-align: center} 見出し要素の h2 の文字の大きさを20ポイント、字体を太字、文字色を濃い緑、位置揃えをセンタリングしました。 p {font-weight: bold } 段落をあらわす p要素の字体を太字に設定しました。この要素はブロックレベル要素で前後に改行が入ります。これも段落のひとつです。 ……………………………………………………………………………………………… もし、スタイルシートがなかったらどうやってこれをHTML文書で記述するんでしょうね。もちろん可能ですが、大変な作業になりますし、文章全体が複雑になり後で訂正や変更があったときには探すのも面倒になってきます。　スタイルシートの利用は、文書全体がすっきりして、後々の作業性の効率が上がり、短時間で編集できる利点があります。何回も繰り返して使う場合など本当に便利な機能ですね。　テキストに関するスタイルシートのリファレンスは、　http://www.scollabo.com/banban/ref/refcss_03.html 　をご覧ください。サンプルもそれなりに用意しています。 HTMLで文章を記述する上で、段落は読む人に読みやすい環境を提供します。しかしながら、多くの Webページでは、段落を勘違いして、やたら強制改行の
を連発して段落を作っていますが、文法的には誤りです。今回講座で勉強した段落の取り方と次回予定しているボックス、その総称としてブロックレベルというものをマスターして正しい文法を身につけてください。今回はここまで、ではでは・・今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。Ｗｅｂページは画像が使えるので、より分かりやすく説明しています。あわせて過去の記事のおさらいも掲載しています。（今週のおさらい） http://www.scollabo.com/banban/magazine/ 次回は、段落をもう少しパワーアップしたボックスを予定しています。今後の予定ボックス、色、位置と表示形式、アンカー（リンク）、画像、リスト、テーブル、フォーム、CGI、JavaScriptなどなど ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆ホームページ作りのポイントユーザが見るディスプレイサイズを意識することも大切です。最近ではめったに見られなくなりましたが、昔は600Ｘ400という非常に狭い画面でパソコンを使っていたものでした。最近はノートパソコンでは、800Ｘ600が多く、デスクトップでは17インチＣＲＴディスプレイ、あるいは15インチ液晶ディスプレイが主流となり、1028Ｘ768サイズが多くなっています。（800は800ピクセルの意味）　制作者の環境だけで全体の幅を決めてしまうのは危険です。最低でもノートパソコンの800Ｘ600でも十分に見られるようなサイズにしましょう。　特別の意図がない限りユーザに横スクロールを強要してしまうページ作りは避けたいものです。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 質問・ご意見ははこちらまで→　banban@scollabo.com なお、ご質問の際には、お使いのOS、通常使っているブラウザ、また他に持っているブラウザ、使っているテキストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなると思います。発行者　ばんばん協　力　スズキ・コラボレーション　http://www.scollabo.com/ 配信エンジン　まぐまぐ　http://www.mag2.com/ （ID　0000090196）バックナンバー　こちらで公開しています。プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ＜えでぃた～ず・るーむ＞総務庁の発表によると、ブロードバンドの普及率が４月末で 426万7215回線に達したようで、すごい数字だなと実感しています。昨年11月末時点では、まだ 200 万人にも満たなかったのに、加速度的な勢いで普及していますね。　ブロードバンド本命のFTTH（光ファイバー）でも３万5000回線に迫っているしホームページ制作者にとってもいい傾向にありますね。重たいページもサラリと表示できるのはうれしいものです。　とはいえ、全体の数値ではまだまだです。特に過疎地域ではADSLですら回線がいきわたっておらず、その見通しすら立っていないのが実情です。相変わらずのダイヤルアップで、遅い速度で我慢しているわけですよ。　政府の「e-Japan重点計画」というプロジェクトでは、今年年末までに 900万所帯のブロードバンド化を進めているけれど、全国の住宅都市整備公団や住宅供給公社の団地では、すぐそばまで回線が来ているのに、「団地」というだけでブロードバンドを諦めているようです。古いマンションなんかも同様みたいです。　日本全体がブロードバンド化するのは、まだまだ先のようです。その点をしっかり認識してＨＰ制作の工夫を考えましょう。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆著作権について個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じておりません。記事中のすべての内容についての著作権は放棄していません。無断で使用することを固く禁じます。　　Copyright(C) 2002 www.scollabo.com/banban/ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■�