Posts Tagged “html”

XHTML+CSSを覚えるために昔やったこと

以前、マークアップエンジニアだったときに僕がHTMLとCSSを覚えるためにやったこと(別にこれを意識してたわけじゃないけど)を挙げてみます。
今ではレイアウトのサンプルサイトがたくさんあって、そこからソースをDLしてきて「見て覚える」のが主流なのかもしれないんだけど、たとえばPhotoshopデータを渡されて「じゃあ、これレイアウトして」って言われたらどうするのか? ということです。
考え方としては、
1.画面デザインにどんな項目があるのかを理解する
2.項目を大まかに分類する
3.大まかな分類をブロックに分けて、ワイヤフレームを考える
4.ワイヤフレームを大まかに順序付けする
5.ワイヤフレームをXHTML+CSSで書く
6.ブロックの中身をマークアップする

mixiのログインページはFlashの上にHTMLを置いている

mixiログイン画面
mixiのログインページは広告が前面に出てるのは1000万人の常識なんだけど(6月くらいはダイハードのムービーだった)、ログイン用のフォームの位置はそのままで背景だけFlashになっています。
一瞬、分からなかった。小憎いことしよるのう。
種明かしをすれば、普通にFlashを枠の中に書き出して、ログインフォームのHTML(div要素)をCSSで絶対配置にしているだけでした。以下、一部抜粋。

div#login_main {
width:720px;
height:350px;
}
div#login_all {
position:absolute;
top:160px;
left:506px;
}

div#login_mainはflashで置き換える部分で、この上にabsoluteなdiv#login_all(フォーム)が置いてある。
別に分かれば大したことじゃないんだけど、ここでいうlogin_allはただのHTML-div要素なので、jsからDOM操作でいかようにも動かしたり消したり大きくしたりスライドしたり、色々見た目に面白く弄ることもできる。
HTMLの上にFlashを置いてさらにその上にHTMLを置いて…っていう謎のコンテンツも作れそう。
必要あんのか。