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

まあやってみてくれ

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

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

新スレおめ

そして糸冬了

↓細々した言い訳開始↓

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

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

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

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

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

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

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

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

上げてみるテスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

>>29
うん、それ嫌だね

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

>>32
いわねーよ

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

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

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

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

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

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

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

別に重く無いじゃん

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

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

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

作ったけど。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

>>59
資本主義だからさ

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

>>61


寒

>>61


馬

>>61


鹿

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

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

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

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

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

Wiredはすばらしい

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

>>36

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

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

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/

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

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

>カスイケスレ

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

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

tableでやりゃいいのにな。

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

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

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

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

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

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

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

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

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

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

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

はい

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

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

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

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

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

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

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

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

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

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

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

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

>>95のW3C信者

布教乙(w

×css1
○css1つ

でした。

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

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

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

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

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

グラビアサイトを作ってる者から言えばCSSレイアウトなんてまだ無理といったところです。
そりゃ不可能ではないが雑誌的なレイアウトをしている関係で
テーブルレイアウトじゃないと作業が不便すぎるし、文書の再利用性とか考えなくていいし。
見栄えといってもテキストも見出しは画像、本文は１０pxの固定だったりしますしね。
入れ子テーブルなら5つ6つは当然という、作ってる側も分からなくなる構造だったり。

世の中にはそういうサイトもあるからCSSマンセーな方の意見は程々参考にしかならない。
俺のもそうかな・・・(´д｀;)

潔くPDF配布したらどうだ？

>>95
何を言ってるんだ、このW3C信者。
レイアウト用かどうか、じゃなく、レイアウトできるかどうか、で考えれろよ。

まったくだ。考えれるよな！

考えれら！

このスレは>>3で終了してれるから。
れら行五段活用だから。

>>101
雑誌とwebは全く性質の違うものだと気づいてくれ。

どうでもいいけど、グラビアサイトと聞いて
グラビア印刷法に関するサイトかと思ってしまった

>>107
うん。>>101はそこから始めるべきだよな。
違う分野の事をやるんだから、固定概念から取り払わないと。
建築と紙面、紙面と映画、映画とWebなどと比べれば、全く違うとわかりそうな物なのに、
どうしてWebと紙面の相互はこの勘違いから抜け出せない人が多いのだろう？

＞雑誌とwebは全く性質の違うものだと気づいてくれ。

世間的には紙媒体の延長線のものだと認識されているけどな。
一部の専門家に迎合するか、それとも世間一般の常識（例え間違っていたとしても）に従うか。
やはり後者に従う道を選ぶ人間が多いのはやむを得ない現実。

自分の思い込みを勝手に世間の常識にしないでくれたまえw

そうだな
紙とwebは同じと思い込まれると困る。
なぜか、すべてのブラウザで同じように表示させようとするんだよな・・・

CSSレイアウトに興味あるが、CSS3でレイアウトに関する要素が追加される
まではテーブルで逝く、っていうのが多数派なんでないのかな。

CSS3でレイアウトに関する要素が追加されて、
かつそれに対応したブラウザ（特にIE）が普及するまで…じゃない？

> かつそれに対応したブラウザ（特にIE）が普及するまで…じゃない？
永遠にありえない

じゃあ

そこそこ対応したブラウザ（特にIE）が
そこそこ普及するまで

で。

>（特にIE）
これが曲者なわけでオンドゥルギッタンディスカー

希望を持っては駄目ですか。甘いですか。

じゃあ、IEが衰退するまでって事で

時期IEで、px指定の文字サイズを変更できるようになったら、
散々pxやめろって言ってきた人は黙るんだろうか。

解像度10240 x 10240のディスプレイが出たらどうする

>>120
正方形かよ！

>>120
端っこの方 2% くらいをちまちまとつかう。
あまり遠くなると見えなさそう、目、悪いし。

10%くらいまで奮発していいんじゃないの？

>>119
「サイズ変更出来ないから駄目」という人は黙るかもね。
「古いブラウザだと固定されるからｲﾔｿ」というﾔｼはいるだろうけど。

無指定派は全く変わらないと思う

>>119
デザインがずれる！
って怒る人は出てきそうだな。

>>124
奴らは新たなフォント固定技を使うようになる。

彼らって誰？

質問スレで「IE7でフォントサイズが固定できません」とか言って
信者に怒られんのな。

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

IEでも既にpx固定の文字を"固定"じゃなくすことは可能なわけだが。

知ったかが
あふれ出てきて
春を知る

>>130
腸外出

厨房が
ここぞとばかりに
恥晒す

知らぬ間に
妙な流れに
なっている

はじめから
妙なスレでは
あったがな

それにつけても
厨の多さよ

アクセシビリティって JIS 規格に入るってマジ？
すげーこまるんだけど。

あーーーっ！！！
すげこま君ってすげーこまる君なんだーーーー！！

--

スレ違いｽﾏｿ。

>>136
今年中にはJIS規格になるよ。

アクセシビリティって日本語だとどういう意味だ。使いやすいってことか。
お触りOKってことか。あまりに臭くて痺れてしまうことか。

>>139
あなたの表現があまりに臭くて痺れてしまいますた

>>139
あ、くせぇ、痺れてぃえー

JISがどの程度までアレしてくるかわかんないけど、
もしかしたら ISO 取得しているクラとかのサイトに
影響出るかもしれないじゃん。

どーする？

>>142
(X)HTML+CSSで実装し直すしかあるまい。

何件あることやら。
考えると吐き気が・・・

tableでのレイアウトをCSSに置きかえる
http://aor.ktplan.jp/hms/tab2css2.html

言葉は悪いけど、>>105がファイナルアンサーなんだよな。
そもそも使い道が違う。HTMLのMが何であるかを考えればね。

しかし
・視覚系UA
・解像度800×600以上、14インチ程度、或いはそれ以上のPCモニタ
・極端に低速度な回線でないこと
等の条件を満たせば、テーブルレイアウトの互換性は高いと言える。
そして大抵はこの条件を満たしていることが多い。

レイアウトに互換性を求めること自体ナンセンスだけど、仕様書が等閑にされている現状では、意識改革は進まないよなぁ。

>>105ではなく、>>95だった。
よりによってとんでもねぇレスを参照しちまったぜ……。

ぬるぽ

>>146
廃スレ保守する暇があったらチクワブ買って来い

某日経なんたらのコーディングやってます。
昨日仕様とpsdもらって、締め切り今日。しかも3ページ。
完全にテーブルタグを想定で構成されているレイアウトのサイトデザインなんだが。。
・html4.0、CSS2.0の仕様に準拠
・IE6、NN7、Safariがターゲット
・コンテンツ左、ナビ右で、大まかに二段組だが、コンテンツ内に<iframe>で広告とか入れるんで、部分的に3〜4段組っぽくなる。
・しかもウィンドウリサイズ、文字サイズ可変、ナビ幅固定で右寄せ、コンテンツ幅は可変。
・その他ピクセル単位で細かい指示ありまくり

おいらもコーダーとしてはそこそこ色々こなしてきたけどさ。
あの、こりゃ無理なんですが。。
そりゃね、テーブル使えば、一発で問題ない事なんだけどね。

しかもクライアントが、プログラマ出身なのか異様にhtmlには詳しい。（割にcssは知らない模様）
っていうかさ、IE6がCSS2.0にまともに対応してない割に、「CSS2.0準拠で。」なんて無理ﾀﾞｯﾁｭｰﾉ。

>149
HTML4.01準拠じゃなくて、HTML4.0準拠なとこが、なんとも微妙だなｗ

それはともかく、W3C勧告では、レイアウトにテーブルを使っては「いけない」とは
いってないんだし、割り切ってやっちゃえば？

>>150
レスサンクス。
クラがレイアウトのためのテーブル使うな。ってさ。。
しかもやたらクリーンなソース要求してくる。
デフォルトで定義されてる属性入れようもんならクレームがくるし。algin=leftとか。
だったら自分でやれと。小一時間（以下略
変なところ先進的でありたいと勝手に思っているらしい。
まだブラウザが糞なんだから仕方ないのに。とくにIE6。
CSS3でこの辺の段組みが楽になるらしいが。まだ先か。
ってそんな先までコーダーやってねえって。

alignだよ。疲れてるな。。
逝ってきます。。

テーブル使用をクラのせいにもしてたやつは痛いな

>>153
クラ側から意識改革が少しづつでも進んでいけば
そういう連中も淘汰されていくっしょ。
それがいつになるかは知らんが。

とりあえずもっと勉強しとこっと。

>>154
> それがいつになるかは知らんが。
blogでCSSのことがもてはやされている昨今だからねえ
意外に近いかも

>>155
いきなり企業にパーフェクトにValidであれ、とまでは言わんけども
早くそういう志向が出始めるといいんだけどね。

http://internet.watch.impress.co.jp/cda/news/2003/10/27/890.html
↑がそういう点にまで言及する厳しめの規格になって欲しい。

>>156
身体障害者に配慮しろと、W3Cを初めとして
信者や2chネラーどもが口が酸っぱくなるほどウルサイが、
その割にはMacユーザーのブラウザに配慮する香具師が
意外なほど少ないのは、これ、いかに？

Macユーザーのブラウザが糞だからサ

>>158
safari はまだこれから期待出来ると思ってる。分からんけどね。

＞１５８
おんどりゃあ〜〜、目クラとＭａｃ使い
どっちが多いと思ってんだぁ〜〜！！

＞１５９
激しく同意、サファリに期待しる！！

>>157
@import で配慮してるよ
あとはまぁ有名どころのバグにはそれなりに。

ていうか障害者だけじゃなくて
テキストブラウザやらロボット相手の事も考えて書けっちゅー話で。

ぶっちゃけ標準準拠を語る時に音声読み上げブラウザを引き合いに出されてもいまいち説得力に欠ける
ちゃんと読み上げられる＝OKサイト、なのは分かるけど、障害者に配慮ってなんか白々しいんだよな

>>153
同意

>>162
それも「CSSはNN4.xで〜」のどちらも恥ずかしいっていうか白々しいよなぁ。

俺はテーブルでレイアウトすんな派だけど
「障害者にも優しくて〜」って話は一番最後にするようにしてる。
ｸﾞｸﾞﾙさんなんかにもウケがいいから拾ってもらえやすいですよ？とか
お客さんがどのブラウザ使ってても余り気にしなくて済むように出来ますよ？とかの
実利のある方から説明した方がウケもいい気がするし。ていうか実際最近そうだし。

捕手

投手

ぬるぽ

ってか、WORDで表機能を使ってレイアウトを整えようとすることがざらにある漏れは逝ってよしですか？

>>167
ｶﾞｯ

>>168　オマイの自由だ。

>>168
逝ってよし。何のためにWORDにスタイルシート(≠CSS)機能があると思ってるんだ。

>>170
なぜWORDでやらせる？　オマイも逝ってこい。

>>74
のサイトってちょっとウインドウサイズが違うと見えないところが出てきたりするのに、
table使わない意味ってあるの？

こんな本が出版されたようですが。
http://pc5.2ch.net/test/read.cgi/hp/1088190498/l50

感想を書いて欲しいそうです。

どう見てもかび臭いテーブルテイアウト。
しかしソースを覗いてみると・・・あらびっくり、全部リスト表示。
ttp://gazone.morrie.biz/

<label> LABEL <textarea> TEXTAREA </textarea> </label> <br />
<label> LABEL <textarea> TEXTAREA </textarea> </label> <br />

上記↑のマークアップを、テーブルレイアウト風↓にしたいのですが、方法を教えてください。

　　　　　.　┌───────────────┐
　LABEL　│　TEXTAREA　　　　　　　　　　　　 　 │
　　　　　.　│　　　　　　　　　　　　　　　　　　　　...　│
　　　　　.　│　　　　　　　　　　　　　　　　　　　　...　│
　　　　　.　└───────────────┘
　　　　　.　┌───────────────┐
　LABEL　│　TEXTAREA　　　　　　　　　　　　 　 │
　　　　　.　│　　　　　　　　　　　　　　　　　　　　...　│
　　　　　.　│　　　　　　　　　　　　　　　　　　　　...　│
　　　　　.　└───────────────┘

>>175
そのまんまでなるでしょ。
textarea に vertical-align を指定すれば label の位置を調整出来ると思うけど。

つりだよね

たてちゃった…
http://pc5.2ch.net/test/read.cgi/hp/1090008171/

>>136
>アクセシビリティって JIS 規格
知らなかったよ・・・で、いま、いろいろ調べたが
3000円くらいで規格のPDF買えだって？
ふざけんじゃねーよ。どっかに落ちてないか（ry

webの仕事のいいとこは回線代しかかからないところだからなw

たいした仕事してないな。

ただのコーダーだろ。

>>174
テイアウト

ちょっと暇してたので、取り敢えず質問でも。

幅300pxの箱(table, border=1)が、左から148px、50px、100pxと3分割されています。
真ん中のセルにはDHTMLにより、画像かなにかがころころ変わるようになっています。今回その幅が100pxだったとします。
tableとcssのレイアウトを両方作ってみたのですが、どうにもcssレイアウトの方はセルが思いっきりズレます。(IEでのみ確認)
tableレイアウトと同等の冗長性を持ったcssレイアウトは出来るでしょうか？

tableレイアウトの場合：
<table width="300px" border="1" cellspacing="0", cellpadding="0" style="border-color:#000000;">
<tr>
<td width="148px" style="border-color:#000000;">
hoge1
</td>
<td width="50px" style="border-color:#000000;">
<div style="font-size:1px; height:1px; width:100px; background-color:#FF0000"></div>
</td>
<td width="100px" style="border-color:#000000;">
hoge3
</td>
</tr>
</table>

cssレイアウトの場合：
div style="width:300px; border-style:solid; border-width:1px;">
<div style="width:148px; border-style:solid; border-width:1px; float:left;">
hoge1
</div>
<div style="width:50px; border-style:solid; border-width:1px; float:left;">
<div style="font-size:1px; height:1px; width:100px; background-color:#FF0000"></div>
</div>
<div style="width:100px; border-style:solid; border-width:1px; float:left;">
hoge3
</div>
</div>

テーブルの塊をデブの塊に変換しただけかよ

>>184
display:table-*使ってやれ

　あぁぁ　　スクツだぁ。

スクツってなに？？巣窟のこと？
187はいったい何のスクツだって言ってるの？
かーなり意味不明なんだが。

単に巣窟っていうと、厨の巣窟って意味のこともあるよ。
187が実際にそうなのかは知らないけど。

>>189
正解　　　ちなみにアタイも厨

カマ？

<table>
<tr>
<td rowspan="2">○○</td>
<td rowspan="2">△△</td>
<td>□□</td>
</tr>
<tr>
<td valign="bottom">●●</td>
</td>
</tr></table>

こういうのがやりたいんですけど、CSSでできますか？
サイズ固定はなしです

> <td valign="bottom">●●</td>
> </td>

こんなの出きるわけないだろ

　　ヤッホー　お休みかなぁ〜〜？

ブロックの中でのbottomを0pxにする方向でゴニョゴニョすると
なんとか…
…ならんかな。

>>195
>>193で指摘したのはタグの閉じ忘れならぬ二重閉じ。

もし、
○△□□　というのがやりたいだけなら
○△●●
<html><head><style type="text/css">
.l{float:left;width:30%}
.r .l{float:left;width:30%}
.r .r{float:left;width:30%}
.n{clear:both}
</style></head><body>

<div class="n"></div>

<div class="l"><p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p></div>
<div class="r">
<div class="l"><p>△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△</p></div>
<div class="r"><p>□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□</p>
<p>●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●</p></div>
</div>

<div class="n"></div>

</body></html>
こんな感じでやるしかないね。width:30%使っちゃってるけど。
ちなみにこのまま表示するとMozillaでは文字が重なって読めなくなるけど
これは「URLっぽい文字列を折り返さないバグ」なので、●とかじゃなくて普通の漢字仮名混じりテキストなら大丈夫だった

おちかれさん

>>196
いや、>>192のキモは

<td valign="bottom">●●</td>

でしょ。テーブルレイアウトではbackground-positionやlist-styleとかが
どうしようもないように、CSS2では、ブロックの中身の上下寄せ（valign）
がどうしようもない、っつー話ではなかろうかと。

で >>195 は、三つ並べたブロックの右側の中にもう一つブロックを置き、
position を relative にして bottom:0px; とすることでどうか、
と言っていると予想するけど、うまくいくのかね？

>>198
力づくでやってみた…が、結局高さ指定をしないと無理だった。
したらしたで、文字のサイズによってはみ出たりするし＿|￣|○
<html><head><style type="text/css">
p{margin:0.5em}
.root{position:static;height:20%}
.l{float:left;width:30%;positon:relative;height:100%}
.r .l{float:left;width:30%;position:ralative;height:100%}
.r .r{float:left;width:30%;position:relative;height:100%}
.n{clear:both}
.b{position:absolute;bottom:0px;}
</style></head><body>
<div class="n"><p>通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。</p></div>
<div class="root">
<div class="l"><p>左側のテキストです。左側のテキストです。左側のテキストです。左側のテキストです。左側のテキストです。左側のテキストです。左側のテキストです。左側のテキストです。</p></div>
<div class="r">
<div class="l"><p>中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。
中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。中央のテキストです。</p></div>
<div class="r">
<div class="t">
<p>右上のテキストです。右上のテキストです。右上のテキストです。右上のテキストです。</p>
</div>
<div class="b">
<p>右下のテキストです。</p>
</div>
</div>
</div>
</div>
<div class="n"><p>通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。通常のテキストです。</p></div>
</body></html>

今IEで見たら、右下に行ってないじゃん。まぁCSS2サポートしてないから当然か…
でもその代わり、真ん中の文字がはみ出さないのが不思議だ

おれ、３行以上は読まないんだ・・・

IEだと角丸にならないがこんな方法がある。
ttp://www.openspc2.org/reibun/css/page/011/

いまさらそんな。
before/after疑似要素をIEが理解してくれたら、どれだけ楽になるか…

ttp://dean.edwards.name/IE7/
これが出回ってくれれば、少しはマシになるのにな……

　 /＼＿＿_／＼
／　⌒　　　⌒ ::: ＼
|　（●）,　、（●）、　| 　　 ／￣￣￣￣￣
|　　,,ノ(、_, )ヽ、,, 　 | 　＜　やるじゃん
|　　　ト‐＝‐ｧ' 　 .::::| 　　 ＼＿＿＿＿＿
＼　　｀ニニ´　 .:::／
／｀ー‐--‐‐―´´＼

ソフト板の方で張られていたんだけど
ttp://www.microsoft.com/japan/windows/windowsmedia/wm7/encoder/faq.aspx

MSIE、OPERAで見れば見られるけど
SafariやMozilla系では大変な表示になる。

一体どんなCSS書いてるんだか・・・

>>206
誰のインモーですか、それは。

じ〜っとながめていると
人の顔が浮かんできます。

新手のアスキーアート

>>206
(ノ∀｀)ｱﾁｬｰ

まーじんとふろーとでかばーできないのはてなまる

テーブルなんて使いたくない。でもテーブルで組まないと環境の違いを吸収できない。
吸収するためにJavaScript使うか？イヤだ。
デザインと機能の妥協点がＣＳＳの現状では低すぎる気がする。

古いブラウザに頑固にこだわる連中やパソコン買い換えない連中は
切り捨てたいとこだが、商用サイトだとそうも行かない。

旧NNにこだわる奴がいる限り,CSSでテーブルの代替なんてムリ。

旧NNにこだわる奴なんて最早基地外
無視だ無視

NN4とか、あんなバグの塊みたいなベータ版並のソフトにこだわる奴の気が知れない。

http://www.csszengarden.com/

NNはJavaScriptでスタイルシート指定のリンク要素を読ませないようにすればいいんでない。
ま、インラインでスタイル指定してる奴は修正大変だが。

>>217
そんなことせなんでも、
link要素のmedia属性にprintを入れれば無問題。

>>218

とはいえ、それはＮＮのバグつつきだからなあ。
やっぱスクリプトではじくのが正解でしょ。

適用範囲がより広い方がいいかな、と。
別に@importでもいいし。

なんでスクリプトが正解と思った？

テーブルで組んでた自サイトを、このたびＣＳＳレイアウトに組み替えますた。
見た目全く同じ、ソース見ないと違いはわからない。
作って見て改めて思った。
サイズ固定のレイアウトをＣＳＳにするメリットはなにもない orz


強いて言えばDOCTYPEをStrictで宣言しても意図どおりに動くようになったわけだが。
しかしそれがそんなに重要なことなのかと自問自答。
そもそもＷ３Ｃ標準の是非だって議論が尽きないというのに。

よほど複雑に入れ子になってるとかじゃない限りテーブルレイアウトをCCSにするメリットはあんまりないよねｗ

やっぱりdiv使いまくり？

>>223
div厨と呼んでくれ orz
というかtableレイアウトを再現するには、やっぱりdivが一番楽。

ブランニューサイトを立ち上げるなら、かび臭い段組レイアウトは破棄するべきだなーって思った。
一時は紙媒体に近づけたい、と思ってデザインしてたけど、最近は別物としての機能デザインを
追求するのがオサレかな、ってちょっと。

俺もテーブルレイアウトのサイトをcssに組み替えた。
終わって見て感じたのは、なんとも言えないむなしさ。
なんか説明できない気持ちになった。

Ｗ３Ｃ勧告とかなんとか、実際は強制じゃない”事実上の標準”にもてあそばれて、
いつまで苦労しなきゃなんないのかなと。
だからって企業主導のブラウザ戦争の混沌は二度と経験したくないしな。
なんだか出口なしって思ったよ。

でもCSSで組んだほうがメンテとかすごい楽な気がする
損はないと思うよ

そりゃそうだ。
テーブルタグの海を掻き分けて更新…なんて
もう考えたくもないね

私もテーブルをCSSに切り替え中。
なんで知らなかったんだorzと思った。

更新は簡単だし模様替えも楽チンだ！
しかもCSSファイル呼び出しなのでソースが短くて済む。

やっぱりみんなディブディブ？俺は勿論ディブディブさ。

>>229
時代はスパンスパンだろ！スパンスパン！

ディブディブスパンディブぐらい。

>>231
肉、肉、野菜、肉、肉

野菜、野菜、肉、肉、野菜、野菜、野菜でしょ！

　　 　　　∧∧　　　　∧∧　　
　　　(( (*ﾟДﾟ) ))　　(；　　)　ﾃﾞｨﾌﾞﾃﾞｨﾌﾞ
　　 (( // ､) ､)∩))∧と　 ヽ 　　ﾃﾞｨﾌﾞﾃﾞｨﾌﾞ
　((〜（（≡γ'⌒(((*´(|　　〜))
　　　　し'`Jし'`ｰｲ_ﾉ"(ノ^ヽ)　
　　ｽﾊﾟﾝ ｽﾊﾟﾝ ｽﾊﾟﾝ ｽﾊﾟﾝ

ディブとスパン、どう使い分けてる？
漏れはディブディブディブくらいなんだが・・・。

だから前からディブディブで後ろからスパンスパンするんだろ？

マジレスすると、ブロック要素かインライン要素かで

ところでみんなDIVやSPANの縦方向の位置揃えはどうしてる？
Transitionalのテーブルで組んだ場合、<TD align="middle">で指定してたケース。

↑間違った

<TD valign="middle">

みんな今日もディブディブ〜？

CSSで再現できないテーブルデザインなんて存在しない。

>>241

　　　C　S　S　は　へ　た　れ

>>243
お前が使うとな

こんな感じの、タブ風メニューバーを作りたいのですが、
これをリストの要素で出来ないでしょうか？


┌─┬─┬─┬─┐　　　←ここにメニュー
│　 └─┴─┴─┴─┐
│文章文章文章文章文│←ここにサブメニュー
└─────────┘

┌─┬─┬─┬─┐
├─┘　 └─┴─┴─┐
│文章文章文章文章文│
└─────────┘

宜しくお願いします。

>>245
出来るよ

やってみたのですが、線が下のリストと上手く合いません。
どうしたら良いでしょうか？

線が合わないって意味がわからん

>>247
環境とスクリーンショットかソースを提示

あーマルチか
http://pc5.2ch.net/test/read.cgi/hp/1107809092/212

HEAD部分
* {margin:0;padding:0;}
body {margin:1em;}

#list1 {
　　　list-style-type:none;
　　　float:left;
　　　border-left:1px solid #000;
　　　}

#list1 li {
　　　float:left;
　　　width:20%;
　　　text-align:center;
　　　}
#list1 li a {
　　　display:block;
　　　border-top:1px solid #000;
　　　border-right:1px solid #000;
　　　border-bottom:1px solid #000;
　　　}

#list1 #active a {
　　　border-bottom:0;
　　　}

#list2 {
　　　list-style-type:none;
　　　clear:both;
　　　border-left:1px solid #000;
　　　border-right:1px solid #000;
　　　border-bottom:1px solid #000;
　　　}

#list2 li {
　　　display:inline;
　　　border-right:1px solid #000;
　　　}


BODY部分

<ul id="list1">
<li id="active"><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
<ul id="list2">
<li>サブメニュー</li>
<li>サブメニュー</li>
<li>サブメニュー</li>
<li>サブメニュー</li>
</ul>

環境は、WindowsXP・IE6です。
1つ目のリストと2つ目のリストとの間が開いてしまい、
2つのリストのボーダーを上手く合わせる事が出来ません。

list liにmargin0と下ボーダー入れたら良いんじゃないの？










ごめん適当に言った

教える気あんのかｵﾗ

>>255
>>250

liをdisplay:inlineにした場合、

<img src="">
<img src="">

って書いた場合と同じ理屈でスキマができることがある。
ので、つなげて書けば。

li要素のactiveは、解釈しないブラウザが多い。
できたところでなんてことない。どうもムダな手間をかけてるような。

表までCSSで再現してるサイトを見つけた。 それは違うだろ…

>>259
CSSをPCに限定すれば、
CSSで表→携帯電話でも閲覧可
テーブル→無視されちゃってずらずら
ってのもありえます。あくまでも俺の場合だが。

携帯向けのサイトの場合表を使わないようにすると思う。
表をCSSで表現するのって、両方の概念から外れる気がする。

>>261
> 携帯向けのサイトの場合表を使わないようにすると思う。
> 表をCSSで表現するのって、両方の概念から外れる気がする。
想像で物を言うな。

表をテーブルで書くのは間違い？

いや、そもそも表を書くためのタグですから・・・

表にＣＳＳ適用するのはいいだろ。
レイアウト用の要素じゃないけど、表組として使うのは正しいんだから。
で、標準ＨＴＭＬ４にのっとるなら、
サイズや色といった属性はＣＳＳで適用するのが決まりなわけで。
（個人的にはどーでもいいが）

>>265
それが悪いなんて話はそもそも出てないんだが

tdとかを、dldtddとかで再現するって事でしょ。

確かに表にdldtdd使うのは変。
テーブルレイアウトをしない＝テーブルタグを一切使わない事と思ってるのだろうか

>>266

263が表をテーブルで書くのは間違いか？って聞いてんじゃねーか。
よく読め。

>>269
工エｴェｪ（´Д｀;）ｪェｴエ工工

>>269
264が速攻答えてるのにそれ以上言う必要がどこにあるのか…

書くってマークアップのことじゃねぇんかよ

>>263は、日計表はテーブルで書くべきか、ちゃぶ台で書くべきかを悩んでると推測。

>>273
（・∀・）ソレダ！

そんな>>263は家具板に逝けよ。

表で”も”表現できることを、別の方法で表現する、ってのなら間違いじゃないよね。

なんか屁理屈っぽい気がするが、確かにそうだな。

センターフォワード、鈴木、背番号11。
センターフォワード、高原、背番号20。
ミッドフィールダ、小野、背番号18。
　：

ってのを表でまとめることもできるし、ってことっす。

それは表だろ。

表で書いたら表だけど、
上のままでは文章でしょう？

定義リストかもしれない。

そんな感じで、表現方法は一つじゃないよねってことです。

>>280
文章じゃないだろ、「、」←で区切られたデータじゃないか。

センターフォワードは、鈴木、背番号は11。
センターフォワードは、高原、背番号は20。
ミッドフィールダは、小野、背番号は18。
　：

としても、「、」と助詞で区切られたデータだ、とか言いそうだな　(ﾌﾟ

なんで煽るんだ？
理解できないから聞いてるんだろ？
理解できないのに、納得しろってのかよ？

>>285
誰。

テーブル使えばいいだろー！！！！
ぎゃー！！！！

言い方がおかしいんだけど、
テーブルで書いてもいい内容をテーブルで書きたくない場合、ってのもある。

>>288
たとえば？

>>289
携帯電話用のページを用意したくないとき。

まさか、携帯用とPC用のサイト同じHTMLを使ってるの？

そら、ワンソースマルチユースができるなら、した方がいいじゃん。

HDDを整理していたら、中学生の頃作ったHPテンプレート集が出てきた。
すげえ！全部テーブルで構成されてる、しかも複雑すぎて二度と復元できなさそうな…。
作ってる時は頭に入っていたんだろうけど今見たら何が何やらさっぱーり

これをCSSで表現しようと思ったら、DIVでがちがちに固めるしか無いのかな…

１．自分がやりたいようにテーブルレイアウトする。
２．PrtScでコピー、適当なペイントソフトに貼り付け切り取る。
３．ボックスの背景に設定する

ｳﾏｰ(ﾟдﾟ)

モバイル用とPC用のHTMLって、ドキュメントタイプからなにから全然違うから普通に分けた方が効率良いような・・・。
内容の文章の形成をスクリプトでやって、テンプレートは別って感じが良いのでは。

>>295
コンパクトhtmlから派生したi-mode用のhtmlってのは、
携帯キャリアが勝手に作っているだけで。
その他のドキュメントタイプが携帯端末では利用できないって訳じゃないよ。

でもclassとか無駄な記述があるとパケ代が増えるよね…。

>>295
慣れてくるとそうでもない。効率面ね。

>>297
元々「パケ代節約したい」を思う人に得したと思えるようなレベルのドキュメントは提供してないからなぁ。
定額制で暇だから見てる、程度の人を対象にしてるんで。

あと、携帯用のサイト作ってるからといってパケ代安くなるようにしてるところ、って多いの？
漏れ携帯サイトのロゴ作成代行やってるんだけど、今まで見てきた携帯サイトって、
font要素とか脚色の属性使いまくりで漏れのclass使用ページより断然ファイルサイズデカいんだけど。

段組みレイアウト（２列）で、左コンテンツと右コンテンツの
それぞれの高さが変わった場合、長い方に高さを合わせて揃えたいんだけど、
どうやるの？　テーブルだと揃ってくれるけどCSSではできない。
こんなの基本的なことだから出来て当たり前だと思ってたのでかなり困った。

>>299
出来て当たり前のことが出来ないのはお前であってCSSではない。
CSSバカにした言い方してCSS厨が答えてくれるわけないでしょ。

>>299
何を合わせるか考えれば答えは出る。
・背景を合わせる → 親divに背景
・下端を合わせる → position:relative → bottom:0

>>298
大抵の機種でfontとかにしないと文字色とかが反映されないからだべ。

あと、携帯でも見られるサイトと携帯向けのサイトは違うよ。

>>302
そもそも文字色なんかいらん。
そんな小手先技なんて飾りです。

>>303
携帯向けサイト、って携帯でも見れるサイトが作れない人が、別で携帯用を作成したときの言い訳か、
パソコン持ってなくてしょぼいサイトしか作れなかったことへの言い訳だろ？

どうしたの？なんかあった？

>>305
なにかあった、って。
バカが連投してた、と答えれば気が済むか？

( '-')

,._.,

まーおまえらおちついてスレタイ読めや。

携帯でも見れるサイト=携帯でもとりあえず見ることは出来るサイト

こんなスレあったのね。

CSSデザインのサイトをTABLEでどこまで再現できるか
http://pc5.2ch.net/test/read.cgi/hp/1090008171/

>>310
自分のスキル評価はここでしなくていいよ。

GoogleのトップページをCSSと適切なマークアップでどこまで再現出来るか

>>313
面倒と難しいは違うぞ。

レイアウト的にはテーブルをＣＳＳで再現できないものはないと思う。
問題はブラウザのフォントサイズいじられてる環境で表示とかかな。
heightがピクセル指定のものは勿論、em指定でもテキスト折り返しが入ればボックスから
はみ出して悲惨なことに。

overflow

overflowってcss level-2じゃなかったっけ？
ブラウザによって動き大分違うんだよな・・・・

なんつーか、ブラウザを一つに限定したら解決なんだけどなぁ。。。

>>317
lev.2かどうかは知らんが。
overflowはNN4系でなければ、MSIE5〜6/MacIE/Gecko系/KHTML系/Operaで
同じように動くでしょ。
逆に、NN4系ではブロックのheightが使えないから、overflow以前の問題だね。

あ、scroll-x と scroll-y はMSIEの独自拡張か。

>>319

やってみた。おっしゃるとおりだね。動き的にはあんまり変わらない。
overflow:autoでも、大体同じ動きになるかな。
ちなみに
FF1.0、NN7.1、Opera7.5.4、IE６での検証。

ただ、ボックスの内側のフォントがちょっと大きいサイズになっている時、
文字がめり込んでるような表示に見えるの場合があるのが気になる。
原因については今検証中。

飾り枠とか作りたい場合で、可変サイズで上下左右各角にイメージを使いたい時
DIVの無意味な入れ子になるのはどうにかしたい。

マージンとって８個positionで置けば

無理じゃね？
上下はともかく、左右に難ありそうだ。

ぬるぽ

ボックスのサイズをピクセルで指定して背景に角丸の四角。
う〜ん、ソリッドデザイン。

寸胴鍋とふた、みたいなのが常套手段だよね。

http://www.izumo.co.uk/

食わず嫌いはやめて、TABLEの変わりにスタイルシートでレイアウトしてみようと
思うのですが、具体的にどうやってやるんですか？ヒントください。

ググってみようとは思っていますが、とっかかりのヒントだけでもほしいです。

>>329
http://web2ch.s31.xrea.com:8080/?CSS
http://pc8.2ch.net/test/read.cgi/hp/1113106800/

>>330

�dクス

TABLEとCSS以前にこのWEBのレイアウトってそもそも答えそのものがない問題
なんじゃないだろうか。

と言うのも・・・・









とりあえず、オナニーしてから書く。

オナヌー終わった？

2時間くらいかかると思われ

>>332

と言うのもなんなんだ？

まず、次の点を同時に満たすことがそもそも不可能なんじゃないだろうか。

�@閲覧者は画面の解像度を自由に変更できる
�A閲覧者は自由に文字の大きさを調整できる(もしくは固定するなと主張される)

この�@と�Aが雑誌ではありえないんですが

本だって雑誌だって、A4とB5など自由に閲覧者がリアルタイムに紙の大きさを変更
したり、文字の大きさを変更できたら、当然、表示は崩れるのは自明ですよね。

となると、文字が紙面からはみ出したり、文字が重なっちゃったり、スクロールバーｗ
が本に現れる。

紙面の大きさと文字の大きさを自由に変更できる(よう強要される)時点で、完璧なレイアウト
なんて不可能。

TABLEかCSSか、IEかMozillaかKDEか、実装の不具合・・・・いろいろ議論されているけど、
そもそも�@と�Aとレイアウトの完全と同時に満たすこと自体が本来ありえない。

336の一行目の訂正

次の点が可能な時点で完璧なレイアウトをすることが不可能ではないでしょうか？

と言うことで、フォントの大きさは固定しても良さそうな気がします。
広辞苑の字が小さいから大きくしろ！って怒る人はあまりいないと
思いますが、ネットでは、なぜかフォントを固定すると怒られます。

もとから表示される文字の大きさを変えるコトなんてできない紙メディアならば、
誰も文句言わない（印刷された字の大きさを変えられるなんて発想すらしない）けど、

もともと字の大きさを変えるコトができる前提なのに、あえてその機能を封印されれば
「なんで？」って思うのは必然のことと言えるでしょ。
それをさも声高にキーキー怒るのは、ちょっと変わった人のすることなだけで。

封印されるのはWindowsのIE使いの人だけでしょ？

>>339

ただ、そもそも文字の大きさと紙(画像)の大きさを自由に変更できる時点で
完璧なレイアウトなんで無理ですわな。

解像度を下げてフォントを大きくすれば文字の行き場がなくなるのは自明だし。

>>340

IEのシェアが95％程度ある時点で、事実上の全員への封印じゃないの？

95%は3ヶ月前の数字だね。

豆字固定と大差ない！

解像度を下げてフォントを大きくすれば文字の行き場がなくなるのは自明だし。

まずは各ブラウザ間のCSS特性が統一されないことには何ともならん。

フォントも印刷に比べて劣る、
文字詰めが現時点で古いブラウザが対応していないことも
あり使えない。
レイアウトは紙と違ってしかたがないとしても、
テキストの部分でＤＴＰに劣るのは情けないな。
どうにかしてほしいものだ。

文字の大きさは製作者が指定すれば良いか。自由に変えさせろとか言われる筋合いない

TABLEレイアウト最高ーーーーーーーーー！！！！




あぁ、疲れた。仕事で、普段はCSSレイアウトなんだが、あのクライアントのせいで…。
泣く泣くTABLEレイアウトに orz いや、クライアントのせいじゃないな。俺の力量のなさか。

>>1からここまで全部読んだ　疲れた　

昔はテーブルマンセーだったけどCSSを知ってから最初は文法とかHTMLと違って難しかったけど、

慣れたら「え？テーブルレイアウト？」って感じ。
いまじゃ<TR><TD>っていわれても何のことだかさっぱり...
CSSでテーブル作れるし...

>>351
表はテーブルで書けよ。あほか。

>>351
最近こういう勘違いしてしまう奴が多いな・・・。

痛い香具師か釣り師

ちなみに釣り師の場合は　>>351-353まで1セット

わかった？＞お茶の間のみんな

痛い香具師なのは>>354もだ

確かに・・・＿|￣|○

CSSで一生懸命テーブル組んでるサイトがたまにあるけど
作者のｵﾅﾆｰ見せられてﾙみたい。

>>357
意味不明

>>357
それはまさにオナニーだ。君の見方は正しい。

イヤー、まじで、W3Cなんてオナニー集団だしな。

レイアウトするのにTABLEほど最適なタグはない。
HTMLの仕様そのものがデザインの現場の常識を取りこぼしてるし・・
TABLEで代用できるのだから、代用しても何も悪くはない。

>>360
> レイアウトするのにTABLEほど最適なタグはない。
> HTMLの仕様そのものがデザインの現場の常識を取りこぼしてるし・・

別にアンタにデザインしてもらうためにhtmlが定義されているわけじゃなかろう。
それにいかんせん表だからグリッドに沿ったレイアウトしかできないし、
最適ってほどでもないと思った。

＞レイアウトするのにTABLEほど最適なタグはない。

それは流石にどうかと。。。
メンテナンス性も考えたらテーブルはかなり微妙

デザインによってはＴＡＢＬＥレイアウトが最高かもしれんけど
そうじゃない場合も多々あるね
Ｗ３Ｃ厨が文句言わないＴＡＢＬＥの代替が早くできればいいのに

デザイン屋が作った画像をはめ込むことが「レイアウト」なら
確かにTABLEほど最適なタグは無い。

そうでもないよ

全角厨を装う釣りはイラネ
>>363

確かにCSSはまだ表を意識してないからな。
多分近いうちに裏技等使わないでも出来るようになると思うけど。

ブロック要素を横に4つ以上並べるようなときはTABLEのTDを使うね。それ以下の場合は、FLOATを使う。
TABLEばかり使ってると、見づらくなって、メンテナンス性が落ちる。DOMも使いづらくなるし。

>>368
いや、たとえ4つ以上でもfloatのほうが良いかと。
横幅の短いPCで見たときに、横スクロールバーが出て見づらくなる。

横幅の短いPCを切り捨てれば無問題

tableレイアウトそのものが問題

>>364

そういう場合は、クリッカブルマップの方が良い

一覧表やカレンダーみたいなの作る時はテーブル必須だよね。

でもよ？雑誌とか新聞みたいな自由自在なレイアウトしようとしたら
TABLE以外ねーだろ？

CSSのレイヤーみたいなのが便利で使ってたんだが、これもだめだ。
見る人やブラウザによってずれる。

教えてよ。

TABLEに変わるCSSのタグとか機能を教えてほしい。
文字の折り返し地点を決められるタグとかあるん？

好きな位置に画像をはったり、文字を折り返したりできるタグって
ある？

>>376
＞好きな位置に画像

レイヤー使えば？

>>376
＞好きな位置に画像

レイヤー使えば？

＞文字を折り返したり

<pre>

俺も最初はレイヤー最強だと思ってたんすよ。

>>377
その使い方だと文字と画像が重なり合ったり、邪魔しあったりするだろう。
ブラウザの種類やフォントの大きさによって。

>>378
<PRE>は俺もかつて使っていたが、複雑なレイアウトは不可能。プロレベル
のデザインの要求には答えられない。

もっとも、文字を左から右に、上から下につらつら書き連ねているサイト
では、PREでも良いけどさ。

Flash使えばテーブルレイアウトとかCSSとか何も気にしなくて済むようになるよ。
プラグイン入れてない人は見れない？そんなんしらんがな。

FLASHか、それもいいな。クリッカブルマップもいいんだけどな。

CSSのタグとか逝っちゃってる時点で（ry

>>382

CSSのタグ・・間違いか。どうでもいい。俺はHTMLもCSSも自由に使いこなせるが、
本を読んで勉強したわけじゃないからな。表現とかは変かも。

>>383
苦し紛れすぎるぞ

>>384
本意ではないところを突っ込まれると痛いんだよｗ
CSSのタグと言うのはおかしいかなと思ったけど、どうでもいいと思ったから
そのまま書き込んだ。言いたいことは伝わるんじゃないかと。

かわいいなおまえ

自由に使いこなせるやつが質問するなよ　しかもCSSのタグとかもうねあｈ（ｒｙ

Layer使うと、人によって著しく見栄えに差が出るからな。
DIV使っても差が出る。TABLEで地道に作っている。

Layer使うと、OSやフォントの大きさ、ブラウザによってずれるでしょう。

普通にCSSで同じデザインに出来るよ。
めんどくさいだけで。

どんなデザインも同じにするのは多分むり。
無理やり入れ子状態の見苦しいソースならなんとかなるかもしれないが・・・。

おいおい、Layerとか言ってる奴は、釣りのつもりですか。

display:table;で済む。

>>392
詳しく

>>393
詳しく

キイワードが出てるのに検索できない人＝394

>>395
詳しく

sage

>>397
詳しく

>>398
詳しく

>>391
入れ子の何がいけないのか意味わかってる？

ていうか単純にTABLEでレイアウトするよりCSSでやったほうが楽じゃないか？
可読性も上がって、修正も楽ちん。

>>401
オーサリングソフト便りな人にはそれがわからんのです

>>401
TABLEの入れ子もなれると苦痛じゃないんだな。職人芸の世界。後からもっと
良い方法や装置が出てきても長年かけて実につけた職人技でやりたい、こっちは。
TABLE職人ってのは現代の杜氏や宮大工なんだよ。。←突っ込め

>>402
DW使ってサイトを作っていると言うと、「アレは使いやすいねー。簡単に作れる」
とか言われることが多いけど、ほとんどのプロはDWでタグやCSSを直接入力している
と思うんだが。

DWはタグ補完機能とちょっと便利なFTPが付いたタグ打ちソフトと認識している
がどう？

CSSも良いんだが、別にTABLEでレイアウトしてはいけない理由もないしな。

官僚が嫌い・体制が嫌い・権力が嫌いと言ったそういう風土が強いIT業界で
なぜかオタクたちが自分たちのコミュニティーであるW3Cの価値観を保守的
とも言える態度で押し付け、TABLEをあれやこれや理由にならない理由で否定
するのは不思議。まるで規制だからダメ、決まりですと叫んでいる役所のよう。

W3Cを官僚・体制・権力と見なすかのような
ヲマエ様の勘違いっぷりの方が不思議です。

とりあえず企業向けを意識して50個程度製作してみると色々見えてくると思うよ

>>405

でも、TABLEでレイアウトしてはいけない、なぜならそういう目的のタグではないから。絶対ダメ！

では、うるさいお役人と同じと思われても仕方ないよ。本来の目的とは違う目的で工夫して使うなんて
いかにもプログラマなどのコミュニティーの世界ではかっこいいとされる価値観だと思うけど。

本来の目的以外にもこう使えるんだぜ！

なんて、ハッカーの世界でいかにもありそうな価値観だと思うけどな。でも、TABLEはダメだなんて
お役所。実際、お役所の役人だって昔はわかかったし自由人だった。最初から役人なわけじゃない。
大人はわかってくれない・・と嘆く子の親もかつては自分の親にそう思った。
W3Cと言う団体を作ったり、支持してるオタクもかつては自由だった子供を忘れ
今は自己の保身だったり、自分の存在肯定のために他者を排他的に非難する大人
となった証拠じゃないかな。

TABLEレイアウトを禁止する理由が本来の目的と違うとしても、その本音はデザイナー
が嫌いと言う個人的感情や、NETは俺たちオタクのためのものなのにチャラチャラした
デザイナーが気に食わないという自己肯定が動機だったりするしさ。

>>407

その釣り(・A・)ﾂﾏﾝﾈ

うん　つまらない

>>407
＞TABLEレイアウトを禁止する理由が本来の目的と違うとしても、その本音はデザイナー
＞が嫌いと言う個人的感情や、NETは俺たちオタクのためのものなのにチャラチャラした
＞デザイナーが気に食わないという自己肯定が動機だったりするしさ。

当りみたいだな。

俺がtableレイアウトを使わないのは、携帯からも内容が見えて欲しいから。

>>411
ちらし屋、紙媒体デザイナのかなわない質の高いデザインを否定したい
↓
携帯でも見えてほしい

じゃないのか？ずばり図星だと思う。技術者やオタクって理論的に振舞って
いるようで、実は嫉妬の感情が強い。理論は感情により導かれる。つまり、
永遠に理解し合えないのが人間。俺が一番、自分の人生は間違っていない、
自分が一番・・そういう風に考える金玉の小さい男が多いから、つまらない
見栄の張り合い、規制による保身、既得権益の防御が生まれる。つまり、自由奔放
に思えるハッカーや技術者、ナードの世界ですら、閉じた排他的な世界で
自由などないということ。田舎的な価値観で保守的で排他的で閉鎖的だと言うこと。
人間の心は脆い。他人の活躍は許せない。感情が強いが故に導かれた論理。
そう、論理から結論が導かれるのではなく、まず感情ありき。そして、感情が求める
結論を導くための論理が選択される。だから、問答無用と言う言葉がある。つまり
立場、利権、美感が違う人間が分かり合えることは永遠にないということ。

ながくてよむきにならん

>>412
俺は別にtableレイアウトを否定してないよ。
でも紙媒体のデザインとwebデザインを同様に考えている時点で君に未来は無いよ。

むしろ君の方が嫉妬してないかな？

携帯で見えるかどうかって事は条件としてはちょっと特殊だからな。

W3CはCSSを使ったレイアウトを推奨するし、ブラウザの開発者はそれに逆らうことは出来ないよ。
どうしても絶対位置でピクセル単位のデザインをしたければ、フラッシュなりPDFなりにした方がいい。

>>412

その釣り(・A・)再々ﾂﾏﾝﾈ

不自由な技法しか出来ないweb技術に欠けたデザイナーに
嫉妬する道理がﾅｲ

>>34

不自由な技法とは？嫉妬しているのはWEB技術ではなくデザイン力ではないのん？

>>416
なんだそれ？
テーブルが廃止されるとでも？

結局CSS使ってテーブルみたいに自由にレイアウトできるHTMLエディター
だっけ？そういうのがフリーソフトで出てくるようになればいいわけだ。

>>420
ＩＢＭのどこでも配置(ry

tableタグが廃止されればCSSでデザインするしかない

大手サイトを手がけるデザイナがTABLEを支持している時点で廃止は
されない。

例えW3Cが保身のために廃止したとしても、IEは独自に残すだろう。
そうなると、他のブラウザはあぼーん

W3C的にもTABLEの廃止ってのはあり得ないだろ。本末転倒。
表をマークアップするためには必要なわけで。
>>416が言いたいのはTABLE等、タグで体裁をつくる方法には将来性がない、って事じゃないのか。

しかし、いつからTABLEを廃止するんだ？期日を決めるのか？
商用サイトなんぞ、TABLEを廃止されたら作り直しだけで数千万円かかる・・
ってところも少なくないぞ。

CENTERタグも廃止と言う方向らしいが、使ってるやつは多いし、廃止されて
も困る。結局、W3Cが廃止と言っても、Microsoftは廃止にはできない。なぜ
ならMicrosoftに電話が数百万件はかかってくるぞ。インターネットってビルゲイツ
が作ったんじゃないの？って思っている人たちから・

>>425
＞CENTERタグも廃止と言う方向らしいが、使ってるやつは多いし、廃止されて
＞も困る。
えーと、馬鹿？

>>426
なんで？CENTERタグは廃止する方向で検討されてるって聞いたよ。

426は自分の無知を棚にあげてひどいもんだ

　　　　　　　　　　 　 　 　 　 　 　 　 　 　 |
　　　　　 ∩＿＿＿∩　　　　　　 　 　 　 |
　　　　　 | ノ　 _,　　,_ ヽ　　　　 　 　（（　 |　ﾌﾟﾗﾌﾟﾗ
　　　　 /　　●　　　● |　　　　　　　いつからTABLEを廃止するんだ？
　　　　 |　　　　( _●_)　 ミ　＿　(⌒)　 　J　　））
　　　　彡､　　　|∪|　 ノ
⊂⌒ヽ　/　　　 ヽノ　 ヽ /⌒つ もうあきたクマー
　 ＼　ヽ　 /　　 　 　 　 ヽ　/
　　　＼_,,ノ　　　　　　|､＿ノ

>>429

釣りではなくて、いつなの？廃止できるわけがない。

論理的に反論できないのかな？
さすが低脳

ブログブームのCSSでど素人でもそれなりに綺麗なWEBを簡単に作るようになったから
どちらのレイアウトにしてもWEBデザイナ分野の人材に求められる質は上がっていきそうだね。

>>427
いくらW3Cがその標準からCENTERタグを廃止したとしても、多くのブラウザの
対応としてそれらのタグに対する対応は残すであろうという話。

そりゃ互換モードは残すだろ。
どうせお前らのレベルじゃXHTMLで書けないんだろ？

>>427 >>428
なんか、俺が前半部分を否定してると思われてる？
俺が突っ込みたかったのは「廃止されても困る」の部分だったんだが…

CENTERは別に困らんだろ。
つっかCSSでレイアウトしてるなら普通すでに使ってないし。

HTML 4.01 Transitionalでの動作を保障しないブラウザなんて今後10年は出て
こないだろうからStrictにこだわらないお前らが気にすることは無い。

ソースの美しさとデザインの美しさは比例しない

>>435

あなたが困らないのはわかった。で、俺もあまりこまらない。でも、ＣＥＮＴＥＲ
使ってるサイトがいくつかあるから、直すの面倒。

だいたい大規模サイトだとCENTERを使用していないか検証するだけで大変。

>>437
アホか？直す必要ないだろ。

意味わかってねーな、次期バージョンのXHTMLでそうなったとしても、現行のXHTML1.1まで
は使って良いんだから既存のサイトはなにも関係無いだろ。

>>438
だから、ずっと使える仕様であった方がいいだろ。

W3Cstrict に適したhtmlであってほしいというのは
個人の趣味の問題。

>>439
お前根本的にわかってないな。
<center>好きなら勝手にいつまでも使えよ、誰も文句いわねーし不自由無いよ。

>>441
＞<center>好きなら勝手にいつまでも使えよ、誰も文句いわねーし不自由無いよ。

根本的に分ってないのはどっちだよ。
そんな事で文句言うやつがいたらそれこそ頭いかれてるだろ。

>>442
だったらなにを心配してんだ？

ずっと使える仕様とかわけわかんねぇ。

＞だいたい大規模サイトだとCENTERを使用していないか検証するだけで大変。

俺もこの意味がわからん。
既存のサイトをなんで直すの？

なら<font>もダメじゃん。

アフォかｗ
好き勝手つくりゃあいいじゃん

http://YahooBB219180178006.bbtec.net/
ｗうはっｗｗｗｗｗｗうぇｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ
おｋｗｗｗ
っうぇｗｗｗｗｗｗうぇｗｗｗっうはっｗｗｗ
ｗうはっｗｗｗっうぇおｋｗｗｗｗｗｗおｋｗｗｗ

すまん、廃止の意味を間違って捉えていた。廃止って言うから完全に
消えるのかと思った。

ところで、HTMLのバージョンの管理とかぜんぜんわからんのだけど。

最近よく見るが、>>447が例の２ちゃんウイルスに
感染した患者かい。

今までに実際に廃止された要素もあるがな。

幅をパーセント指定しているテーブル（中身が3つに分れている）をセンタリングして
いるんですがこれをCSSでやるとしたらどうしたらいいでしょうか？

>>449
あはははは
これが２ちゃんウイルスなのか。なんかと思ってた。ハゲ藁

って、俺も感染してないか心配だ

多分Winnyのウィルスだろ。

スクリーンショットがうｐされるやつもあったよな

margin:0 auto;
text-align: center;

でセンタリング

>>455

何それ

突然どうすたのよ。

>>455
テーブル全体の方を画面全体の中心におきたいんですけど、
それでいいんでしょうか？

>>455
それだとwidthをpxで指定したときにはセンタリングになりますが、質問の
ように%で指定するとセンタリングにならないような感じですけど。

テーブルというのはCSSで作ったテーブルのようなブロック(?)のことです。

>>459

おれはwidthはpix指定にしてるから%はよくわかんないです。

このサイトが参考になるんじゃないですか。

ttp://folio.daa.jp/01/168/rn_tut01.html

なかなあ、TABLEみたいにCSSでレイアウトってできるん？

たまに

<center>
恋愛はうんぬんかんぬん<br>
だから、俺はポップミュージックが○○<br>
だから、オナニーする<br>
</center>

みたいなサイトあるじゃん。あれｶｺﾜﾙｲ

やろうと思えば出来る。が、今のCSSはマルチカラムのことをあんまり考えてない。だから面倒だったりする。
が、フォントサイズやウィンドウサイズを自由に変えられるのがWEBというメディアの利点だとするなら、
紙メディアのようなレイアウトをすること自体が間違いということになる。

でも、紙メディアみたいなデザインしないといけないこともあるじゃん？
商用サイトとか。

つ画像

つFlash

デザインを優先させたいなら、FlashでもOKだと思う。
完璧同じレイアウトにするのは難しいだろうから、デザインはある程度妥協したHTML版も用意した方が良い。

position:absolute;を使えば同じにできなくもないか…

>>467
それってちょっと変じゃない。
画像やフラッシュを使うなら、フォントサイズ固定とか推奨サイズとして
このサイトは文字サイズ中で見て下さいとか（そんな設定あったっけ？）
するのと変らないどころかそれより見る方の自由度は低くなるわけだろ。

>>463のこれには沿ってない
＞フォントサイズやウィンドウサイズを自由に変えられるのがWEBというメディアの利点だとするなら、

そのためにhtml版を用意すると言ってるのかと。
それだとflashの存在自体否定してるよ

>>469
Flashの存在を否定しているわけではない。
ただ紙メディア的デザインを否定する理由を、フォントサイズやウィンドウサイズを
自由に変えられるのがWEBというメディアの利点を持たないからと言うならば、
Flashの方がその点でははるかに「フォントサイズやウィンドウサイズを自由に変え
られるのがWEBというメディアの利点を持たない」といっているだけの事。
論点を把握すること。

＞それだとflashの存在自体否定してるよ
Flashを使うメリットは紙メディア的デザインする事だけにあるわけではないだろ。

紙メディア的デザインにとことんこだわるならflashじゃなくて
pdfファイルだっけ、あっちが使われている例はしばしばある。
htmlと併用してね。
でも、使う立場からいうと文章内でリンクははれないし、文章の
コピペもできない、ソフトが起動するのがウザイ、というところがあって
通常のhtmlよりはるかに使いにくいね。

pdfはクリックしないように常に注意してる。

レイアウト優先のためflashを使う？
( ﾟДﾟ)ﾊｧ?

別にデザインを重視するならFlash
間違っていないかと。

あぁ、ちなみに脳内レンダリング後と画面に表示された物が近いようにする為って意味で。

>>475
Flasyはデザイン重視というより、動きのあるページづくりって事だろ。

今は単にデザインの事じゃなくて
＞フォントサイズやウィンドウサイズを自由に変えられるのがWEBというメディアの利点だとするなら、

この視点からのレイアウトという面からのデザインの話なんだが。
論点分ってるのかな。

Flashが見難いから見たくない奴は見なければ良いだけの話。
俺はFlash好きだけどねー。

＞フォントサイズやウィンドウサイズを自由に変えられるのがWEBというメディアの利点だとするなら、
その利点を捨てても別に良いでしょ。
そのうち、Flashでも徘徊対象になったりブラウザの設定が反映されたりするのかもしれないけど。

>>479あんた>>475あたりと同一人物か？
もしそうだとしたら論点ズレまくり。

話の流れは

入組んだページレイアウト（紙メディア風）は
フォントサイズやウィンドウサイズを自由に変えられるのがWEBというメディアの利点
とは相容れないところがあるという話なんだが。

そこで>>466あたりがflashって言いだした。
つまりFlashを使えばフォントサイズの設定に影響されないからデザインは崩れないと言いたいらしい。

しかし一方>>479で

＞＞フォントサイズやウィンドウサイズを自由に変えられるのがWEBというメディアの利点だとするなら、
＞その利点を捨てても別に良いでしょ。

これを捨てるんだったらFlashを使うという方向じゃなくて
入組んだページレイアウト（紙メディア風）に比重をおけばいいという事になる。

あんたの主張は論点がずれまくってるって事に気がつかない。

>>479が>>475あたりと別人で単なる通りがかりなら論点が違ってても仕方がないが。

別に見る人にフォントサイズが変えられてデザインが崩れる
ということだけでは無いと思う。
>>464の言う所の、紙媒体のようにデザインしたいってのは

ちなみに、AllFlashでWebサイトを作る事は問題ないと思う。
時代の流れだな。

>>481
話の元の流れは>>463の
＞フォントサイズやウィンドウサイズを自由に変えられるのがWEBというメディアの利点だとするなら、
＞紙メディアのようなレイアウトをすること自体が間違いということになる。

ここから来てるんだから。
>>464はそれに対するレス。

つまり今の論点は

＞フォントサイズやウィンドウサイズを自由に変えられるのがWEBというメディアの利点
と
＞紙メディアのようなレイアウト
には相容れない点があるという事。

>>482
＞ちなみに、AllFlashでWebサイトを作る事は問題ないと思う。

これは問題ないと思う。
プラグインを入れてない人のこととか多少はあるかも知れないけど。

>position:absolute;を使えば同じにできなくもないか…

これ最強と思ってTABLEからCSSに移行しようとしたんだけど、これもダメだった。
OSやブラウザが変わるとずれる。

絶対値って敬遠されがちだけど、ヘッダーとか一部position:absoluteを使うのは結構有効だったりする。

flashはseoてきにダメポ
iframe使ってもやっぱり微妙だし

個人ｻｲﾄだから別にSEOとか気にしてないや

あれだ
文書を修飾するんじゃなくて
デザインを文字で修飾すればいいんだな

パソコンを窓から投げ捨てればいい

>>490
懐かしい

ユーザーのPCでflashみたいなアクティブコンテンツを楽にレンダリング出来る企画はいつくるか

規格や

>>492
今でもユーザのPCでflashみたいなアクティブコンテンツ（謎）を楽にレンダリングしていると思うが。
マクロメのflash player plugin とかで。

何か勘違いしてんじゃね？

話は変わるが最近参考書を見ると
javascriptとか使って画像メヌーをロールオーバーさせている部分を
css使って（無理やりなのか？）背景画像としてロールオーバーさせるっていう表現があるが
これは定義上アリなのかな？
とりあえず趣味サイトに実装しようと思うが、javaのが楽なんだよなー
DWで一発だし…
優柔不断な俺は迷うな

divdivdiv、floatfloatfloatでIEとFireFoxの同期取ろうとしたが、ボーダーで破綻したorz
解釈違うのね・・

IE7が出たら、margin: 0 autoとか、>>496のwidthのバグとか、透過PNGとか、いろいろ解決されるだろうよ。
もうそんなに遠くない未来の話。

ＭＳが期待通りに実装してくれたことなんて一度もない

>>497
旧バージョンが駆逐されない限り、何の意味もない。

IE7
過去のIE対策のハックやバグ指定もごちゃ混ぜに実装して史上最悪のブラウザになってたらマジうけるwwwwww

なりそうな予感がする…

久々にみにきたらまだいきてたのかこのスレは

テーブルデザインは不滅です！！！１！

>>503
乙！

紙出身の奴はFLASHに行く傾向があるな。

昔、DTPの奴にHTML化頼まれて
0.1mm単位でぐちゃぐちゃ言われて
ぶち切れた事がある。

紙とWebは違うんだよ、ボケが

将来CSSが印刷に耐えうるほどの品質になったら面白そうですね。

印刷はそれ専用に別に書くから関係ないだろ

>>505
太さ1pxのラインを「もっと細く」とか言うんだよな。
そういうときは色を薄くしてやると納得するんだがｗ

>>508
それ頭悪いな……

>>508
わかるw
俺もしょっちゅうだそんなの。

あと、紙屋は文字の折り返しとかいちいちウルセーよな。
ブラウザやOSによって全然変わってくるのにさ。

MacクラシックのIE5使ってるヤツなんか1％もいないんじゃないかと思うんだが
ソフト買えないからクラシック環境のままだし。＞紙屋

>>511
＞MacクラシックのIE5使ってるヤツなんか1％もいないんじゃないかと思うんだが

全体の3％程度ですね。

3％てのはMac OSのシェアでしょ？
Mac内でもOS Xとクラシックで使えるブラウザが違うから、
クラシック環境のIE5なんて相当少ないんじゃない？

相当少ない代わりに、切り捨てると一番うるさい迷惑な奴らだけどな。

ブツクサ言う前にMozilla系でも辻褄合うようにしようね(・∀・)ﾆﾔﾆﾔ

Mozilla系でもMacとWinでまた挙動が違うからなぁ

まあ、でもアポはブラウザに関してはSafariで義理は通した希ガス

Mac IE5って floatの挙動変じゃない？というか、認識しない。
DOCTYPEスイッチで標準モードにすればおｋ？

共同作業してるDTP屋が「Macだと云々・・・」とうざい。
SafariとかFirefox使えといいたいが、OSX環境じゃねえし。

>>518
Win版ほどでは無いと思った > MacIE5
両方ともIE5が出た当時は「スタイルシートすげー」って実感できる
実装だったけど、いまとなっては…だなぁ。

divタグについて

MacのIE5なんてほとんど来ないが、自分も最近まで使ってたブラウザなんで無視はできないぜ

あー、誰か紙屋だけ一画面まるまるpdfのページに飛ばす
スクリプトとか作ってくれねーかなw

>>522
UA振り分けスクリプトでmacのIEだけPDFへ飛ばせばOKだｗ

>>522-523
ﾜﾗﾀ

あと一年はテーブルで行けるな

floatで三段階に出来ないかな。
メニュー100px　情報300px　広告100px
ってやりたいんだけど、結局divでテーブルみたいになっちゃった。

<div width500>

<div width100 float:left>メニュー</div>

<div width400>
<div width300 float:left>情報</div>
<div width 100></div>
</div>

</div>

スマートじゃないね。

<div id="menu">メニュー</div>
<div id="info">情報</div>
<div id="ad">広告</div>

div#menu { width:100px; float:left; }
div#info { width:300px; float:left; margin-left:100px; }
div#ad { width:100px; margin-left: 400px; }

メニュー、がサイトの利便性をあげるためのナビゲーションだったら
情報の後でもよいかもね。

おぉぉ、三段ってそうやるんですか。
助かりました！

どこまでも出来るが、floatとwidthで指定してもブラウザ毎に変わってきちゃう。
こればかりは仕方ないから取り合えずIEで見れればOK。

と思う。

サーバーが重いと、たまにCSS読み込んでくれんｗｗｗ
一瞬ビビルｗｗｗ縦長綺麗ー。
みんなはトップページどうしてる？
トップページだけ中に埋め込むとか。

>>527
div#infoへの float:left;は不要だろ。

あー。中途半端だった。
IEのコトを考えると、
div{ float:left; }
div#menu{ width:適宜; }
div#info{ width:適宜; }
div#ad{ width:適宜; }

ってするのが良かったかも。

これなら大体のブラウザで思い通りに表示させられると思う。
cssはずしてもアクセシビリティも悪くないはず
<dl ="AAA">
<dt>メニュー</dt>
<dd ="aaa">内容</dd>
</dl>

<dl ="BBB">
<dt>情報</dt>
<dd ="bbb">内容</dd>
</dl>

<dl ="CCC">
<dt>広告</dt>
<dd ="ccc">内容</dd>
</dl>

#AAA{position:適宜; width:適宜; height:適宜; top:適宜; left:適宜;}

#AAA dt{position:適宜; display適宜; width:適宜; height:適宜;}

#AAA dd{position:適宜; display適宜; width:適宜; height:適宜;}

# aaa{top:適宜; left:適宜;}

#BBB #CCC　は上と同じ。属性は必要に応じて変更

あ、id が抜けてた。
<dl id="AAA">
あとは同じ。

なぜにdl？

dlとか使い勝手悪いから嫌い。
HとPとLIだけで十分。

liはulとolの下以外には来られないだろｗｗｗｗｗ

それ含めて言ってるんだろ。

537が正しいと思う。本来は邪道だと思う。
ただ、マルチカラムをブラウザに依存しない様に
表現するにはdl-dt-ddが楽というだけ。
なぜdlかというと、divは単なる区切りで意味をもってないから、
dlにすれば意味をもった箱として使える。SEO的にも良いと思う。

「○○君、キミね、テーブル使ってレイアウトしちゃダメでしょ？
　テーブルってのは、表を作るためにあるもんでしょ？
　左のメニュー部分と、右のこのメイン？の部分？をわけてるけどさ、コレ表っていえる？いえないでしょ？
　だからね、こういうのは全部スタイルシートで作るの、スタイルシート。
　スタイルシート使えばね、どんっっっなに複雑なレイアウトもね、簡っっっ単にできるから。
　テーブルだと出来ないような事も、スタイルシートなら余裕だから。
　内容はタグで、デザインはスタイルシート、これ常識だから。覚えといてね。
　ん？スタイルシートはよくわかんない？や、まあ簡単だから。あとで本買ってきて。
　ってことで、コレ。レイアウトに使ってるテーブルんトコ全部削除。スタイルシートで同じように作り直して。来週末めどで」

って説教された素人のおいらがきましたよ。

>>541
そのおっさんはいけ好かないけど、来週まであるなら大丈夫だ。がんがれ。

がんばってるけど、
本来の使い方じゃないテーブルが消え、
本来の使い方じゃないDIVが増えただけのような気がする。
間違ってるんだろうな、作り方が。

>>543
＞本来の使い方じゃないDIV
divの本来の使い方ってどんなの？

DIVって本来段落をあらわすもんだよね？
だから、レイアウトのために入れ子にするのってまちがっとるよね？
てか、あんまりしゃべると無知がばれるからいかんね。

>>545
すでにばｒ（ｒｙ

つД`)・ﾟ・。

レイアウトに使ってた<td align="center">に変わるものがわかんね。
<div align="center">にしても意味がない気がするし、
<div style="text-align:center;">も使い方違う気がするし、もうだめぽだめぽ。
おまいらよくわかるな。すげえなあ

ヒント：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<div style="margin-right:auto; margin-left:auto;">

>>545
文書構造的にブロックで意味は段落、を表す要素はp。
divもブロックだけど、意味は特にありません。
文書構造体のひとまとまり・一区切り。
なのでネストするのも間違いじゃないです。
あとtext-alignは文字通りテキスト（インラインレベル要素）のコントロール担当のプロパティ。

テーブルだろうがCSSだろうが、要は慣れの問題で作業負荷はそんなにかわらん。
がんがれ。

>>548
意味がわからんができた。
autoなら左右のマージンが均等になって、結果的に真ん中配置って事だよね？
正しいの？とか言ってる場合じゃないよね

>>549
そ　う　な　の　か　。
入れ子にしちゃうもんね。


お前らの優しさを無駄にできない件
がんばるしかー

>>547
見栄えをそのままStrictに置き換えようと思っても無理だ。
無理っていうか意味がない。

まずそこがどんな部分か考えろ。
その上で適切なid振るなりclass振るなりしてCSSで見栄えを制御。

根本的に考え方変えないと今のおまいの考え方じゃソースが悪化するだけ。

>>551
せっかくやる気になったやつに水差すようなこと言う女。はぁ？

>>551
Strictの意味がわからない俺様がいまだ仕事中ですよ。

>>551
仕様書にはずれたことしなければ、一応ストリクト。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head><title>あひゃひゃ</title></head>
<body><div><div><div>うへへ</div></div></div></body>
</html>

なんてコードでもストリクト、一応は。
ストリクトスレに行くと、ティムたんよりもストリクト指向な人たちがいっぱいいますよ。

DTDとしてのStrictじゃなくて構造と見映えの分離って意味でかきますた
紛らわしくてすまそ
ｽﾚ違いかとも思ったけど>>547見てたら>>547が無駄骨折っちゃいそうだったので
>>547のやる気を削ぐ気はなくて、せっかくやるなら考え方転換して意味のある置き換えやってほしいと思ったので
大きなお世話なら無視してください

コンテンツを一度テキスト文書でも通るように、書き出せ。
それにタグつけてからCSSでレイアウトしろ。その方が速い。
レイアウト先行でやると混乱するぞ。

出来上がったサイトをFirefoxで見るとレイアウトが崩れてるという現実・・・。

Firefoxで作ってその後、IE用に修正するのが王道。

ストリクトの意味が相変わらずわからないおいらが今日もがんばりんぐ

>>555
うへへへ。構造と見映えの分離ってのは、一応念頭においてやってるですよ。合ってるかどうかわからんけども。
>>556で言ってるような感じかなあ。
内容だけをずらーっと書いて、で、そいつらをブロック(っていうの？)でまとめて、
ブロックごとにスタイル書いてーってな感じで。

テーブルタグ省くだけじゃ終わらねーぽ

>>558の助言を元にがんばりんぐ

ブラウザによる見え方の違いって、ここまで酷いのか……orz

と、落胆する素人であった。

>>560
このページのウエブデザインテクニックって
ところに行って見れ、かなり参考になるよ。
mozilla系とIEのレイアウトずれの解消方法について載ってるから。

ttp://adp.daa.jp/

>>513
＞3％てのはMac OSのシェアでしょ？
MacOS全体は5％くらい

＞Mac内でもOS Xとクラシックで使えるブラウザが違うから、
＞クラシック環境のIE5なんて相当少ないんじゃない？

そのなかでまだクラシック環境のIE5の方がやや多い。

>>562
やや、かなあ。
8割くらいがDTP関係者＝OS9だと思ってたけど。
やや、だったらいいなあ。

ヽ(ﾟ∀ﾟ)ノﾔﾀｰ！とりあえずできたよー！おまいらありがと。

>>564
おつかれー。

>>564
サイト晒せー

ヽ(ﾟ∀ﾟ)ノ一応お客さんのページだから晒すのは無理だっ

ウチの会社、本業は全然べつものの癖に、「Webサイトも作れますよ」なんてテキトーな事言って仕事とってくる。
なのに実際サイトを作らせるのは、おいらみたいな素人軍団。
はっきり言って詐欺だと思うが、他のまともなトコと比べると格安なので、それなりに客が来るという。

こえー

floatってさーmargin="0"にしてんのになんで隙間空くわけ？殴るよ

paddingもゼロにしろよ。っていうか ="0" ってなんだよ。 :0; だろがよ。

(：0；)

padding:0;にしても隙間空くだすよーーーー。
あ、IEだけね>>568も

widthが小さいから自動で空いてるとかだったら殴るよ

>>568
エスパーじゃないので、その隙間が開くというソースを見てみないとわかりません。

<div id="a">あああ</div>
<div id="b">あああ</div>

div#a { width: 100px; float; left; }
div#b { margin-left: 100px; }

だとIEはあく。
div#b { float: left; }

だと大丈夫。
へんなブラウザ。

>>574
変なのは君のコード。

×
div#a { width: 100px; float; left; }

○
div#a { width: 100px; float: left; }

違いがわからない・・・
どれか全角になってるとか？

>>576
×＝float; left;　○＝float: left;

デコタイプ宣言で隙間を消すんだ！

>>577
わかりました！

礼のひとつもなしですか。

>>574 でタイポった俺は>>568とは別人です。
すまそすまそ。
でも、;を:に直しても、あくじゃん。IEって。

>>581
君の言う「隙間」って
1.どことどこの間のことなのか
2.使っているOSは何なのか
3.IEのバージョンは何なのか

>>582の補足
4.DTDは何なのか

>>582
だからさー。Windows版のIEでfloatを理解できるバージョン（5以降）で、
>>574で書いたみたいなhtmlとCSSを書くと、二つのブロックの間に理解し難い
隙間ができんじゃん。さんざん外出な話。
で、>>568のいう隙間ってそれのことだと思って、その回答として書いたんですよ。



で、タイポしたたわけなわけですが orz

>で、タイポしたたわけなわけですが orz

またタイポしたたわけなわけですが。

>>584
これのことを言ってるのか。
http://cssbug.at.infoseek.co.jp/detail/winie/b054.html

それにしても
div#b { margin-left: 100px; }
だけでは見た目ブロック間の隙間はできないでしょ。
（div#bの文字は確かに少しずれてみえるけど。）
div#bにwidthを指定してはじめてブロック間の隙間ができる。

>>585
どこどこ！？

>>586
> 見た目ブロック間の隙間はできないでしょ。
> （div#bの文字は確かに少しずれてみえるけど。）

そうそう、そうですそうです。そのとおり。

float止めれば良いじゃん。
IEとネスケじゃ出来上がり違うから、floatって使いにくい。
最近じゃオペラでも確認しなけりゃいけないからますます使いにくい。

　　　　　　　　　　.,;:=ニニニﾆ_;ヽ.
　　　　　　　　　 ｿ＿'''U　　＿_)ﾐﾐヽ　　　　　　　　　　　　　　　ｽﾞﾝﾎﾞ！
　　　　　　　　　（'ニミ;___;彡ニ`_}ミﾐ|　　　　　　　ｽﾞﾎﾞｯ！
　　　　　　　　 .| ⊆・ﾝ|-|. ⊆・ﾝ|¬⌒i,　　　　ミ　　　　　　　　　　　　　　ｽﾞﾎﾞｯ！
　　　　　._..-ー.l_'____;/　 !;＿_ン　 丘ﾉ'''¬ーｰ- ..,,＿　　　　ミ　　　　　
　　　 .,／　　　 |　 ｲ`ー^'`ヽ、U' ,_ノ　　　　　　　　　｀'ヽーヽ、　ミ　　　ミ
　　　./　　　　　 ｌ　|_`ﾓEEｦ' ）　ﾉ　　　　　　　U　　　　 `ｌ.　　`ヽ―、＿
　　 ／⌒　⌒ゞヽ＼＿_ー'_＿ノ　　　　　　　 ，　　　　 ::;;;;;｝　　::::　　　　｀￣''-、
　／　　／ヽ　　　ヽ　　￣　　　　　　　　　 :;:;lﾞ　　　　　　::;;;.!　:::::　　　　U　　　`l,
/　　／　　　 ＼ 　　ヽ　ヾ,..　　　　　　　　 ::;;|　　　　　　　::;;.!::::::.　 　　　　　　　 |、..／￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
　 ∠._　 ,-―､　i. ./ｦ l＿_.ﾉ`-、＿＿＿_ｕ＿ｲ　　　U　　　::;;|;::;.i;::　　　　　　 ::.lﾞ　 |　アラ、あなた？
|　irtｭ`　ｒ:tｪ;.　 .l//＿.|;;;ヾ｀ヽ::;;;;;;;;;;;;;;;ｐ;;;;;;;;;:|　　　　　　　:;;|ーヾ;;:::　　　　　　　:::::|.　|　また今日も残業しろって言われたの？
ヽ | 　.　　..　　 //￣ 7i;;;;;;:|　　　　　　 |ii#il|ﾘi　　　　　　::;:|　　 |;;;:　　　 、_　::::;;.ﾉ .|　ホントに人使いの荒い課長サンねェ・・・
　｀!､　ﾞ__,　　 ./// 7//-―ヽ　　　　　 |ii#il|ﾘi′　　　 ::;;;;;:|　　　|;;;;;;;:　　U　 `￣ﾉ＜　アン…それじゃ、お仕事がんばってネ♪
　'ﾉ ヽ　ｰ ＿// ￣/ヽ　　　　ヽ／ ￣`γ ⌒.i′　　　:::;;;;;;;|　　　|;;;;;;;;;;　　　　　 /　　 ＼＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

ttp://www.morganstanley.co.jp/aboutms/index.html

ここみたいに、短い左サイドの背景を右側に合わせて表示するにはどうすればよいのでしょうか

>>590
どうしたいのか、もうちょい詳しく。
普通に背景貼っているようにしか見えんよ。

CSSでマルチカラムをやろうとして、
div { float: xx; background: #xxx; }
とやっても、本文と同じ長さ（下の方まで）背景が塗りつぶされませんよね
tableなら何のことはないんですが、CSSならどうすればいいのかわからなくて……

>>592
いや、table（というかtdだよね？）でやる場合と同じように、
隣のブロック（セル）に引っ張ってもらえばできるよ。
がんがれ。

うはｗｗ

一般的な方法としては、左カラムと右カラムを包むDIVを用意して、
そのDIVの背景画像を左カラムの背景画像（に見えるようにしたい画像）にしてあげる。

今までCSSでやってきたけど、段組して更に画像右寄せ、とかやっちゃったら
Firefoxでは隙間が出来たり下の段が繰り上がっちゃったり最悪なレイアウトに。
全部を1つのDIVでくくると、レイアウトは崩れなくても表示が重くなるし。

というわけで、テーブルに戻ってしまいました。

>>596
clear忘れとみた。

クライアントのリクエストでcssを使わざるをえねー状況になったが
やっぱtableがいいなー

tableの使い方が本来の意義と違う……どうのこうの
とか言われてもなー。
そんなの気にするような規模か、お前のサイトは。
それより効率を考えろ。と言いたくなる。

効率を語るならのちのちのメンテも考えねーとなー。
別の制作者にスンナリと引継ぎできなきゃ効率的とは言えないわけで、
それ考えたらtable使うのが現実的なんだよね。

と言い尽くされたグチ書いてごめんなー
もうゲンナリなんだよー
TABLEデザインをCSSで再現することはほぼ可能だと思うよー
たいてい意味の無い努力だけどなー

金もらってんだからうだうだ言ってんじゃねーよ

金をもらってるからこそ
よいと思う方向を推してるんだけどなー

スレ違いすまんなー

<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>

こんなんなるくらいならテーブル使うほうがいいよな

>>601
新年早々　激しく同意

<table><tr><th><td>・・・
こんなタグが入り乱れるソースなんて耐えられない

多段div厨は糞。テーブルデザイン厨も糞。
同じ糞なら表示が軽くて正しい文法のdiv厨のほうがマシ。

>>603
tbodyを忘れてる

デザインとしてテーブルでレイアウトする場合はtbodyとか使わない人が多くない？

tbodyもthも使わない

ＣＳＳが珍しかった頃
table使わない俺って凄くね
という昔流行った煽りが未だに使われてるね

CSS詳しくなるまで、取り合えずDIVってみた。
DIVでもテーブルより楽じゃん。表示早くなったし。
面倒だからこのままDIVでやりそうｗ

DivとLayerのタグを大量に吐き出すホームページビルダーには
悩まされる。文字の大きさを変更するとレイアウトがメチャクチャ
に・・・。

>>610
それはビルダーの使い方を知らないだけでは。

html初心者の僕の書くソースは
<div>
と<table><tr><td>
の両方でいっぱいお

枠の場所だけテーブルで配置して、中身はCSSでやってる。

CSSじゃ、BOXの配置がめんどくさいから。

スレ違いな香具師が多いな・・・スレタイ嫁。

http://www.2step-css.com/

見れればいいんだよ見れれば

イントラネット上のWebシステムだったら別にどうしたって構わないけど
WWW上にゴミを撒かないでくれ。

「売れればいいんだよ、売れれば」って言いながら、堂々と環境汚染してる中国企業と同じだよ。

>>617
見なきゃいいだけだろ。中国企業とは状況がまったく違う。アホか

>>618
そりゃ、例えるなら「空気が汚いのなら吸わなきゃいいだろ」って言ってるようなもんですよ。

要は、Webページっていうのは、自発的に見にいくものとは限らないわけです。
検索されて利用される、膨大なデータベースの一部分っていう側面もあるわけで、
リソースをWWW上に公開するにあたっては、その点を踏まえて、
最低限の情報の質は持たせてほしいのですよ。
そういう側面がなかったら、別に >>618 の言うことも間違いじゃないんですが。

あと、Webページを利用するのは人間だけじゃないんです。
(厳密に言えば、「間接的に」人間が利用しているわけだけど。)
最近になって、ようやく「セマンティックウェブ」や「Web2.0」って概念が浸透し始めてきたけど、
WWW上の情報はプログラムが活用することもあるわけで。
だから、「(ソースがどうであれ)人間が見て内容が理解できればそれでよい」っていう理屈は成り立たない。

具体的にどうしろって言うと、例えばマーク付けをしっかりするとかね。
「この文章は『見出し』である」とか、
「この文章は『本文』である」みたいなことをきちんと明示しろ、と。他にもいろいろあるけど。

まぁ、どんな概念も目で見た通りそのまんまにしか理解できない、
頭の中がWYSIWYGになってる人には理解できんと思うが。

618よりはまともなことを言っている　と思う


最初の一行目しか読んでないけど

3行でまとめれ

ここでマリーアントワネット登場
↓

↓
↓　たとえ話は、よほど上手くやらないと
↓　かえって分かりづらくなったり
↓　誤解を招く元だよ。
↓

手打ちが駄目なら、ふらっしゅにすればいいじゃない（・∀・）

うっわ　他人のふりしてボケようと思ったらageちゃってるじゃないのキタコレ
マジかよ　うっわ　どーしよどーしよ
うっわーーーーー

バカばっかりのテレビ見てるからバカは許せるようになった

http://rank.nw.cx/ri/?i=urapooh3&id=pine

何この恥ずかしいスレｗ
2年前はこんなんだったのかｗ

FLASHはいいぞお
レイアウトで悩む事なくなるぞお
入れ子テーブルとか環境で挙動違うCSSなんか
もう使うなよ

インタフェースがflashのサイトはほぼ二度と行かないから悩まなくてもいいな。

もうさ、ページはポストスクリプトか何かで記述して、
リンクをクリックするたびに、横のプリンターからうにょ〜〜〜って紙が出てくる。
そんないんたーねっとを誰か作れ。

環境破壊しすぎ

地球に優しくない>>631

それなんてキャプテンシステム？

でも本当にHTMLをポストスクリプトか何かと同じだと勘違いしてるデザイナー多いよ。
フォントなんて指定しても何が出てくるか分からないのに、「ヒラギノ」とか平気で言ってくるし。
どこで知恵付けたのか、画像にしたら「SEOが」とか文句言うし。

http://www.yahoo.co.jp/ の「買う」「知る」「楽しむ」のテーブルの部分
どうやったらCSSで表現できる？
DIV使ってボックス作ってやるしかないのかな？
出来ればHTMLはシンプルなコードにしたいんだけど・・・

初歩じゃね？
とりあえず基礎だけ。

<style type="text/css">
<!--
dt { float: left; }
li { display: inline; }
-->
</style>

<body>
<dl>
<dt>買う</dt>
<dd><ul><li>ショッピング</li><li>共同購入</li></ul></dd>
<dt>知る</dt>
<dd><ul><li>ニュース</li><li>天気</li></ul></dd>
</dl>
</body>

リストの中にリストってなんか美しくないじゃん？
dl dt ddだけで出来ない？

<dl>
<dt>買う</dt><dd>ショッピング</dd><dd>共同購入</dd>
<dt>知る</dt><dd>ニュース</dd><dd>天気</dd>
</dl>

h* ul li でもいいし。

>>640
ありがと、解決したよ

やっぱdivで囲むしかなかった・・・

やっぱ面倒になったんでテーブルでいくわ・・・

？？？？

ちょっとテーブルデザインのサイトをxhtmlとcssでつくってみようとおもうんですが、なんかおもしろいとこないかなぁ。

<div id="kameda_h1">
<h1>亀田</h1>
</div>

<div id="kameda_menu">
<ul>
<li><a href"http://www.kameda.com/kouki/">kouki</a>
<li>li><a href"http://www.kameda.com/daiki/">daiki</a>
<a href"http://www.kameda.com/kazuki/">kazuki</a>
</ul>
</div>

<div id="kameda_h1">
<h1>亀田</h1>
</div>

<div id="kameda_menu">
<ul>
<li><a href"#1">kouki</a>
<li>li><a href"#2">daiki</a>
<a href"#3">kazuki</a>
</ul>
</div>


CSSはお任せでございます。

なんかつくっておもしろいさいとないかな

647

無駄なマークアップ

<h1>亀田</h1>
<ul class="id="kameda_menu"">
<li><a href"#1">kouki</a></li>
<li><a href"#2">daiki</a></li>
<li><a href"#3">kazuki</a> </li>
</ul>

無駄なdivは省くべき。

<ul class="id="kameda_menu"">

テーブルタグのいいところ。
height=100%＋align=center valign=middlleでウインドウサイズに関わらず、
絶対的にページど真ん中に持ってこられる事。
divなどでも出来る事は出来るが不安要素がある。

<div style="text-align:center">
<div style="margin:auto; text-align:left">

</div>
</div>

これで大体大丈夫なんじゃない？

>>651
>height=100%
>>652

<div style="text-align:center">
<div style="margin:0 auto; width:100%; text-align:left">

</div>
</div>
こうか

widthじゃねえよheightだよ＿|￣|○

>>654
とりあえずCSS質問スレのテンプレくらい読んでこようよ。

<TABLE width=100%>
<TD width=2></TD>
<TD width="○○"</TD>
</TABLE>
で○○に何を入れたら残りを埋めてくれるんだ？○○に何も入れない場合上の2pxが伸びてしまう。
○○に100%を入れると2pxがつぶれてしまうし・・・。どうしたらいい？

>>657
スレ違い

学生の課題で、mixiをcssで直したってのがあったな・・・
ページ知らない？

あったあった、これだ。

mixiをXHTML+CSSで組みなおす
http://3ping.org/2006/05/16/0529

[改]mixiをXHTML+CSSで組みなおす
http://3ping.org/2006/05/24/0142

同じサイトで、Hatenaも直されてたｗ

HatenaをXHTML+CSSで組みなおすDate2006-05-24 (Wed) CategoryXHTML CSS
http://3ping.org/2006/05/24/2259

へー、面白いね。
我々もどっかの有名サイトをCSSで競い合おうよ。

Yahooはどうよ

うちのTABLE主体のデザイナーに見せてみるかｗ

body {
background-image : url("〜〜");
background-color:#ffffff;
background-position: ~~px 0%;　　←こういう風にこの部分にpx指定するのは可能でしょうか？
background-repeat: repeat-y;
background-attachment: fixed;
}

自分のブラウザでは見た目に不具合は無いのですがマズいですかね？

可能だしCSS的にも問題はない
W3C原理主義者は「相対指定は善！絶対指定は悪！」って言うだろうけどそこまで徹底してる人は少ない

基本的にほぼ全て可能・・・
ターゲットブラウザを選ばなきゃならんが、ブラウザによって違った.cssを振り分けるという手もある。
ただし、余計に手間がかかるのでテーブルのままの方が適しているサイト構成もある。

CSSで２列の段組。

IE6、Firefoxで動いて、さらに
左の列は、上から下まで背景色をつける。
当然。右の列の内容が左よりも永い場合も短い場合もね。

これ、たぶん実現不可能。

floatで普通に出来ね？

ＣＳＳで<td valign="middle">と同じような事って出来る？

>>668
余裕でできるよ

>>669
できないよ。
左が短くて、右が長い場合絶対左の部分は短くなる。
floatで浮かしたたブロックを縦に伸ばすには、中身を入れるか
縦の長さを直接指定するしかない。

だから右の部分が長くなったとき、それにあわせて
左の部分を長くして色をつけるということは出来ない。


>>671
作ってから言ってね。

>>672
できるっちゅうに。勉強したまへ。
基本事項だよ。floatについてもっと勉強汁。
gizi要素についてもね。

>>673
できないっちゅーんねんｗ
擬似要素はIEじゃろくにサポートされていないし。

お前が考えている方法わかるよ。
でもそれだと、右が長くなったときに左の長さをあわせられても
今度は、左が長くなったときに右の長さをあわせられないんだよ。

どこのページを見ても、背景に色はついていない。ついている奴は制限あり。
まあ、出来ると言うのなら、そのCSSを提示しろ。
話はそれからだ。

美しくないが<div>入れ子で解決☆

>>674
>擬似要素はIEじゃろくにサポートされていないし。
IEの挙動を勉強汁。

まず、floatされた要素をブロックで囲む方法だが、
Fxはgizi要素で対応するとして、IEへの対応は

・外側のボックスの幅を指定するケース
・外側のボックスの幅を指定しないケース

で若干ソースは異なる。
どのようなselector,property,valueを指定すれば、IEで適用されるか実験汁。

右が長くなろうが左が長くなろうがbackground-colorを片方に合わせればええんちゃうの。
横幅指定の画像をbackground-imageでrepeat-y指定ちゅう手もあるしのー。

ソースは気が向いた時にでも出しちゃる。

>>670は出来ますか？

>>677
実験してみた金？
何ができないのかが疑問。。。もう寝るかな

>>676
実際にやってみればわかる。
期待しないで待ってるよ。

暇なんでやってみた。
幅固定する場合
http://www.geocities.co.jp/hio_annex/float_ex/

%でやるときは、内包されるブロックの幅の合計が100%未満になるようにやらないと、
IEがだだをこねるから注意。

つか、CSSスレで聞いた方が詳しく教えてもらえるよ？

そのやり方では、リキッドレイアウトにするのは不可能だな。
というか、リキッドレイアウトでそれをやるのは無理。

左に太いボーダーラインを引いたボックスAの中にボックスBを入れる（入れ子）。
ボックスBにマイナスマージンを入れて、ボックスAの太いボーダーラインに合わせる。
ボックスBは透過にし、ボックスAのボーダーライン色を背景色にする。

ってしたけど、うまくいかなかった記憶があるな。

>>681
どこまで可変を望むかによるが、>>680のやり方でも、片方を固定、片方を可変にできる。
例えば、サイドバーの様に比較的幅が狭い方を固定にし、幅広のコンテンツ部を可変にするというようなやり方。
これならブラウザサイズを縮めようが、印刷スタイルとして縦に印刷しようが、許容範囲内だ。コンテンツがあふれ出すということは無い。大抵の場合はこれでOK。

それと、左右完全リキッドの場合だが...

不可能じゃないぞ。

ちなみに俺はできる。この機会にCSSのプロパティ全部見直してみたらいかが？
それと、普段使わないような値にも気をつけながらね。

CSSはパズルだなｗ

ほんとうにごめんなさい。
http://www.geocities.co.jp/hio_annex/float_ex2/

すみません、並列に並べだ３つのdivのブロックを分割したいんですが、
一番右のブロックの横の長さは150px。
残りの二つの横の長さを3:7に分けるという分割方法はあるのでしょうか？

埋もれてるくさいので、一応age

すみません、paddingとか消したらできました。自己解決です。

ボックスを3つ4つ以上横に並べるのって不可能？

可能。

捕手

hoshu

商品の一覧ページなど、１つのパターンのブロックを一定数表示させるページのレイアウトで質問です。
htmlを弄らず、縦並びレイアウトと横並びレイアウトをCSSで可変にしたいのです。
=-=-=-=-=-=-=-=-=-=-=-
［縦並びレイアウト］
・A
・B
・C
・D
・E
・F
=-=-=-=-=-=-=-=-=-=-=-
［横並びレイアウト］
Ａ│Ｂ│Ｃ
─┼─┼─
Ｄ│Ｅ│Ｆ
=-=-=-=-=-=-=-=-=-=-=-
いまの所、全体を大きな枠（620px）で囲んで
その中にdivで括った項目を記述しています。
で、縦はそのままで問題なし。
横並びにする際は中の項目を横幅固定（200px）にしてfloar:left;
ただこれだとA〜Fの高さが違うと綺麗に揃わない…。
高さを固定すれば揃うけど、なるべく高さは可変にしたいのです。
今まではテーブルに頼っていたのですが、これをCSSで再現するには
どうすればいいでしょうか？
知恵をお借りしたいです。

スレタイも1も読めない無能にはどんな方法でも無理。

http://syuresangogo.blog77.fc2.com/blog-entry-47.html#more
ここ読めば分かる

ttp://hinoki.sakura.ne.jp/~okada/table/guest-i.html

沖縄県の方へ（命に関わる注意事項です）

沖縄県での選挙ですが、どうか民主党だけは避けてください。県民の生命に関わる可能性があります。
民主党の最大の公約は一国二制度（※）ですが、一度「一国二制度　沖縄　三千万」等で検索をお願いします。
この際、民主党のＨＰで調べても良いです。以下の注釈↓と矛盾することは書いてないはずですから…

※一国二制度
　簡単に言えば沖縄を中国と日本の共有物にし、そこに3000万人の中国人を入植させます。
　（つまり沖縄人口の 96% を中国人にして、実質、沖縄を中国人の居住地とします。）
　さらに「自主」の名の下、沖縄で有事が起きても自衛隊は干渉できません。
　3000万人の中国人が、少数派となった130万人の日本人に何をしても、です。
　そして反日教育を受けた中国人の反日感情の強さは、ほとんどの日本人の理解を超えるものです。

今回の選挙で民主党が勝った場合、「自主」「発展」を連呼しつつ段階的に進めていくことになります。
自主と言っても、自主を認めるのが「住人の96%が中国人となった」後だということに気をつけてください。
発展と言っても、新沖縄の少数派となった「少数民族日本人」の発展ではないことに気をつけてください。

web2.0とか言われてるけど
構造はテーブルでもいいと思う

上に同じ

>>698
Web2.0とCSSレイアウトは全く関係ないだろｗ

>>698
Web2.0とCSSレイアウトは全く関係ないだろｗ

もう疲れた・・・
<table>
<tr><td nowrap>名前1</td><td>説明1</td></tr>
<tr><td nowrap>名前2</td><td>説明2</td></tr>
</table>
で名前1や名前2の列幅を指定しなくても内容によって可変幅かつ
(テーブルなら当然だが)名前1と名前2の幅を揃える。
こんなことがCSSじゃ無理だと悟った。

ttp://useyan.x0.com/s/html/css_sample/dl-table.html
がいちばん近い(枠線なしね)が、項目名の幅固定なので
これなら別にDIVでもええやんって感じ。

あばよ!! おれはTABLE使いに戻ることにしたよ。

そこはテーブルでいいだろ・・・

いや、実際には名前と説明じゃなくて
DL,DT,DDがいちばん適当なんだよ。

それぞれ一応独立しているというか
ヘッダーを付けるのがへんあというか

あげあげ

http://okwave.jp/qa2189040.html
この質問にあるような
「複数行の文字を、画像の縦方向の中心に揃えたい」っていうのは
cssではどうやったらできるの？悩んだ挙句、結局table組んじまったよ。
cssってこんな単純なレイアウトすらできないのか？
まさかそんなはずないよな？俺が無能だからできないだよな？

こんなんでどうだい？
モダンブラウザでdisplay: table;、古いブラウザでinline & zoom

IE6以下でどこまでのバージョンで大丈夫か分からんが
paddingとかmarginとか細かいことは各々やってくれ
IE6以下のハックもこのままだとvalidator通らんかも知れん
スターハックとかで分ければそれも何とかなるはず

【CSS】
div.casette {width: 300px; display: table; border: 1px solid #CCCCCC;}
div.casette img , div.casette p {
display: table-cell;
/display: inline; /* ハックIE6以下 */
/zoom: 1; /* ハックIE6以下 */
vertical-align: middle;
}

【HTML】
<div class="casette">
<img src="画像ファイル" width="100" height="100" />
<p>中央揃えの文字<br />複数行入れるよ</p>
</div>

ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー

↑上の図みたく列の幅をバラバラに作ることって実現可能でしょうか？
いろいろやりかたを探しているんですがわかりません。。

日本語でおＫ

一つのテーブルで各行ごとにセル幅を定義することは可能かって意味じゃないかね
そう言われてみると無理だな
むしろ無理でもいいから列のコントロールが出来てほしい

>>711
すみません、図が違ってました。
おっしゃるとおり↓こういった感じです。

ーーーーーーーーーーーーーーーーー
| 　　　　　 |　　　 |　　　　 　　　　　　　　　　|
ーーーーーーーーーーーーーーーーー
| 　　　　　　　| 　　　　　　　　|　　　　　　　　 |
ーーーーーーーーーーーーーーーーー
| 　　　　|　　　　　　　　　　　　　　　 | 　　　|
ーーーーーーーーーーーーーーーーー

無理そうですか・・・。

というか思い切り
ス　レ　違　い

マジレスすると一行ずつ別のテーブルにして入れ子にしてやればできる

ここなら知っている方がいるかもしれないと思って。
失礼しました。

スレチなのに解答してくれた人に礼もナシか

>>715
すみませーん（＾＾；
ご回答くださったみなさん
ありがとうございました！

まあ、お遊びなんだろうけど。
CSSはパソコンのCPUも今よりは非力で、インターネット回線も細々としていたころにhtmlソースを少なくして、閲覧を容易にする為に考えだされたんだな。
だから、tableをCSSで表現するとソースが大きくなるので、主客転倒になるね。

>>717
tableをcssに直すことと
tableデザインをcssデザインに直すこと
この二つが決定的に違うことを学んでからレスしような

tableをCSSで表現するとソースが大きくなるｗ

htmlソースを少なくすると閲覧が容易になるんですね、分かります

>>712
.unko{
width:10px;height:1px;border:0;margin:0; /*うんこ*/
}
<table>
<tr>
<td class="unko"></td>
　　　 <td class="unko"></td>
<td class="unko"></td> ×１０個　　計　500px
<td class="unko"></td>
<td class="unko"></td>
</tr>
<tr>
<td colspan="5"></td><td colspan="15"></td><td colspan="10"></td>
<td colspan="15"></td><td colspan="5"></td>
</tr>
<tr>
<td colspan="15"></td><td colspan="5"></td><td colspan="10"></td>
<td colspan="7"></td><td colspan="13"></td>
</tr>
<tr>
<td colspan="8"></td><td colspan="7"></td><td colspan="13"></td>
<td colspan="14"></td><td colspan="8"></td>
</tr>
<tr>
<td class="unko"></td>
　　　 <td class="unko"></td>
<td class="unko"></td> ×１０個　　(見た目的に追加）
<td class="unko"></td>
<td class="unko"></td>
</tr>
</table>

>>721
そりゃダメだよw

IE7 用css
IE8 用css
Chrome 用css
Firefox 用css
Safari 用css
Opera 9.5 用css
Opera 8.65 用css
ネットフロント 用css
wasabi 用css
Skyfire 用css

なんつーか複雑になればなるほどテーブルの方が良くなってくよね。
CSSにしても複雑さが1段階上がるごとにめちゃめちゃソースが肥大化して
段々得が無くなってくる。

正直、スタイルシートって使いにくい
全然直感的じゃ無い

誰もソースなんて見ないんだから
方法論であるCSSなんてどうでも良いや

やっぱり手部うmおいい

みんなくわしいね

　　∧＿∧
　 （　・∀・） 　　 　 |　| ｶﾞｶﾞｯ
　と　　　　） 　　 　 |　|
　　 Ｙ　/ノ 　　　　 .人
　　　 /　） .人　　 < 　>_∧∩
　 ＿/し'　< 　>_∧∩｀Д´）/
　（＿フ彡　Ｖ｀Д´）/　　 / ←>>147
　　　　　　　　 　 　/ ←>>325

＞大阪府三島郡島本町の小学校や中学校は、暴力イジメ学校や。
島本町の学校でいじめ・暴力・脅迫・恐喝などを受け続けて、心も身体も壊されて廃人同様になってしもうた僕が言うんやから、
まちがいないで。精神病院へ行っても、ちっとも良うならへん。教師も校長も、暴力やいじめがあっても見て見ぬフリ。
そればかりか、イジメに加担する教師もおった。 誰かがイジメを苦にして自殺しても、「本校にイジメは
なかった」と言うて逃げるんやろうなあ。
島本町の学校の関係者は、僕を捜し出して口封じをするな

＞「口封じ」なんかしません。どうぞ、気が済むまでお書き込み下さい。

＞島本町って町は、暴力といじめの巣窟なんだな


　島本町は日本の恥！島本町は日本の迷惑！

667/709
記念カキコ