- May 16, 2006 5:29 AM
- XHTML CSS
授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。
mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。
現在のCSSは「どんな見栄えも出来てしまう」とは言えない。本当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。
けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある)
もちろん、人によっては別の要素でマークアップすると思う部分はあるかもしれないけど、これはこれで、ひとつの正解と言える。なにより、Mixiのレイアウトをきちんと再現できているという部分でハナマルちゃんである。
ページ上部のメニューは、リストの中の文字をtext-indentで飛ばし、CSSでアンカー要素の背景画像を切り替えてボタンのように表示するテクニックを使っている。これは画像がoffの状態だと何も表示されず、閲覧者はリンクの存在にも気づけないという危険性があるが、生徒はそれも理解しているし、mixiの利用者を考えれば特に気にする事でもない。(はず)
ぐっどじょぶ。きっと、僕の教え方のうまさが天才的なのだろう。
(うそ！言ってみただけ! お願い石投げないで!!)
ステップアップ
この時期でここまで出来れば十分なのだけど、まだまだ改善できる部分もある。
- alt属性の値を適切に
- classを減らす
1.については理解してないはずないので、横着しちゃったのかも。
classを減らす
mixiのデザインを良く見てみると、同じような機能を持つセクションは、同じようなビジュアルになっているので、セクションごとにclassを振るのではなく、機能ごとにclassを与えて分類することで、使いまわしが効くようになり、管理を楽チンにすることができる。
右列の3つのような、囲いのデザインは同じでも中身の表示が個別に違ってくるような場合は、共通するデザインを1つのclassに定義し、それぞれ異なる部分を個別にもつidに定義すればいい。
他にも、「どのグループに属しているか」というのをセレクターにして定義するやり方もあるけど、mixiのデザイナーと相談でもしないと難しい‥。
A・エレメント君「なんで僕はこんなデザインになってるのー？」
制作者「キミはニュースに分類されているからだよ」
B・エレメント君「僕もニュースに分類されてるよ、なのにA君とはここが違うよ」
制作者「それはキミの個性だよ」
C・エレメント君「俺も皆と同じ分類なのに、デザインがまるで異なっているのはどうしてだい？」
制作者「そうなんだ、実は他のみんなとは親が違うんだ」
C・エレメント君「 (￣o￣;) 」
余談
- テーブルで組まれたmixiのhtmlファイル容量が48KB(自分のページ調べ)
- XHTML+CSSで構成されたhtmlファイル容量が16KB
この軽量化率が他のページにも当てはまるとすれば、mixiをXHTML+CSSで書き直すだけでhtmlファイルのトラフィックを3分の1にする事が出来る。mixiの１日のPVは1000万と聞いたけど、削減される転送量は月で何テラだろう。サーバー管理費にするといくらだろう。
- Newer: [改]mixiをXHTML+CSSで組みなおす
- Older: 移転に関する詳細と変更点、と腹
