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

最後に2段組のレイアウトに挑戦です。ページの紹介文見出しとその内容はそのままに、動物・植物の見出しとその内容を左右に段組にしましょう。

14. レイアウト用のスタイル

今のままだと動物も植物も同じ <DIV CLASS="Block"> と </DIV> ではさまれているので、一方を左にもう片方を右に寄せるように指示できません。左右2段組を実現するには動物には左位置を指示するための css、植物には右位置を指示するための css をそれぞれ適用する必要があります。

そのために動物のセクション全体を <DIV CLASS="Left"> と </DIV> ではさみます。また、植物のセクション全体を <DIV CLASS="Right"> と </DIV> ではさみます。<DIV> </DIV> タグが二重になって、いわゆる入れ子構造になりましたね。

ソース 10

<DIV CLASS="Left">

<DIV CLASS="Block">

<H2>動物</H2>

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


表のソース中略


</DIV>

</DIV>


<DIV CLASS="Right">

<DIV CLASS="Block">

<H2>植物</H2>

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


箇条書きのソース中略


</DIV>

</DIV>

二段組のための css は Test.css 内に書いてあります。ブラウザでチェックしてみましょう。どうですか、左右に二段組になっていれば成功です。おめでとうございます。

15. 完成後の HTML と css と ブラウザによるイメージ

完成おめでとうございます。最後に答え合わせです。完成した HTML は以下のとおりです。

ソース 11 (Test.htm)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

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

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

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

<TITLE></TITLE>

</HEAD>

<BODY>

<DIV CLASS="Lead">

<H1>はじめに</H1>

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

</DIV>

<DIV CLASS="Left">

<DIV CLASS="Block">

<H2>動物</H2>

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

<TABLE>

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

<THEAD>

<TR>

<TH>哺乳類</TH>

<TH>有袋類</TH>

<TH>両生類</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>ネコ</TD>

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

<TD>イモリ</TD>

</TR>

</TBODY>

</TABLE>

</DIV>

</DIV>

<DIV CLASS="Right">

<DIV CLASS="Block">

<H2>植物</H2>

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

<UL CLASS="Menu">

<LI>カタクリ

<LI>ホトトギス

<LI>ナンバンギセル

</UL>

</DIV>

</DIV>

</DIV>

</BODY>

</HTML>

使用した2つの css は以下のとおりです。

ソース 12 (Test.css)

/*全体のスタイル*/


BODY{

background:#fff;

margin:20;

}


P{

font-size:85%;

line-height:150%;

margin:10 15 10 15;

padding:0;

}


/*各ブロックのスタイル*/


H1{

clear:left;

background:#66f;

color:#fff;

font-size:85%;

margin:0;

padding:2 15 2 15;

}


.Lead{

float:left;

width:100%;

border-width:4;

border-style:solid;

border-color:#66f;

margin:10 0 15 0;

padding:0;

}


H2{

clear:left;

background:#039;

color:#fff;

font-size:85%;

margin:0;

padding:5 15 2 15;

}


.Block{

float:left;

width:100%;

border-width:1;

border-style:solid;

border-color:#039;

margin:0 0 15 0;

padding:0;

}


/*レイアウトのスタイル*/


.Left{

float:left;

width:49%;

}


.Right{

float:right;

width:49%;

}

ソース 13 (Test2.css)

/*リストのスタイル*/


.Menu{

clear:left;

margin:10 0 10 20;

padding:0;

list-style:none;

}


.Menu LI{

list-style:none;

background:URL(Triangle.gif) no-repeat top left;

line-height:150%;

text-align:left;

font-size:85%;

margin:0;

padding:0 15 0 12;

}


/*テーブルのスタイル*/


TABLE{

clear:left;

border-top:1px solid #666;

border-left:1px solid #666;

background:#fff;

border-collapse:collapse;

border-spacing:0;

empty-cells:show;

margin:10;

}


TH{

border-right:1px solid #666;

border-bottom:1px solid #666;

color:#fff;

background:#039;

font-size:85%;

text-align:center;

margin:0;

padding:5;

}


TD{

border-right:1px solid #666;

border-bottom:1px solid #666;

background:#fff;

font-size:85%;

margin:0;

padding:5;

}


CAPTION{

color:#633;

font-size:85%;

font-weight:bold;

text-align:left;

margin:0;

padding:0 0 5 0;

}

<< css デザイン体験2|

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

Design Concept by MoogaOne