補足解説

徳保隆夫 2003.09.27

CSS Tips

inline要素にborder その1

キャプチャ画像

HTML

<ul id="sitemap" title="サイトマップ">
<li id="light" title="軽量版"><a href="#">Light Version</a></li>
<li id="standard" title="標準版"><a href="#">Site Map</a></li>
</ul>

CSS

ul#sitemap
{text-align:left;}
ul#sitemap li
{font-size:90%; display:inline; padding:0 0.2em;}
li#light,li#standard
{border-left:1em solid #666;}
li#standard
{border-right:1em solid #666;}

解説

教材では<DIV align=left><FONT size=1>■<A title=軽量版 href="#">Light Version</A>■<A title=サイトマップ href="#">Site Map</A>■</FONT></DIV>というようにテキストで四角形の記号が書かれているのだけれども、改善案の作成を考えた場合に、これでは都合が悪いのです。

リニューアルしてデザインを変更することを考えるなら、単なる装飾はテキストから分離すべきです。そこで、borderで擬似的に四角形の記号を再現することにしました。

li要素をdisplay:inline;とした上で、borderを指定しています。li#lightは左側のみ、li#standardは両側にborderがあります。

リスト項目の特殊な整形

キャプチャ画像

HTML

<ul id="counter">
<li><img src="pngcount.png" alt="キリ番の方、掲示板かメールで連絡ください!" width="90" height="20"></li>
<li id="today" title="本日"><img src="pngcount1.png" alt=" " width="36" height="9"></li>
<li id="yesterday" title="昨日"><img src="pngcount2.png" alt=" " width="36" height="9"></li>
</ul>

CSS

ul#counter
{border:orange 3px solid; width:90px; margin:1em auto; list-style:none;}
li#today
{float:left; width:40px;}
li#yesterday
{float:right; width:40px;}

解説

トリッキーな整形を行っています。画像の大きさがわかっているので、それに合わせて各要素の大きさを指定し、floatを用いて。li要素はul要素の子要素なので、floatしてもul要素の中に収まります。

white-space:pre; の活用 その1

キャプチャ画像

HTML

<ul id="contents"><li><img></li><li><img></li><li><img></li>
<li><img></li><li><img></li><li><img></li></ul>

CSS

ul#contents
{border:orange 6px solid; width:230px; padding:10px; margin:1em auto; white-space:pre;}
ul#contents li
{display:inline;}

解説

white-space:pre; は、pre要素のようにソースの改行が整形結果に反映されるプロパティ値です。今回の目標は、目次を構成する6つのimg要素を3つずつ2行で表示することでした。これをきれいに実現するのはなかなか面倒な話で、li要素に display:inline; を指定し、ul要素を white-space:pre; とするのが、一番簡単だったというわけです。

inline要素にborder その2

キャプチャ画像

HTML

<h3><span class="sub">サブコンテンツ</span></h3>

CSS

h3 span.sub
{font-size:95%; margin:0.5em auto; border-left:1em solid #ccc; border-right:1em solid #ccc;}

解説

span要素を用いていますが、これはいわば痛恨の極み。再現案作成のために致し方なく導入した意味のない要素です。blocklevel要素のborderとinline要素のborderでは結果が異なります。要素のアウトラインが異なるためです。そのため、ここではどうしてもinline要素であるspan要素が必要だったのです。(註:h3 と ul.sub を包含する div#sub を導入し、div#sub h3 を display:inline; とする手もあります)

float:left; で段組

キャプチャ画像

HTML

<dt class="main">***</dt>
<dd>
<ul id="banner">
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
<p>***</p>
</dd>
<dt class="main">***</dt>(後略)

CSS

dt.main
{color:#fff; background:blue; font-size:120%; clear:both;}
dl.main dd
{padding:0.5em 0 0.5em 1em; font-size:95%; font-weight:normal;}
ul#banner
{width:100px; float:left;}

解説

floatを用いる際の注意点は2つ。

  1. floatを指定する要素のwidthを確実に指定すること
  2. 回り込みを避けたい要素にclearプロパティを適切に指定すること

white-space:pre; の活用 その2

キャプチャ画像

HTML

<p id="ring"><a href="#">□微笑系テキストWebRing□</a>
[ <a href="#">5-Previwew</a> | <a href="#">Preview</a> | <a href="#">Back</a> ]
[ <a href="#">Next</a> | <a href="#">Skip</a> | <a href="#">5-Skip</a> ]
[ <a href="#">Random</a> | <a href="#">List</a> ]</p>

CSS

p#ring
{font-size:90%; margin:1em auto; white-space:pre;}

解説

p要素とするのが妥当かどうかはさておき、これは white-space:pre; を使わずにお望みの整形結果を得るのが難しいケースのひとつです。br要素を用いてしまうと、改善案の作成に困ります。WebRingに4行も消費されたくありませんからね。

改善案ではbr要素を display:none; とすればよい、という考え方もできますが、装飾の役にしか立たない要素はなるべく使いたくないものです。

position:absolute; で段組風レイアウト

position:absolute; のポイントは、まず空白をいかに作るかを検討するということ。お望みの場所に、希望通りの空白さえ作ることができれば、そこに収まるように絶対配置で要素を置くのはそれほど難しくありません。

空白を作る

キャプチャ画像

h1,p#time,p#notice
{text-align:right;}
h2#info,dl.main,p#ring,dl#search
{margin-left:187px;}

絶対配置で要素を置く

キャプチャ画像

div#index
{position:absolute; top:100px; left:0; width:187px; background:#ffa500;}