TABLEデザインのサイトをCSSでどこまで再現できるか

1 ：Name_Not_Found：04/03/07 15:53 ID:???.net

まあやってみてくれ

2 ：Name_Not_Found：04/03/07 15:55 ID:???.net

>>1
昔
http://bubble.2ch.net/mukashi/

3 ：Name_Not_Found：04/03/07 15:56 ID:???.net

DWでテーブル→レイヤー変換で一発だけど。

4 ：Name_Not_Found：04/03/07 15:57 ID:???.net

新スレおめ

そして糸冬了

5 ：Name_Not_Found：04/03/07 16:00 ID:???.net

↓細々した言い訳開始↓

6 ：Name_Not_Found：04/03/07 16:32 ID:???.net

そんなことより>>1よ、ちょっときいてくれよ。スレと全然関係ないけどさ。
昨日、さいたまのジュリアナ南与野に行ったんです。ジュリアナ南与野。
そしたらなんか人がめちゃくちゃいっぱいいて踊れないんです。
で、よく見たらなんか垂れ幕下がってて、オールナイトフィーバーとか書いてあるんです。
もうね、アホかと、馬鹿かと。
おまえらな、オールナイトフィーバーごときで普段来てないジュリアナ南与野に
来てんじゃねーよ、ボケが。
オールナイトフィーバーだよ、オールナイトフィーバー。
なんか愛人連れとかもいるし。２人揃ってジュリアナ南与野か、おめでてーな。
よーしパパお立ち台に上っちゃうぞー、とか言ってるの。もう見てらんない。
おまえらな、ラブホ代やるからその場所空けろと。
ジュリアナ南与野ってのはな、もっと殺伐としてるべきなんだよ。
お立ち台の上で踊っている奴といつ喧嘩が始まってもおかしくない。
刺すか刺されるか、そんな雰囲気がいいんじゃねーか。男連れは、すっこんでろ。
で、やっと踊れたかと思ったら、隣の奴が、東京音頭キボンヌ、とか言ってるんです。
そこでまたぶち切れですよ。
あのな、東京音頭なんてきょうびヤクルトファンしか知らねえよ。ボケが。
得意げな顔して何が、東京音頭キボンヌ、だ。
お前は本当に東京音頭を踊りたいのかと問いたい。問い詰めたい。小１時間問い詰めたい。
お前、東京音頭って言いたいだけちゃうんかと。
ジュリアナ南与野通の俺から言わせてもらえば今、ジュリアナ南与野通の間での
最新流行はやっぱり、さいたまさいたまさいたまー、これだね。

7 ：Name_Not_Found：04/03/07 17:59 ID:???.net

良スレの予感がぜんぜんしないのだが、良スレにしていく価値はあるかも知れん

8 ：Name_Not_Found：04/03/07 18:25 ID:???.net

漏れは結構(･∀･)ｲｲ!!と思うがな…
まぁ>>1よ、ｶﾞﾅﾚ

9 ：Name_Not_Found：04/03/07 19:14 ID:???.net

>>1は逃げました。
誰か代わりに「tableでこんなのやってるけど」と提示してください。

10 ：Name_Not_Found：04/03/07 19:43 ID:???.net

まあ、あれだ。ネタにマジレスｶｺﾜﾙｲが、言っておく。
テーブルのような固定的デザインはCSSで作ってもあんまり意味がないんじゃないのか、と。

11 ：Name_Not_Found：04/03/07 20:33 ID:???.net

>>10
じゃあCSSなんぞいらんな。

12 ：Name_Not_Found：04/03/07 20:35 ID:???.net

>>11
うん。使わなくていいよ。

13 ：Name_Not_Found：04/03/07 21:40 ID:???.net

>>11
お前には必要ないよ

14 ：Name_Not_Found：04/03/07 22:18 ID:YA0YFOnE.net

上げてみるテスト

15 ：Name_Not_Found：04/03/07 22:25 ID:???.net

ボックスの４隅を角丸にして、丸くて柔らかく見せる方法は？
少なくともストリクトでは出来ないよね？

16 ：Name_Not_Found：04/03/07 22:26 ID:???.net

まあ>>1とりあえずここ見とけ
http://www.csszengarden.com/

