- 2006年5月16日 05:29
- 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: 移転に関する詳細と変更点、と腹
Comments:5
- TEA 2006年5月16日 13:14
はじめまして。確かはてなブックマーク（Qooqleかな？）でDT DDを横並びを知り、以来閲覧しているモノです。
凄いですね！mixi。前々から思っていましたが、やってしまう方がいらっしゃるとは。
私は事務をしており現在Webの勉強中の身なのですが、コチラは濃い内容で非常に参考になります。
これからもまた拝見致します。楽しみにしています。
ちなみにページ上部のメニューの注釈をされておりますが、text-indentせず背景画像の使用でやる方法がベストでしょうか。更に良い（軽量化できるような）方法をご存知でしたら、是非ともご教授ください。
- wu 2006年5月16日 20:32
TEAさん、はじめまして。
どうかうちの生徒を褒めてやってください。>text-indentせず背景画像の使用でやる方法がベストでしょうか。
高いアクセシビリティーが要求されるようなサイトでは、あのデザインだったらボタン部分をimg要素で貼り付けるのがいいですね。軽量化という点では、どちらも差は無いですよ。(画像がキャッシュされるならば)
ボタンのデザインが変更になったときに、1つのCSSを編集するか、ボタンの張られたHTMLを編集するか、っていう違いもありますね。
- TEA 2006年5月16日 23:55
お返事ありがとうございます。
生徒さんはもとより教え方のうまさが天才的なのでは
と石の変わりに投げてみます。FirefoxでCSSを外して閲覧するのが専らの趣味になりつつありますが（私はCSSでの「デザイン」が満足に出来ないので、何とかしたいものなのですが・・）tableを使わず（いやdivも最小限で）出来ているページが清々しく見えるのは何故なんでしょう。
Mixi同様Yahoo!やGoogleが未だcenterとかbody bgcolorとかtd alignとか、使い続けているのには理由があるのでしょうか。
- wu 2006年5月17日 18:52
僕もCSSを切った時のスッピン状態が大好きです。
Strictより、 PureHTMLとかいう名前だったら、もっともっと広まりやすいのかなぁ。講義やってるとたびたび思うのですが、Tableでのレイアウトに比べたら、HTML4.01やXHTMLはとっても教えやすいし、覚えやすいと思いますねぇ。 ただ、Dreamweaverやビルダーを使ってグラフィカルにサイトを作る行為自体は生徒にウケがいいんでしょうけど。
- hal* 2006年7月 7日 08:25
余談のトラフィックの話、すごい！です。理屈の分かっていない事ではなかったのですが、どうだろう？と問われて…事の重大さに気づきました。ありがとうございます。
Trackbacks:0
- TrackBack URL for this entry
- http://3ping.org/mt2/mt-tb.cgi/74
- Listed below are links to weblogs that reference
- mixiをXHTML+CSSで組みなおす from 3.5ping.org
