みんなのちからになりたい

コピペでブログラムつくっていきたい

htmlでdivのマトリックスを作る

htmlにマトリックス作ってそこクリックしたらそのboxになんかやるみたいなことやりたいので、試しにブラウザのでかさいっぱいにマトリックス作ってその1つ1つの背景を変えるというやつを作ってみた。boxクリックしたらその位置の番号も表示する。
ちなみにこれ置くためにgh-pages作ってみたかった。

bigabiga

最初なにも考えずdivを並べて書いていったら縦に追加されてまじすかと思ったんだけど、いまのテクノロジはすごくてcssで一発で横展開出来るみたいだった。

ここを参考にcssをいじっていったら特に苦労することなく作れた。

CSS3 の display:box; を使ったフレキシブルな段組みレイアウト | TM Life

作ってみていまいちだなと思ったところが、イメージ的には要素を作成したときにboxの背景色を変えたかったので $(div).ready() で書けば動くのかなと思ったらまったくもって動かなかったので、仕方なくカスタムイベント作ってtriggerで起動してからappendするみたいなことになった。
あと、マトリックスを上下の中央に持ってきたかったんだけど、これが意外とめんどくさいみたいでいろいろ試してみたけどいまいちうまくいかなかったのであきらめた。
たぶんもっといいやりかたあると思うんだけどこれがいまの力量なので仕方ないと受け止めることにした。

あとはだいたい思うようにできたので、ここから作りたいものへ向けて近づけていきたい。