17 ：Name_Not_Found：04/03/07 22:30 ID:???.net

>>15
ボックスの背景に角丸画像を置けばいい

18 ：Name_Not_Found：04/03/07 23:08 ID:???.net

文法的には合っているというレベルなら不可能じゃないだろ？
ただし、論理構造上無意味なブロック要素を作らなければならない。
css3ではサポートされるらしいな。

>>17
それだと文章が伸縮した場合に対処が難しい。

19 ：Name_Not_Found：04/03/07 23:23 ID:???.net

そこで「なるほどdiv囲みね」ですよ

20 ：Name_Not_Found：04/03/08 02:01 ID:KJlQUdqg.net

テーブルレイアウトが良いとか悪いとか語るだけのスレより、
このスレは貴重なスレになると思う。
ｱｹﾞ

21 ：Name_Not_Found：04/03/08 02:06 ID:???.net

>>20
そう思うなら、自分で手本を示してみるとかしてくれればいいのに。

22 ：Name_Not_Found：04/03/08 02:14 ID:???.net

僕はｈｔｍｌ初心者で、ジオで借りて、トップはジオのﾃﾝﾌﾟﾚを使って作ったんですが、
ソースと本読んで自分でいろいろ書き換えてみました。

内容は英語の勉強法とかやろうと思っていたのですが、
なかなか更新できずに１月もたってしまいました。。。

できればｃｓｓでどう書くか教えていただきたいです

ttp://www.geocities.jp/majest_pietro/

23 ：20：04/03/08 02:34 ID:???.net

>>21
なるべくそうするよ。ただ18にも書いたけど、今のcssじゃ、論理構造と見栄え
の分離って中途半端なんだよな。

まー、それはおいといて>>22だが、ほぼ同じレイアウトをcssで実現可能だ。
まずはfloat、およびclearという属性を勉強する事。話しはそれからだ。

24 ：22：04/03/08 02:40 ID:???.net

>>23
レスどうもですヽ(´ー｀)ノ
まずは逝ってきますです。。

25 ：Name_Not_Found：04/03/08 08:09 ID:???.net

>>15
>>17
画像使わなくても角丸できるよ。
ttp://ad.il24.net/~ura/css/kado_maru.htm

26 ：Name_Not_Found：04/03/08 08:10 ID:???.net

>>15
ttp://www2.airnet.ne.jp/xxx/20000/

27 ：Name_Not_Found：04/03/08 08:33 ID:???.net

TABLEデザインのサイトをCSSでどこまで再現できるか、は容易。
TABLEデザインでサイトのCSSをどこまで再現できるか、は無理。

28 ：Name_Not_Found：04/03/08 08:50 ID:???.net

>>27
容易とか言っているうちはtableの事もcssの事もよく分かってない。
２行目はなに言ってるのか分からん。

29 ：Name_Not_Found：04/03/08 08:52 ID:???.net

現行のテーブルレイアウトをCSSで実現することは容易に可能。
しかし現状では論理的でないdivを使わないと無理な部分が出る。
結局本末転倒なんだよな。

30 ：Name_Not_Found：04/03/08 11:24 ID:???.net

>>25
んーギザギザしてるしソースも汚いなぁ
もっと滑らかな角だといいんだけど

31 ：Name_Not_Found：04/03/08 13:19 ID:???.net

>>29
うん、それ嫌だね

32 ：Name_Not_Found：04/03/08 13:30 ID:???.net

>>25
すばらしいソースだなー、おい。
こういうのをcssを使いこなしているって言うんだね！

33 ：Name_Not_Found：04/03/08 13:43 ID:???.net

>>32
いわねーよ

こんな重いCSS使うぐらいなら画像つかうっつーの

34 ：Name_Not_Found：04/03/08 13:51 ID:???.net

>>33
皮肉かどうかぐらい見抜いてやれよw

35 ：Name_Not_Found：04/03/08 14:02 ID:???.net

だいたいなんで<div></div>で空白区切りしてるわけよ？

36 ：Name_Not_Found：04/03/08 14:42 ID:???.net

http://www.tableless.com.br/

37 ：Name_Not_Found：04/03/08 15:26 ID:???.net

