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

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

まあやってみてくれ

684 ：Name_Not_Found：2006/10/11(水) 02:33:33 ID:???.net

CSSはパズルだなｗ

685 ：Name_Not_Found：2006/10/11(水) 18:41:00 ID:???.net

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

686 ：Name_Not_Found：2006/10/30(月) 15:11:08 ID:???.net

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

687 ：Name_Not_Found：2006/10/30(月) 15:44:08 ID:HrkncwVu.net

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

688 ：686：2006/10/30(月) 17:45:07 ID:HrkncwVu.net

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

689 ：Name_Not_Found：2006/11/06(月) 18:23:25 ID:???.net

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

690 ：Name_Not_Found：2006/11/06(月) 18:31:37 ID:???.net

可能。

691 ：Name_Not_Found：2007/01/18(木) 20:33:11 ID:???.net

捕手

692 ：Name_Not_Found：2007/03/27(火) 18:48:15 ID:vLJg7IQU.net

hoshu

693 ：Name_Not_Found：2007/04/20(金) 23:59:59 ID:???.net

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

694 ：Name_Not_Found：2007/04/21(土) 00:57:08 ID:???.net

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

695 ：Name_Not_Found：2007/04/21(土) 19:01:36 ID:zOaqtSIi.net

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

696 ：Name_Not_Found：2007/04/21(土) 19:32:05 ID:???.net

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

697 ：Name_Not_Found：2007/04/21(土) 19:56:00 ID:ukV6pm7e.net

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

沖縄県での選挙ですが、どうか民主党だけは避けてください。県民の生命に関わる可能性があります。
民主党の最大の公約は一国二制度（※）ですが、一度「一国二制度　沖縄　三千万」等で検索をお願いします。
この際、民主党のＨＰで調べても良いです。以下の注釈↓と矛盾することは書いてないはずですから…

※一国二制度
　簡単に言えば沖縄を中国と日本の共有物にし、そこに3000万人の中国人を入植させます。
　（つまり沖縄人口の 96% を中国人にして、実質、沖縄を中国人の居住地とします。）
　さらに「自主」の名の下、沖縄で有事が起きても自衛隊は干渉できません。
　3000万人の中国人が、少数派となった130万人の日本人に何をしても、です。
　そして反日教育を受けた中国人の反日感情の強さは、ほとんどの日本人の理解を超えるものです。

今回の選挙で民主党が勝った場合、「自主」「発展」を連呼しつつ段階的に進めていくことになります。
自主と言っても、自主を認めるのが「住人の96%が中国人となった」後だということに気をつけてください。
発展と言っても、新沖縄の少数派となった「少数民族日本人」の発展ではないことに気をつけてください。

698 ：Name_Not_Found：2007/10/22(月) 13:43:20 ID:???.net

web2.0とか言われてるけど
構造はテーブルでもいいと思う

699 ：Name_Not_Found：2008/11/20(木) 01:29:25 ID:???.net

上に同じ

700 ：Name_Not_Found：2009/01/07(水) 14:16:36 ID:???.net

>>698
Web2.0とCSSレイアウトは全く関係ないだろｗ

701 ：Name_Not_Found：2009/01/07(水) 14:17:42 ID:???.net

>>698
Web2.0とCSSレイアウトは全く関係ないだろｗ

702 ：Name_Not_Found：2009/01/24(土) 19:35:40 ID:btxo4Dz8.net

703 ：Name_Not_Found：2009/01/31(土) 21:07:35 ID:???.net

もう疲れた・・・
<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使いに戻ることにしたよ。

704 ：Name_Not_Found：2009/01/31(土) 22:29:36 ID:D1XX/oMy.net

そこはテーブルでいいだろ・・・

705 ：Name_Not_Found：2009/01/31(土) 23:44:44 ID:???.net

いや、実際には名前と説明じゃなくて
DL,DT,DDがいちばん適当なんだよ。

それぞれ一応独立しているというか
ヘッダーを付けるのがへんあというか

706 ：Name_Not_Found：2009/05/03(日) 16:03:03 ID:SeuzMMMK.net ?2BP(6666)

あげあげ

707 ：Name_Not_Found：2009/05/06(水) 03:33:10 ID:TbQmgY5N.net

