mixiをXHTML+CSSで組みなおす - 3ping.org

授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。 現在のCSSは「どんな見栄えも出来てしまう」とは言えない。本当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。 けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある) もち

[tsukkee]

これはおもしろいなー

[Akula]

毎度のCSSで組みなおすシリーズ。既存のページを組みなおすのは割りと手軽でスキルが身につくからとても有用な方法だと思う。Mixiはその中でも格好の問題だと思う。

[webmarksjp]

mixi

[HISAMATSU]

xhtml+css でなんとか研究にできないだろうか。。

[Naski]

秀逸なCSSレイアウトの例。ただし文字サイズ変更は考慮されていない

[tenkao]

"「mixi」をXHTMLで書き直したもので、とてもよく出来てました"

[denken]

びみょうにタイムリー。あとbodyにbackground-colorを指定してくださいお願いします

[usj12262]

なんかほのぼのしてていいなあ

[rna]

フォントでかくするとぐちゃぐちゃになるんですけど。本物のmixiは少なくとも文字が重なり合って読めなくなることはない。

[twainy]

mixiのデザインを良く見てみると、同じような機能を持つセクションは、同じようなビジュアルになっているので、セクションごとにclassを振るのではなく、機能ごとにclassを与えて分類すること

[yugui]

新人研修にいいかもね。

[shidho]

すごいなー。

[popona]

非公式専用ブラウザで読む人が多いならなおさら構造重視の方がっ

[fukken]

mixiをvalid html+CSSで表現。ページ容量にして1/3に

[sshi]

HTML + CSSの良い例、、なのかな？批判も読みたいな。

[penalty]

面白い。CSS勉強になるだろうなぁ。

[vkgtaro]

既存サイトを XHTML + CSS で組みなおす。

[hiboma]

ファイルサイズが1/3まで減るんだったら、TABLEを使わんでもいいかもね

[se-mi]

ほほぉ

[tominaga]

CSSで組むとファイルサイズ減量。

[kazu_virgo]

○○○をXHTML+CSSで組みなおすシリーズ第一段。

[thiswholeworld]

ソース量が60％減（cssファイル分除く）