一本の電話が。それは仕様変更をするという内容でした。今までアバターの配置は縦に並べていて、 下にスクロールすると違うアバターがいるなどゲーム要素的に縦重視でした。 しかし、ゲームの仕様が変わりアバターの配置も縦ではなく、横に並ぶといった真逆の仕様に変わってしまったのです。 なので急遽コメントの作業をやめ、画像の配置などを変えなければいけませんでした。画像の配置はアバターの位置を横の並べるだけで 、後は背景が縦画面仕様になっているので横仕様の画像ができたらそれを変更するような感じです。
画像を配置する際のコツとしましては、positionやmargin、paddingの使い方を理解することにあると思います。実際、勉強したてのころはfloatなどの使い方が今一理解 できておらず、画像を並べたいにもぐちゃぐちゃになってしまっていました。画像を並べ、位置の調節をしようと思い動かしてみると、他の物も 動いてしまい訳が分からなくなったりと。なのでpositionの使い方がある程度理解していれば画像を配置するのにも楽になるかと思います。
positionの値にはstatic,relative,absolute,fixedの４種類があります。良く使うのはrelativeとabsolute でしょう。まずrelativeは位置を基準にブロックを相対配置します。後続のブロックの配置はそのままです。 つまり、relativeは親ボックスに基準点を決め、そこからwidth、height、top、leftを指定してやります。 最初の基準点は大体左上の０、０地点から始まります。次にabsoluteは、位置の確定したいボックスには、width、height、top、left の４点セットで基準点からの距離を指定します。なのでabsoluteはrelativeの基準点からの絶対位置ということになります。 実際、言葉で理解するよりも何回もやって試すことが一番理解するコツだとは思います。
12月12日 宮本 勇