http://okwave.jp/qa2189040.html
この質問にあるような
「複数行の文字を、画像の縦方向の中心に揃えたい」っていうのは
cssではどうやったらできるの？悩んだ挙句、結局table組んじまったよ。
cssってこんな単純なレイアウトすらできないのか？
まさかそんなはずないよな？俺が無能だからできないだよな？

708 ：Name_Not_Found：2009/05/06(水) 09:40:14 ID:???.net

こんなんでどうだい？
モダンブラウザで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>

709 ：新参者：2009/06/13(土) 12:25:59 ID:OqRIQ4LA.net

ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー
| | | |
ーーーーーーーーーーーーーーーーー

↑上の図みたく列の幅をバラバラに作ることって実現可能でしょうか？
いろいろやりかたを探しているんですがわかりません。。

710 ：Name_Not_Found：2009/06/13(土) 12:57:01 ID:???.net

日本語でおＫ

711 ：Name_Not_Found：2009/06/13(土) 14:44:31 ID:???.net

一つのテーブルで各行ごとにセル幅を定義することは可能かって意味じゃないかね
そう言われてみると無理だな
むしろ無理でもいいから列のコントロールが出来てほしい

712 ：新参者：2009/06/13(土) 15:16:23 ID:???.net

>>711
すみません、図が違ってました。
おっしゃるとおり↓こういった感じです。

ーーーーーーーーーーーーーーーーー
| 　　　　　 |　　　 |　　　　 　　　　　　　　　　|
ーーーーーーーーーーーーーーーーー
| 　　　　　　　| 　　　　　　　　|　　　　　　　　 |
ーーーーーーーーーーーーーーーーー
| 　　　　|　　　　　　　　　　　　　　　 | 　　　|
ーーーーーーーーーーーーーーーーー

無理そうですか・・・。

713 ：Name_Not_Found：2009/06/13(土) 17:34:55 ID:???.net

というか思い切り
ス　レ　違　い

マジレスすると一行ずつ別のテーブルにして入れ子にしてやればできる

714 ：新参者：2009/06/13(土) 19:23:17 ID:???.net

ここなら知っている方がいるかもしれないと思って。
失礼しました。

715 ：Name_Not_Found：2009/06/13(土) 19:56:48 ID:???.net

スレチなのに解答してくれた人に礼もナシか

716 ：新参者：2009/06/13(土) 21:09:38 ID:???.net

>>715
すみませーん（＾＾；
ご回答くださったみなさん
ありがとうございました！

717 ：Name_Not_Found：2009/06/14(日) 11:43:52 ID:0ssDnv+6.net

まあ、お遊びなんだろうけど。
CSSはパソコンのCPUも今よりは非力で、インターネット回線も細々としていたころにhtmlソースを少なくして、閲覧を容易にする為に考えだされたんだな。
だから、tableをCSSで表現するとソースが大きくなるので、主客転倒になるね。

718 ：Name_Not_Found：2009/06/14(日) 20:58:46 ID:???.net

>>717
tableをcssに直すことと
tableデザインをcssデザインに直すこと
この二つが決定的に違うことを学んでからレスしような

719 ：Name_Not_Found：2009/06/14(日) 21:00:43 ID:???.net

tableをCSSで表現するとソースが大きくなるｗ

720 ：Name_Not_Found：2009/06/14(日) 22:19:14 ID:???.net

htmlソースを少なくすると閲覧が容易になるんですね、分かります

721 ：Name_Not_Found：2009/06/21(日) 16:30:09 ID:???.net

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

722 ：Name_Not_Found：2009/06/24(水) 04:42:18 ID:???.net

>>721
そりゃダメだよw

723 ：Name_Not_Found：2009/07/07(火) 01:41:20 ID:???.net

IE7 用css
IE8 用css
Chrome 用css
Firefox 用css
Safari 用css
Opera 9.5 用css
Opera 8.65 用css
ネットフロント 用css
wasabi 用css
Skyfire 用css

724 ：Name_Not_Found：2010/03/13(土) 14:18:57 ID:???.net

なんつーか複雑になればなるほどテーブルの方が良くなってくよね。
CSSにしても複雑さが1段階上がるごとにめちゃめちゃソースが肥大化して
段々得が無くなってくる。

