本日からソーシャルゲームを作るにあたって、どのようなゲームができるのかといった プレゼンテーション用のモックを作り始めることになりました。会社の先輩達含め６名で作ります。 自分は静的な表示などをおおまかに担当することになりました。
まず初めに、全体的な配置をするべくheaderとfooterを固定する作業を行いました。固定したところに
ステータスバーとメニューバーを配置する予定です。
固定というのは、スクロールしたときにheader部分とfooter部分の位置がくっついてくるような感じです。
やり方としましては、headerとfooterのdiv要素を作りid名をそれぞれ作ります。その作ったdiv要素の間になにかしらの文字を
縦に改行しながら並べていきます。これは固定されていることがはっきりわかるようにするためです。
header,footerの間にもう一つdiv要素を作ってあげ、id名は何でもいいのでその中に書いたほうがいいでしょう。
そのそれぞれ作ったid名に位置を固定するスタイルシートを書いてあげます。以下のような感じです。
#header{
position: fixed !important;
position: absolute;
top: 0;
bottom: 0;
}
footerにもこのような感じでつけてあげると固定されていると思います。
fixedというのはpositionで指定する際にabsoluteという物があったと思いますが、absoluteは絶対位置
の配置なのでそこに固定されてしまい、スクロールしても一緒に動いてくれません。そこで登場するのが
fixedです。
fixedはスクロールしても位置が固定されるという物です。これできちんと固定されるようになります。
次に、fixedの後ろに!importantというものが付いていると思うのですが、これはスタイルの優先順位をあげるといった
意味になります。後は幅や分かりやすいようにbackgroundで色を付け、これでheaderとfooterの固定は完了です。
12月7日 宮本 勇