>>25
Mozillaで見ると角が丸くなってない

38 ：Name_Not_Found：04/03/08 16:10 ID:???.net

>>25-26
ﾈ申
>>37
ということはネスケ6.7でも丸くならない？

39 ：Name_Not_Found：04/03/08 16:41 ID:???.net

>>38
Netscape6.7でどうなるかはわからないけど、こんな感じ。
http://v.isp.2ch.net/up/5d95de2246e2.jpg

40 ：Name_Not_Found：04/03/08 16:52 ID:???.net

別に重く無いじゃん

41 ：Name_Not_Found：04/03/08 17:36 ID:???.net

>>39
なるほど、ありがとう。
それだと厳しいなｗ

42 ：Name_Not_Found：04/03/08 17:44 ID:???.net

じゃあお題だすからTABLE使わないでそっくりなサイトをつくってくれ

http://www.yahoo.co.jp/をTABLEを使わずCSSで作成せよ

43 ：Name_Not_Found：04/03/08 17:53 ID:???.net

作ったけど。

44 ：Name_Not_Found：04/03/08 18:18 ID:???.net

>>39
なかなかオシャレでいいじゃん。

45 ：Name_Not_Found：04/03/08 18:25 ID:mn2tHFG8.net

２ｃｈの転送量が問題になったとき、TABLEで作ったデザインをCSS化するってアイディアが出たはず。
ちょっとふにゃっとした感じだったけど、かなり再現されてたよ。

46 ：Name_Not_Found：04/03/08 18:26 ID:mn2tHFG8.net

div厨とTABLEレイアウト原理主義者なら、
ひょっとして後者のほうがまだマシなんじゃないかと思ったり思わなかったり。

47 ：Name_Not_Found：04/03/08 18:30 ID:???.net

tableで意図した情報の流れの通りクロールに読ませられるんならいいけどな。

48 ：Name_Not_Found：04/03/08 18:38 ID:???.net

>>46
原理主義者かよ…どっちもどっちのような

49 ：Name_Not_Found：04/03/08 19:29 ID:???.net

音声ブラウザを入り口で弾くスクリプト無いかな？
視覚障害者にとってもそのほうが親切だろ。

50 ：Name_Not_Found：04/03/08 19:33 ID:???.net

>>49
その程度もつくれないほどの無能のサイトなんて行かないから大丈夫だよ。

51 ：Name_Not_Found：04/03/08 19:39 ID:???.net

>>49
トップページに、音声用の入り口を別に作っておけば良い。

52 ：Name_Not_Found：04/03/08 20:02 ID:???.net

「視覚障害者には利用して貰わなくて結構」というスタンスもあって良い。

53 ：Name_Not_Found：04/03/08 20:29 ID:???.net

>>52
そりゃ、あっても構わんだろうがスレ違い

54 ：Name_Not_Found：04/03/08 21:22 ID:???.net

>>53
それはTABLEレイアウトを否定するために
「視覚障害者への配慮」を錦の御旗にする連中に言うべき。

55 ：Name_Not_Found：04/03/08 21:51 ID:???.net

CSSでレイアウトすると
CSSに対応してなきゃ崩れるじゃん。

まあテーブルに対応してなくても崩れるが、
テーブルに対応してないのは少ないしね。

56 ：Name_Not_Found：04/03/08 21:54 ID:???.net

>>55
【td】テーブルレイアウトの何が悪いん？ 2【/td】
http://pc2.2ch.net/test/read.cgi/hp/1053745652/379

57 ：Name_Not_Found：04/03/09 10:48 ID:???.net

>>55
CSSで崩れたらCSSオフにできるじゃん。
テーブルも、線形化されてればかまわないとおもう

58 ：57：04/03/09 11:36 ID:???.net

>>57
線形化されてれば→線形化して意味が通れば

59 ：Name_Not_Found：04/03/10 00:10 ID:???.net

ブラウザってなんでいくつもあるんだろうな

60 ：Name_Not_Found：04/03/10 05:23 ID:???.net

>>59
資本主義だからさ

61 ：Name_Not_Found：04/03/10 08:54 ID:???.net

>>60
うまいなぁ。やまだく〜ん！歌さんに座布団一枚やっとくれっ