725 ：Name_Not_Found：2010/04/18(日) 00:28:46 ID:???.net

正直、スタイルシートって使いにくい
全然直感的じゃ無い

誰もソースなんて見ないんだから
方法論であるCSSなんてどうでも良いや

726 ：Name_Not_Found：2010/05/04(火) 00:25:51 ID:???.net

やっぱり手部うmおいい

727 ：Name_Not_Found：2010/05/05(水) 21:12:00 ID:OJQg26g1.net

みんなくわしいね

728 ： 忍法帖【Lv=40,xxxPT】(4+0：5) 【33m】 電脳プリオン ◆3YKmpu7JR7Ic ：2012/09/17(月) 11:16:13.98 ID:???.net ?PLT(12079)

　　∧＿∧
　 （　・∀・） 　　 　 |　| ｶﾞｶﾞｯ
　と　　　　） 　　 　 |　|
　　 Ｙ　/ノ 　　　　 .人
　　　 /　） .人　　 < 　>_∧∩
　 ＿/し'　< 　>_∧∩｀Д´）/
　（＿フ彡　Ｖ｀Д´）/　　 / ←>>147
　　　　　　　　 　 　/ ←>>325

729 ：Name_Not_Found：2013/08/03(土) NY:AN:NY.AN ID:H7aXlZ1y.net

＞大阪府三島郡島本町の小学校や中学校は、暴力イジメ学校や。
島本町の学校でいじめ・暴力・脅迫・恐喝などを受け続けて、心も身体も壊されて廃人同様になってしもうた僕が言うんやから、
まちがいないで。精神病院へ行っても、ちっとも良うならへん。教師も校長も、暴力やいじめがあっても見て見ぬフリ。
そればかりか、イジメに加担する教師もおった。 誰かがイジメを苦にして自殺しても、「本校にイジメは
なかった」と言うて逃げるんやろうなあ。
島本町の学校の関係者は、僕を捜し出して口封じをするな

＞「口封じ」なんかしません。どうぞ、気が済むまでお書き込み下さい。

＞島本町って町は、暴力といじめの巣窟なんだな


　島本町は日本の恥！島本町は日本の迷惑！

730 ：Name_Not_Found：2014/11/17(月) 00:38:07.23 ID:???.net

667/709
記念カキコ

731 ：Name_Not_Found：2017/12/12(火) 06:33:43.78 ID:MrUcGD8N.net

HPなどで友達が稼げるようになった情報とか

⇒　http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

ILNG17UFHY

732 ：Name_Not_Found：2018/05/01(火) 19:54:21.31 ID:l1wYHpV1.net

誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

WMKFU

733 ：Name_Not_Found：2024/04/02(火) 22:06:33.78 ID:Y6/GfqrcQ

天下り税金泥棒地球破壊シ゛ャクソのミサイルのみならず金正恩のロケットも失敗ばかり
ジャクソ同様貧困に苦しむ大衆をよそに税金泥棒利権が確立して安定した地位に安住してたりするのかな
せめて地球と住民の生命と財産を保全するために地域の安全保障にとって重大で差し迫った脅威であり国際社会への明白で深刻な挑戦であり
大量破壊兵器であるクソ航空機の数匹くらい撃墜してくれれば全力マンセーなんだがな．税金で地球破壊支援して世界最悪の脱炭素拒否
テ囗国家に送られる化石賞4連続受賞して世界中から非難されながら力による一方的な現状変更によってクソ航空機倍増．閑静な住宅地から
都心まで数珠つなぎで鉄道の30倍以上もの莫大な温室効果ガスまき散らして気候変動させて土砂崩れ、洪水、暴風、熱中症にと災害連発
させてる世界最悪の殺人テロ組織公明党強盗殺人の首魁蓄財3億円超の斉藤鉄夫、岸田異次元増税憲法ガン無視地球破壊霸権主義文雄に
これ以上の威嚇的な行動をやめ真剣で持続的な政治に取り組むへ゛きだと非難しよう!
(rеf.) tΤρs:/／www.Сall4.jp/info.php?Type〓iТems&id=I0０00062
ttps:／／haneda-projecТ.jimdofree.com/ , ttps://flight-rouTe.com／
Τtps://n-souonhigaisosyoudan.amebaownd.com／