補足解説

徳保隆夫　2003.11.25

再現案　簡易解説

サイトの開始日とカウンター

キャプチャ画像

HTML

<ul>
<li>SINCE.2002.1.23</li>
<li><a href="#"><img alt="カウンター" src="count.gif" width="60" height="16"></a></li>
</ul>

CSS

ul
{width:300px; float:left; margin:2em 0; text-align:left;}
li
{display:inline; color:#fff; font-weight:bold;}

解説

元のデザインを再現するため、全体を囲む div#contents の横幅を 650px に制限しています。そのため、float:left; としても画面の左端へは行きません。また、リスト項目を横一列に並べるため、li要素を display:inline; と指定しています。

WHAT'S NEW

キャプチャ画像

HTML

<dl>
<dt>++ WHAT'S NEW ++</dt>
<dd>2002.08.25 <a href="#">diary 更新</a></dd>
</dl>

CSS

dl,dt,dd,dl a
{color:#000; background:#fff; font-weight:bold;}
dl
{width:230px; float:right; margin:1em 0; text-align:center;}
dt,dd
{margin:1em;}
dt
{font-size:big;}
dd
{font-size:small;}

.selectsheet
{clear:both; margin:1em 0; text-align:right;}

解説

カウンターなどは左へ、WHAT'S NEW は右へ寄せています。float の解除はスタイルシートを選択するセレクトボックスを囲む div.selectsheet に指定しています。その他いろいろ書かれていますが、とくに難しいところはないでしょう。

menu 周辺

キャプチャ画像

HTML

<div id="menu">
<p>新しい街、新しい学校、（中略）</p>
<h2>menu</h2>
<ul>
<li><a title="はじめまして" href="#">* about</a></li>
（中略）
</ul>
</div>

CSS

div#menu
{margin:2em 1em;}
#menu ul
{float:none;}
#menu h2,#menu ul,#menu li
{font:bold 120%/1.5em tahoma; display:inline; margin:0.3em;}

解説

h2要素、ul要素、li要素を横一列に並べる方法に注目。いつもやり方は同じ。