人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

テーブルタグの代用をスタイルシートで実現するときのテクニックを出来るだけたくさんのレパートリーで紹介してください。
ぱっと思い浮かんだのは下記のような方法です。
<span style =”width:10em;border-style:solid;border-width:1px 1px 1px 1px;”>左上</span><span style =”width:10em;border-style:solid;border-width:1px 1px 1px 0px;”>右上</span><br />
<span style =”width:10em;border-style:solid;border-width:0px 1px 1px 1px;”>右下</span><span style =”width:10em;border-style:solid;border-width:0px 1px 1px 0px;”>右下</span><br />
しかし、
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
が存在するときちんと表示されません・・・(Widthの設定がうまくいかない)

●質問者: sls
●カテゴリ:ウェブ制作
✍キーワード:スタイルシート タグ レパートリー 存在
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● sasada
●24ポイント

http://msugai.fc2web.com/web/CSS/table.html

CSS 概説 | テーブル

cssのdisplayプロパティを使用すれば、div等の任意の要素でもtableモドキが作れることになってます。

・・・仕様上は。

IEでマトモに対応していないのが残念ですが、レパートリーのひとつに加えていただけると嬉しいです。f(^^;。

◎質問者からの返答

ありがとうございます。

そうなんですがー。しりませんでした。

さっそくためしてみます。


2 ● かふし
●23ポイント

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#d...

質問文にある例ですが、widthプロパティはインライン要素には適用出来ないので、「きちんと表示されない」挙動が正しいのです。

さて、代用例ですが。

1. displayプロパティのtable関連の値を利用する(URI参照)

2. floatを使つた段組

3. position等を使つた段組

が挙げられるでせうか。

取敢ず、2と3の例を下に記します。

<h2>floatを使つた段組</h2>

<div>

<div style=”width:5em;border:#666 1px solid;float:left;”>div要素</div>

<div style=”width:5em;border:#666 1px solid;float:left;margin-left:0.5em;”>div要素</div>

</div>

<div style=”clear:both;”>

<div style=”width:5em;border:#666 1px solid;float:left;”>div要素</div>

<div style=”width:5em;border:#666 1px solid;float:left;margin-left:0.5em;”>div要素</div>

</div>

<hr style=”clear:both;”><!-- 段組解除する際は何らかの要素でclearプロパティを指定する必要あり -->

<h2>position等を使つた段組</h2>

<div style=”position:relative;”>

<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:0;left:0;”>div要素</div>

<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:0;left:5.5em;”>div要素</div>

<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:1.5em;left:0;”>div要素</div>

<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:1.5em;left:5.5em;”>div要素</div>

</div>

◎質問者からの返答

>質問文にある例ですが、widthプロパティはインライン要素には適用出来ないので、「きちんと表示されない」挙動が正しいのです。

そうでした!ありがとうございます。

また、頂いたコードの方も勉強になりました。


3 ● dim
●23ポイント

http://www.motchie.com/article/multicolumn.html

スタイルシートでマルチカラム・デザインを実現する方法

左上右上

右下右下

上はこちらの環境で表示された結果です。枠線が入っていますけれども。この表示結果に問題があるということでしょうか?

この方法で幅を決定していきたいということであれば、widthをpaddingに変更すれば問題ないと思われます。

マルチカラムデザインと呼ばれる、cssでtableデザインを実現するということであるのならば・・・。

sasadaさんが指摘された、cssでtableデザインを実現する方法について記載されているページを3つ、実現の面で参考になりそうなページを1つ、それぞれ出しておきます。

http://www.fromdfj.net/html/column.html

fromdfj.net

http://www6.plala.or.jp/go_west/nextcss/

CSS Dencitie

http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html

段組てすと

◎質問者からの返答

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