css デザインを体験してみる <その2>

続いて、<DIV> </DIV> タグを用いた css を学びます。このタグを用いることで、<H1> や <P> などの一般的 HTML タグから解放された css のデザインが可能になります。ここからはソースが長くなるので必要部分の抜粋のみを表示しますね。

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

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

ソース 6

<DIV CLASS="Lead">

<H1>はじめに</H1>

<P>このページは自分の好きな動植物についてのページです。</P>

</DIV>


<DIV CLASS="Block">

<H2>動物</H2>

<P>動物にもいろいろあるね。</P>

</DIV>


<DIV CLASS="Block">

<H2>植物</H2>

<P>植物にもいろいろあるね。</P>

</DIV>

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

<TABLE>

<CAPTION><自分の好きな動物></CAPTION>

<THEAD>

<TR>

<TH>哺乳類</TH>

<TH>有袋類</TH>

<TH>両生類</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>ネコ</TD>

<TD>ウォンバット</TD>

<TD>イモリ</TD>

</TR>

</TBODY>

</TABLE>

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

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

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

ソース 8

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">

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

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

<TITLE></TITLE>

どうですか? 下の画像のように見えましたか? でもなぜ、わざわざ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

<UL CLASS="Menu">

<LI>カタクリ

<LI>ホトトギス

<LI>ナンバンギセル

</UL>

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

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

<< css デザイン体験1| css デザイン体験3>>

お問い合わせメールはmoogaone@gmail.com(@は小文字にして)まで

Design Concept by MoogaOne