MoogaOneトップ >
このページ
最後に2段組のレイアウトに挑戦です。ページの紹介文見出しとその内容はそのままに、動物・植物の見出しとその内容を左右に段組にしましょう。
今のままだと動物も植物も同じ <DIV CLASS="Block"> と </DIV> ではさまれているので、一方を左にもう片方を右に寄せるように指示できません。左右2段組を実現するには動物には左位置を指示するための css、植物には右位置を指示するための css をそれぞれ適用する必要があります。
そのために動物のセクション全体を <DIV CLASS="Left"> と </DIV> ではさみます。また、植物のセクション全体を <DIV CLASS="Right"> と </DIV> ではさみます。<DIV> </DIV> タグが二重になって、いわゆる入れ子構造になりましたね。
<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 内に書いてあります。ブラウザでチェックしてみましょう。どうですか、左右に二段組になっていれば成功です。おめでとうございます。
完成おめでとうございます。最後に答え合わせです。完成した HTML は以下のとおりです。
<!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 は以下のとおりです。
/*全体のスタイル*/
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%;
}
/*リストのスタイル*/
.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;
}
お問い合わせメールはmoogaone＠gmail.com（@は小文字にして）まで