2005-04-22 Fri

table要素を使わない、擬似tableの作り方

2×2のテーブルならば、table要素は必要なし


 Webページ制作時に、クライアントから、table、th、td、trを一切使ってはいけないという条件を提示される方は増えてきていると思います。

 とはいえ、div要素やspan要素で無理やり・・とかも、あまりスマートではありません。

 なんとかスマートにtable要素を排除できないかなぁ、と思いました。

 そして、頭をひねりながら、神崎正英氏のユニバーサルHTML/XHTMLを眺めて、面白い要素を発見し、検索したら答えが見つかりました。

 さて、解答ですが

 ●おもに、CSS + dl、dt、dd要素を使います

 この対処の仕方をご存知の方も多いかと思います。ですけど、書いてしまいます。

 以下のソースを眺めてください。

<html>
<head>
<style>
table{border:#000000 solid 1px;border-collapse: collapse;}
tr{border:#000000 solid 1px;}
td{border:#000000 solid 1px;}
dl{width:410px;margin:0px;border-width:0px 1px 1px 0px;border-color:#000000;border-style:solid;clear:left;}
dt,dd{margin:0px;border-width:1px 0px 0px 1px;border-color:#000000;border-style:solid;}
dt{width:170px;margin:0px;font-weight:bold;float:left;clear:left;}
dd{margin-left:170px;background:#ffffff;}
</style>
</head>
<body>
<p>擬似テーブルのサンプル</p>
<br />
<p>
●table要素を使ったテーブル
<table>
<tr><td>今日は</td><td>多忙につき</td></tr>
<tr><td>他の記事は</td><td>作れませんでした</td></tr>
<tr><td>今後も</td><td>がんばりモス</td></tr>
</table>
さすが、テーブル要素。伸縮自在で扱いやすい。
</p>
<br />
<p>
●table要素を使わない擬似テーブル
<dl>
<dt>今日は</dt><dd>多忙につき</dd>
<dt>他の記事は</dt><dd>作れませんでした</dd>
<dt>今後も</dt><dd>がんばりモス</dd>
</dl>
擬似テーブルの弱点は<br />
 ・2×2のテーブルを作りづらいこと。<br />
 ・セルの幅は固定にするべき<br />
など、案外多い。<br />
</p>
</body>
</html>


 このソースをブラウザで描画すると、こちらのようになります。

 いかがでしょうか。少し融通がききませんが、まさしくテーブルです。

 なぜ、擬似テーブルはサイズが固定なのか・・それは、CSSのwidthプロパティをはずしてみれば分かります。

 今回もユニバーサルHTML/XHTMLからデザインのヒントをいただきました。

ユニバーサルHTML/XHTML
ユニバーサルHTML/XHTML
posted with amazlet at 05.04.23
神崎 正英
毎日コミュニケーションズ (2000/11)
売り上げランキング: 2,159
通常24時間以内に発送
おすすめ度の平均: 4.3
5 次世代HTML入門の名著。
5 ホームページの設計をすっきり説明してくれる
5 久々に出たHTML解説本の良著


 この記事を書くにあたり、いろいろなサイトを拝見しましたが、どれも私には難しいので引用は避けさせていただきます。

 参考になる記事をご存知の方は、是非ご連絡ください。とくに2×2以上のテーブルはどうしたものか・・。

【関連リンク】
The Web KANZAKI -- Japan, music and computer

投稿者:としのり  日時:23:59:59 | コメント | トラックバック |

2005-03-19 Sat

角丸画像無しで、角丸を実現するテクニック

角丸画像って面倒くさい


 1, 背景色を決める
 2, テーブルの大きさを決める
 3, 思考錯誤しながら円を描画、背景色とぜんぜん違う色にする
 4, 別のレイヤーで円が内円になるように正方形を描画し、正方形は背景色で塗りつぶす
 5, レイヤーを統合し4等分する。
 6, 4等分した後で、4等分された円を選択し消去する。
 7, 画像を保存する
 8, 6と7を、あと3回繰り返す

 角丸画像を作るためには、上記の作業を経る必要があり、非常に面倒であった。しかも、その画像を生かすためには、意味も無くTABLE要素をバリバリ使う必要があり、デザイナーの作業を圧迫していた。

 しかし、角丸を画像を使わずにCSSだけで実現してしまった手法を、たつをさんが紹介されていた。

The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect.


・・・天才だ。サンプルを見ても天才である。これで、面倒な作業がひとつ減った。角丸アレルギーが克服できそうな予感がするなぁ。

 そんで、いろいろ考えて欲望のままに編集してみた。

<style>
.rounded{background:#ff6600;width:150px;}
.rounded p{color:#ffffff;margin:0px 0px 0px 0px;text-align:center;}
#rtop,#rbottom{display:block;background:#ffffff;}
#rtop *,#rbottom *{display:block;height:1px;overflow: hidden;background: #ff6600}
#r1{margin: 0px 5px}
#r2{margin: 0px 3px}
#r3{margin: 0px 2px}
#r4{margin: 0px 1px; height: 2px} 
</style>
<div class="rounded">
<div id="rtop">
<span id="r1"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r2"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r3"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r4"><img src="./images/ghost.gif" width="1" height="1" /></span>
</div>
<p>個人的に満足</p>
<div id="rbottom">
<span id="r4"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r3"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r2"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r1"><img src="./images/ghost.gif" width="1" height="1" /></span>
</div>
</div>
</body></html>



 当初の「画像なしでコーナーを丸くする」というコンセプトからはズレるが、サンプルで用いているghost.gifのような1平方pxな透明gif画像なら使っているサイトは多いだろうし、その画像の再利用は簡単じゃないかなぁ。なにしろ、一回ghost.gifを作れば再利用したい放題っていうのは大きい。

 んで、上記のソースをブラウザで表示すると以下のようになる。

個人的に満足



 IEとFFで見ることが出来るし問題なし。

[2005-03-20]追記修正:なんだか、よろしくない雰囲気なので文章を修正削除した。xhtmlの規格は正直どうでも良いです。そもそも、うちのブログは意図的にxhtmlの規格を無視してます。規格は機械からすると大切かな、くらいのスタンスで生きています。表現には以後気をつけます。不愉快な思いをされた方すいませんでした。

【引用元】
Nifty Corners:Stripe it to get it rounded

【関連記事】
[を] CSSで角を丸くする
画像なしで角を丸くするCSSテク: Nifty Corners - PLAYNOTE

投稿者:としのり  日時:23:59:59 | コメント | トラックバック |