62 ：Name_Not_Found：04/03/10 10:22 ID:???.net

>>61


寒

63 ：Name_Not_Found：04/03/10 13:12 ID:???.net

>>61


馬

64 ：Name_Not_Found：04/03/10 13:45 ID:???.net

>>61


鹿

65 ：Name_Not_Found：04/03/10 17:06 ID:???.net

floatとか使えば大抵のことは可能の気がするけど

66 ：Name_Not_Found：04/03/10 18:43 ID:???.net

>>65
しろうとはこれだから・・・。

67 ：Name_Not_Found：04/03/10 21:44 ID:zYLbF8gd.net

Mozilla 5.0 以上に限定するならおよそのことはできるだろう。

Internet Explorer と Netscape (Mozilla系) で同一のデザインを
保つことができるCSSを書くのは難しい。tableを使う利点は
ほぼ全てのブラウザで同一のデザインが表示されることが期待できる
ということにある。

現状のCSSはあまりにも非力だ。しかしそれすらも満足に実装できて
いないInternet Explorerのお陰で、いまだtableは引退できない訳だ。

68 ：Name_Not_Found：04/03/10 21:45 ID:???.net

Wiredはすばらしい

69 ：Name_Not_Found：04/03/10 21:49 ID:???.net

評論はいいから実際につくってみれ
↓

70 ：Name_Not_Found：04/03/11 03:01 ID:???.net

>>36

71 ：Name_Not_Found：04/03/11 17:52 ID:???.net

Yahoo程度ならいけると思う。横幅固定だからfloatも崩れないし。
NN4.x無視すればだけど。

72 ：Name_Not_Found：04/03/11 18:48 ID:???.net

CSSで作れるって言うなら実際作ってみれば？

73 ：Name_Not_Found：04/03/11 19:31 ID:???.net

