2011年4月アーカイブ

以前の記事、「div内でfloatを使うときの注意点」で書いた通り、
大枠の div の height を中身の要素（floatあり）に合わせて伸ばすには、
大枠の div に overflow:hidden; を指定するという方法があります。

しかし、これだけではIE6では上手くいかなことがあります。

前記事の例では自然に指定していましたが、
overflow の指定だけではなく、width の指定も必要だったようです。
（そうしないと、中身の要素が折り返される場合に計算ができないのだとか・・）

ということで、前記事の方法を使う場合は、

・overflow:hidden;
・width:○○○;

この2つを指定しましょう。

上図のような表をdlで作成する場合、
今まではdt、ddにきっちりwidthを指定し、
それぞれにborder-bottomを指定。
dtにfloat:left;、ddにfloat:right;を指定するという方法でやっていました。
でも、「う」の段のように、ddのテキストの行数がdlよりも多いと
border-bottomがずれてしまいます。
ならborder-top指定すれば？と思いますが、
「え」の段のように、逆にdtのテキストの行数が多いと
「お」の段が回り込んでしまいます。
そうすると、一段ずつdlにするというような
何とも不細工なソースになってしまっていました。

調べてみると、下記の様にすればで崩れずソースもきれいなままです。
それは、dtにwidthとfloat:left;を指定border-bottomの指定はナシ。
ddには、dtのwidth分のpadding-leftとborder-bottomを指定、floatとwidthの指定はナシ。

具体的にはこんな感じです。

--------------

dl{
width:500px;
list-style:none;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background:url(dtについている色を画像で指定) repeat-y left top;
overflow:auto;
}

dt{
clear:both;
width:100px;
float:left;
}

dd{
border-bottom: 1px solid #999999;
padding:0 0 0 100px（dtのwidth分）;
}

--------------

リストなどで1行が長くなってしまうと、

｜※テキストテキスト
｜※テキストテキストテキストテキ
｜ストテキスト
｜※テキストテキストテキ

折り返されてこのようになってしまいます。
ですが、折り返されたあとは※ではなく文字の初め（テキストの"テ"）に
合わせたいということが殆どかと思います。

今まではpaddingと背景画像を使って再現していたのですが、
もっとずっと楽な方法があること知ったのでメモしておきます。

上の例がリストであるとして、ソースはこのようになっていると思います。

<ul>
<li>※テキストテキスト</li>
<li>※テキストテキストテキストテキストテキスト</li>
<li>※テキストテキストテキ</li>
</ul>

まず、この<li>タグに左paddingを指定します。
1文字分、と指定するのがいいと思いますが、崩れる場合もあるようなので
そのときはピクセルで。

padding-left:1em;　または　padding-left:12px;　など

これで一文字分、右にずれることになります。

｜　※テキストテキスト
｜　※テキストテキストテキストテ
｜　キストテキスト
｜　※テキストテキストテキ


次に、行の先頭だけ左にずらします。

タグにtext-indentを指定します。

text-indent:-1em;

これで頭だけ左にずれ、改行後の先頭はテキストに揃う形になります。

｜※テキストテキスト
｜※テキストテキストテキストテキ
｜　ストテキスト
｜※テキストテキストテキ


それにしても、text-indentなんてまさにこういう用途のために
用意されているようなクラスですよね・・
もしくは先頭1文字下げるとか。

普段、画像置き換えのために文字を吹っ飛ばすくらいしか
使っていなかったので、目から鱗な気分です。