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

1 ：04/03/07 〜 最終レス ：10/05/05

まあやってみてくれ

2 ：

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

3 ：

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

4 ：

新スレおめ
そして糸冬了

5 ：

↓細々した言い訳開始↓

6 ：

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

7 ：

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

8 ：

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

9 ：

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

10 ：

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

11 ：

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

12 ：

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

13 ：

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

14 ：

上げてみるテスト

15 ：

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

16 ：

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

17 ：

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

18 ：

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

19 ：

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

20 ：

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

21 ：

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

22 ：

僕はｈｔｍｌ初心者で、ジオで借りて、トップはジオのﾃﾝﾌﾟﾚを使って作ったんですが、
ソースと本読んで自分でいろいろ書き換えてみました。
内容は英語の勉強法とかやろうと思っていたのですが、
なかなか更新できずに１月もたってしまいました。。。
できればｃｓｓでどう書くか教えていただきたいです
ttp://www.geocities.jp/majest_pietro/

23 ：

>>21
なるべくそうするよ。ただ18にも書いたけど、今のcssじゃ、論理構造と見栄え
の分離って中途半端なんだよな。
まー、それはおいといて>>22だが、ほぼ同じレイアウトをcssで実現可能だ。
まずはfloat、およびclearという属性を勉強する事。話しはそれからだ。

24 ：

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

25 ：

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

26 ：

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

27 ：

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

28 ：

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

29 ：

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

30 ：

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

31 ：

>>29
うん、それ嫌だね

32 ：

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

33 ：

>>32
いわねーよ
こんな重いCSS使うぐらいなら画像つかうっつーの

34 ：

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

35 ：

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

36 ：

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

37 ：

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

38 ：

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

39 ：

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

40 ：

別に重く無いじゃん

41 ：

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

42 ：

じゃあお題だすからTABLE使わないでそっくりなサイトをつくってくれ
http://www.yahoo.co.jp/をTABLEを使わずCSSで作成せよ

43 ：

作ったけど。

44 ：

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

45 ：

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

46 ：

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

47 ：

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

48 ：

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

49 ：

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

50 ：

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

51 ：

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

52 ：

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

53 ：

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

54 ：

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

55 ：

CSSでレイアウトすると
CSSに対応してなきゃ崩れるじゃん。
まあテーブルに対応してなくても崩れるが、
テーブルに対応してないのは少ないしね。

56 ：

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

57 ：

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

58 ：

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

59 ：

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

60 ：

>>59
資本主義だからさ

61 ：

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

62 ：

>>61
寒

63 ：

>>61
馬

64 ：

>>61
鹿

65 ：

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

66 ：

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

67 ：

Mozilla 5.0 以上に限定するならおよそのことはできるだろう。
Internet Explorer と Netscape (Mozilla系) で同一のデザインを
保つことができるCSSを書くのは難しい。tableを使う利点は
ほぼ全てのブラウザで同一のデザインが表示されることが期待できる
ということにある。
現状のCSSはあまりにも非力だ。しかしそれすらも満足に実装できて
いないInternet Explorerのお陰で、いまだtableは引退できない訳だ。

68 ：

Wiredはすばらしい

69 ：

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

70 ：

>>36

71 ：

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

72 ：

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

73 ：

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 ：

さらっとしか見てないけど、
http://www.siemens-mobile.com/
http://konicaminolta.jp/
http://saiyo.jr-central.co.jp/
カスイケスレというわけわからんスレにいっぱいありますぜ。

75 ：

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

76 ：

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

77 ：

tableでやりゃいいのにな。

78 ：

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

79 ：

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

80 ：

TABLEでイケてるデザインサイト
http://pc2.2ch.net/test/read.cgi/hp/1079165134/
スレたてました。一応関連してるかと思いますので宣伝ご免。

81 ：

CSS自体は見直さないけど、これを制作した人は
CSSごときで、よくここまで偽テーブルレイアウトをしたものだ。感心。
・・・・って言うか、くだらない事に時間かけてないで
他にすべき事は無かったのか？暇だったのか？

82 ：

>>80のスレにあったけど全部CSS
http://www.fontgraphic.com/zx26/index_tes.html
ってかこうゆうサイトほどテーブルデザインに適してると思うんだが
ネットスケープ4で見ると悲惨すぎる

83 ：

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

84 ：

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

85 ：

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

86 ：

はい

87 ：

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

88 ：

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

89 ：

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

90 ：

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

91 ：

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

92 ：

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

93 ：

入り口ページにフラッシュとか、
クラとの間に代理店がはさまると、絶対言ってくるよね。
なんか、ワンテンポ遅れてるっつーか。
漏れはテーブルレイアウト一筋なんでなんともいえないけど、
css のメリットってなんなん？

94 ：

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

95 ：

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

96 ：

>>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 ：

>>95のW3C信者
布教乙(w

98 ：

×css1
○css1つ
でした。

99 ：

技術とレイアウトの流れ（タグうち）
<br>のみ→<i>や<b>など物理的タグを利用→<table>などでレイアウト→CSSのみでレイアウト
技術とレイアウトの流れ（HPビルダー）
画像のみ→<br>などを利用して文章を利用→<table>などを利用→飽きる

100read 1read

1read 100read

TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲

SEOのパワーテクノロジー (682)
【ゆとり】画像掲示板が狙われています【教育】２ (647)
もまえらのサイトＡｌｅｘａのランキング何位よ (218)
イラストサイト総合スレ (906)
Strict-HTML スレッド 43 (534)
【求人】WEB業界の景気はどうよ? (232)
--log9.info------------------
三国志シリーズで思わず笑った出来事 (287)
【ｺｰｴｰ】歴代信長の野望を100点満点で評価すると？ (243)
ス　　ー　　フ　　ァ　　ミ　　天　　翔　　記 (813)
戦国無双2 Empires 41討 (484)
信長の野望・革新　改造スレ　其の捨七 (402)
太閤立志伝6製作発表きますた (897)
信長の野望・天道能力家宝スレ (261)
信長の野望14に期待するスレ7 (381)
三国無双に何故この武将がいない！？ (923)
【Risk型SLG】世界の覇者1945 (欧陸戦争) を語る (289)
【PS3】真・三国無双　Online　K.O COUNT 1【CS組】 (614)
無双の馬超って実は人気無いだろ？ (220)
信長の野望で過大過小されている武将99人目 (821)
信長の野望最新作が発表だってさ (213)
水滸伝〜天命・天導〜について語るスレ 14幕 (662)
真田信之と共に苦難を乗り越えていくスレin歴ゲ4 (402)
--log55.com------------------
【交通】高速道路で目的のICを行き過ぎてしまったら？ 逆走は絶対NG 救済措置あります！
【おそ露】プーチン大統領、ロシア国旗をはためかせクリミア半島をバイクで爆走。実効支配を誇示
【速報】人身売買で逮捕された米富豪のジェフリー・エプスタイン氏、留置場で死体で発見される ★ 3
【個人情報】クレカ購入履歴、鉄道乗降履歴…ビッグデータ、匿名化でも高確率で個人特定　海外で指摘
【社会】日本政府「入れ墨の入ったお客さんを拒否するのは不適切」政府通知に困惑する温泉業界★２
【アフリカ】タンクローリー横転、漏れた燃料を盗もうとした市民６０人死亡７０人負傷
【埼玉】利根川で流され不明の高校生、遺体発見　10キロ下流に浮かぶ
【第4種踏切】5年間で35人死亡　対策進まない“危険な踏切”