http://pc2.2ch.net/test/read.cgi/hp/1076968824/6
【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
　http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと　(floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと　（ネスケ４でも崩れない段組みの実例）
　http://village.infoweb.ne.jp/~fores/

74 ：Name_Not_Found：04/03/12 01:50 ID:???.net

さらっとしか見てないけど、
http://www.siemens-mobile.com/
http://konicaminolta.jp/
http://saiyo.jr-central.co.jp/

カスイケスレというわけわからんスレにいっぱいありますぜ。

75 ：Name_Not_Found：04/03/12 21:30 ID:???.net

>カスイケスレ

どこがイケテルんだか…。
tableに追いつこうとしても追いつけない哀れなCSSの現実を露呈している。

76 ：Name_Not_Found：04/03/12 21:55 ID:???.net

漏れはちょっとcssを見直したよ。

77 ：Name_Not_Found：04/03/12 23:38 ID:???.net

tableでやりゃいいのにな。

78 ：76：04/03/13 00:09 ID:???.net

最近クラや代理店が中途半端にアクセシビリティだのなんだのって
うるさくなってきた気がする。
今まで、テーブル使わなきゃ無利ですよ〜なんていってきたけど、
>>74 みたいなのみられたら面倒だな。

79 ：Name_Not_Found：04/03/13 15:52 ID:???.net

cssは根本的に以前のデザイン手法を忘れちまったほうがやりやすい

80 ：Name_Not_Found：04/03/13 17:07 ID:???.net

TABLEでイケてるデザインサイト
http://pc2.2ch.net/test/read.cgi/hp/1079165134/

スレたてました。一応関連してるかと思いますので宣伝ご免。

81 ：Name_Not_Found：04/03/13 18:43 ID:???.net

CSS自体は見直さないけど、これを制作した人は
CSSごときで、よくここまで偽テーブルレイアウトをしたものだ。感心。

・・・・って言うか、くだらない事に時間かけてないで
他にすべき事は無かったのか？暇だったのか？

82 ：Name_Not_Found：04/03/13 20:51 ID:???.net

>>80のスレにあったけど全部CSS
http://www.fontgraphic.com/zx26/index_tes.html

ってかこうゆうサイトほどテーブルデザインに適してると思うんだが
ネットスケープ4で見ると悲惨すぎる

83 ：Name_Not_Found：04/03/13 21:43 ID:???.net

>>82
CSSデザインが裏目に出ているいい例ですね（ﾌﾟｯ

84 ：Name_Not_Found：04/03/13 21:48 ID:???.net

>>82
どうでもいいが、普通の人はクリックする場所わかんないと思うぞ。

85 ：Name_Not_Found：04/03/13 23:20 ID:???.net

>>82
NN4信者の方ですか？

86 ：Name_Not_Found：04/03/14 00:10 ID:???.net

はい

87 ：Name_Not_Found：04/03/14 01:12 ID:???.net

>>82
オナニー以外の何物でもないな

88 ：Name_Not_Found：04/03/14 22:31 ID:???.net

>>74
三つ目のはデザインもいいと思った。
こーゆーのって、時間かかるんかね？

89 ：Name_Not_Found：04/03/15 00:05 ID:???.net

CSS覚えるまでが時間かかる
覚えてしまえば楽

90 ：Name_Not_Found：04/03/15 00:07 ID:???.net

>>88
JRはひどいだろう。
ほぼフルフラッシュで、幅固定、文字サイズ固定、オペラじゃレイアウト崩れてるし。
大体印刷用のページ生成しちゃってたりして、cssデザインのメリットがまったくない。

91 ：Name_Not_Found：04/03/15 00:15 ID:???.net

>>82
むしろﾌﾗｯｼｭだろ

92 ：Name_Not_Found：04/03/15 00:52 ID:???.net

>>90
トップだけじゃん。> フラッシュ
でも、メニューでかすぎ、つか、重いよね。

93 ：92：04/03/15 00:54 ID:???.net

入り口ページにフラッシュとか、
クラとの間に代理店がはさまると、絶対言ってくるよね。
なんか、ワンテンポ遅れてるっつーか。

漏れはテーブルレイアウト一筋なんでなんともいえないけど、
css のメリットってなんなん？

94 ：Name_Not_Found：04/03/15 01:02 ID:???.net

規模にもよるがCSSレイアウトの方が難しくて管理人の頭がよく見える。

95 ：Name_Not_Found：04/03/15 01:03 ID:???.net

テーブルレイアウトしてる奴は厨房。
そもそもレイアウト用のタグじゃねーんだよ糞が。
これからの時代、テーブルレイアウトしか出来ないデザイナーは使い物にならなくなるよ。
つーかHTMLの基礎も出来てない奴がWEBデザイナーを名乗んじゃねーよ。
これだからいつまでたっても軽い業界だと思われてるんだよ。

96 ：Name_Not_Found：04/03/15 01:04 ID:???.net

>>93
漏れが一番楽だと思うのは
css1で全ページのレイアウトが出来るって所かな？
サイトの統一感も増すし、デザインの変更も楽だし。
あと、htmlの方もすっきりして編集しやすくなるね。

あと、この辺参照
http://members.jcom.home.ne.jp/jintrick/Personal/css_Advantage.html
http://members.jcom.home.ne.jp/pctips/www/cssmerit.html

97 ：Name_Not_Found：04/03/15 01:06 ID:???.net

>>95のW3C信者

布教乙(w

98 ：Name_Not_Found：04/03/15 01:06 ID:???.net

×css1
○css1つ

でした。

99 ：Name_Not_Found：04/03/15 01:15 ID:???.net

技術とレイアウトの流れ（タグうち）
<br>のみ→<i>や<b>など物理的タグを利用→<table>などでレイアウト→CSSのみでレイアウト

技術とレイアウトの流れ（HPビルダー）
画像のみ→<br>などを利用して文章を利用→<table>などを利用→飽きる

100 ：92：04/03/15 01:19 ID:???.net

>>96
なるほど。商業レベルでやろうとするとデザインのトーンとマナーの
部分には生きてくるけど、細かい部分まで統一するのは無理くない？
と思って挫折したクチなんだけどねｗ

ただ、jrの印刷のみたいにメニューとかバッサリきり飛ばしても
大丈夫なのはちょっとイイかも、と思った。
ヘッダフッタとメニューのデザイン変更して中身は流用、って
リニューアルの仕事結構あるし。

あと、新幹線を正面から見ると、ガキデカみたいで笑える。