cssで2段組。
最近、仕事でコーディングをやる際に、tableレイアウトではなくcssでやってしまうことの方が多くなりつつあります。
おかげで、作業スピードもかなり速くなり、今ではtableでやるよりも速くなりました。
そんなことはさておき、今日はtableを使わない段組みのTipsを紹介。
もちろん、内容が表を示すものであれば、tableでマークアップする必要があります。
でもたまに、これは表なのか?と迷ってしまうこともあるはず。
今回、例に挙げるのが、トップページに良く見られる、Topics等の更新情報を表示する部分。
下の例のように、左側に日付、右側に見出しといったレイアウトだと、
人によっては、カレンダーだしtableじゃない?という人もいるでしょう。
でも今回はリストで組んでみます。
2000.00.00 情報を更新しました。
2000.00.00 リニューアルオープンしました。
まずHTMLは、こんな感じで。
<ul> <li>2000.00.00 <a href="#">情報を更新しました。</a></li> <li>2000.00.00 <a href="#">リニューアルオープンしました。</a></li><ul>
次にcssを書いてみます。
幅を200pxと仮定して、ulをリセットします。
ul{
margin:0;
padding:0;
list-style-type:none;
width:200px;
}
次にliをこんな感じに。
li{
font-size:12px;
line-height:140%;
}
そして、aをblockにしてみます。
li a{
display:block;
}
するとこんな感じに。
- 2000.00.00 情報を更新しました。
- 2000.00.00 リニューアルオープンしました。
ピンと来た人もいると思いますが、ここで、margin,paddingの登場です。
頭揃えで横並びにするには、aタグの部分を1行分上に、そして日付の幅分右移動させてやれば良い訳です。
よって、aタグを次のように修正。
a{ margin:-1.4em 0 0 0; padding:0 0 0 5.0em; display:block;}
まずmarginに負の値を指定することで、上側に上げています。
1.4という数字は、1文字分の高さ(1.0em)に行間分(ここでは1.4em)を掛けたものです。
もちろん行間が180%であれば、-1.8emになります。
次にpaddingで右方向へ。
日付の文字数は、最大値が全角5文字(半角10文字)なので、5文字分(5.0em)のスペースを左側にあけてあげます。
これで完了。実際はこんな風↓になります。
- 2000.00.00 情報を更新しました。
- 2000.00.00 リニューアルオープンしました。
補足ですが、右方向に移動するには、実はmarginでも出来ます。
しかしここではpaddingを使いました。
その理由は、境界線を引くことが良くあるからです。
ではaタグにborderを追加してみます。
a{
margin:-1.4em 0 0 0;
padding:0 0 0 5.0em;
display:block;
border:solid #333333;
border-width:0 0 1px 0;
}
結果はこちら↓
- 2000.00.00 情報を更新しました。
- 2000.00.00 リニューアルオープンしました。
ん〜、表らしくなってきた。
こんな感じで意外と簡単に出来てしまいます。
背景色や背景画像等を指定して、思い通りにカスタマイズしてみて下さい。
最後に一言。
明らかに表の場合は、必ずtableタグでマークアップしましょう。