???FLAFLI

最近、全然ブログを書く余裕すらないのですが、とりあえず盆休みも今日まで。ってことで、一つ。

どうやら家計が厳しいらしいです。うち。

まったくもって、webネタではないのですが、お金がないっぽいです。
ちょっと副業しなきゃなぁ。って考えてます。

ってことで、僕に出来る副業ってどんなもんがあるかなぁ。なんて考えてみました。
ま、半分適当で、半分本気なお話…。

ふと今しがた思ったことなんですが、この業界ってほんと流れが速い。

早いじゃなくて、速い。

ついこの前まで、tableレイアウトじゃだめだ。これからはcssレイアウトだ。っていってて、
でも、どこの大手サイトもまだtableレイアウトだから、まだいいんじゃないか。ってゆってたら、
gooが大手で最初にcssレイアウトに取り組んだかと思ったら、
いつのまにかcssレイアウトが当たり前。

みたいな。

ほんとこれ数年の話。
ってか2,3年か。

速いです。

遅れていかないようについていくのが精一杯な感じも。

たまには仕事がらみのお話も。

最近は、dt、ddを使って、擬似的な表組みを作ることがあります。
別にテーブルでもいいんですけどね。

表組みだったら、テーブルでもいいんだけど、ちょっと違うかな。ってときは、dt、ddを使ってます。

で、その方法。

HTMLソース

<dl>

<dt>項目1</dt>

<dd>項目1の内容です。</dd>

<dt>項目2</dt>

<dd>項目2の内容です。</dd>

<dt>項目3</dt>

<dd>項目3の内容です。項目3の内容です。項目3の内容です。</dd>

</dl>

で、CSS

dl,dt,dd {

margin: 0;

padding: 0;

}

dl {

border: 1px solid #333;

border-top: none;

width: 300px;

background: #e7e7e7;

}

dt,dd {

padding: 3px;

}

dt {

border-top: 1px solid #333;

clear: left;

float: left;

width: 80px;

}

dd {

margin-left: 80px;

border-top: 1px solid #333;

border-left: 1px solid #333;

background: #fff;

}

サンプルはこちら。

やっていることといえば、dtをfloatさせてるだけ。
で、dt分の幅のマージンをddに与えてあげると、表組みのようになります。

これだとIE6以上とFirefoxではしっかりと表組みに見えます。
IE5.5以下だと、dtとdd間に隙間ができます。
このあたりはもうちょっといろいろ必要です。

この方法でいいところは、dd要素に長い内容が入っても、しっかりと表組みのように見えてること。
逆にdt要素に長い内容が入ると崩れてしまいますけど…。

一つ覚えておくと便利なので、ご利用する機会があればぜひ(^^ゞ

ただdtとddを左右に並べるだけなら、そんなに難しくありません。
問題はborderが絡んでくるとやっかい。ってこと。

一番の解決策は背景画像で置いてあげることかなぁ。って思いますが、それだと毎回画像作らないといけないしね。

誰か、いい解決法を見つけてくれればいいんですけど…。

他にも、dt、ddを左右に並べる方法はあります。
以下。