css デザインを体験してみる ＜その2＞

9. <DIV> </DIV> タグを使った css デザイン

見だしとその内容を1つのかたまりと考え、枠線で囲みます。<H1> を使った見出しとその内容は <DIV CLASS="Lead"> と </DIV> で、 <H2> を使った見出しとその内容は <DIV CLASS="Block"> と </DIV> で、それぞれはさみます。

ソース 6

10. チェックしてみよう！

ブラウザを使って、ソースを見てみましょう。見出しとその内容が枠線で囲まれ、より見やすくなりましたね。ページの紹介文が入っている <H1> とその内容を囲む枠線だけがちょっと太くなっていますよね。

これらのデザインは Test.css の中の /*各ブロックのスタイル*/ の下に書き込まれているスタイル、 .Lead と .Block とで規定されています。HTML の CLASS="XXX" の部分が css の .XXX{ } に対応する仕組みです。

11. Test.css を編集してデザインを変更してみる

css を書き換えることでデザインの変更も可能です。ここで、ためしに H2 と .Block に使われている色を変更してみましょう。

H2{ } に入っている background:#039; と .Block{ }に入っている border-color:#039; の中の #039 を両方とも #900 に変更して、Test.css をそのままの名前で上書き保存してください。ブラザでチェックすると、紺色だった部分がえんじ色に変わっていますね。

12. 複数の css を参照する ＜その1 表（テーブル）を書く＞

MoogaOneでは、表（テーブル）や箇条書きにもスタイルを適用しています。動物の項目内に以下のような表を作ってみましょう。

＜自分の好きな動物＞

哺乳類	有袋類	両生類
ネコ	ウォンバット	イモリ

以下のソースを Test.htm の <P>動物にもいろいろあるね。</P> とそれに続く </DIV> の間に書き込みます。

ソース 7

ブラウザチェックをしてみると、なんだか変ですよね。実は表（テーブル）やリスト（箇条書き）のデザインは Test.css ではなく、Test2.css という名前のファイルに書いています。下記をクリックして、 Test2.css という名前で保存します。保存場所はやはり Test.htm と同じ場所にしてください。

• Test2.css

次に、下記の1行を Test.htm のソースに追加します。追加する場所は、 <LINK REL="stylesheet" HREF="Test.css" TYPE="text/css"> と <TITLE></TITLE> の間にしてください。

<LINK REL="stylesheet" HREF="Test2.css" TYPE="text/css">

ソース 8

どうですか？ 下の画像のように見えましたか？ でもなぜ、わざわざ2つの異なる css ファイルを参照に行かなければならないのでしょうか？ 全部のデザインを1つのファイルにまとめてしまえば管理が楽になるはずです。

MoogaOne を使ったページは、全て2つの css を参照しています。1つはトップページと同じ場所に置かれた Template.css という css ファイル、もう1つはそれぞれのページと同じフォルダ内に置かれた News.css のように、それぞれのページの名前がついた css です。この事により、サイト内の全てのページに共通するデザインは Template.css に、それぞれのページにしか適用されないデザインは、固有の名前のついた css ファイルにデザインを書き込むことで、管理がしやすくなるのです。

13. 複数の css を参照する ＜その2 リスト（箇条書き）を書く＞

続いて、箇条書きに挑戦です。以下のソースを Test.htm の <P>植物にもいろいろあるね。</P> とそれに続く </DIV> の間に書き込みます。

ソース 9

箇条書きには三角形のアイコンを表示させています。下記を右クリックして、 Test.htm と同じ場所に保存してください。

• Triangle.gif

デザインは先ほど参照させた Test2.css にすでに書き込んであるので、ブラウザで、下のように見えるはずです。