2013年5月2日 CSS「position: absolute;」だと再生する画面の大きさによってオブジェクトが重なる問題

今回のコラムは全く面白くありません。まあ普段から全く面白くないのですが今回は輪をかけてつまらないと思います。

webサイト作成の技術的な内容をメモしていたら折角なのでコラムにしてしまおうかなと思った次第で御座います。

私三浦webサイト作成技術に関して、自社のサイトは三浦が作成しましたが完全な素人で御座います。

その為作成しながら新しい事を学んでいく事が常で御座います。

今回新しい事を発見しまして、三浦の作成パターンではとても重要で今後も多数利用する記述なので忘れないようにここに残しておこうと思います。

現在ドールハウスサイトのスマートフォン版とiPhone版のINDEXページ(最初の年齢認証ページ)にコスプレ風俗愛好会というランキングサイトのバナーを設置しました。

しかし今までのCSS構造ですと下の画のようにバナーとキャラの台詞がご覧になるスマートフォンの機種や解像度、設定した文字の大きさによって重なってしまう事が発覚しました。

今までのCSS構造というのはキャラと背景の画像と台詞の両divを「position: absolute;」プロパティで重ねそれを親divで囲いそれに高さの値を指定してバナーdivの位置を決めていました。下図のようなイメージです。

スマートフォンiPhoneの解像度は機種によって全て別々になっていると言っても過言ではないくらい様々です。そしてユーザーそれぞれが設定した文字の大きさも様々です。その為絶対値による位置決めはそのオブジェクト内に文字がある場合デザインが大きく狂ってしまう場合があります。

台詞の文字終了位置から大体画面上で1cmくらい空けた辺りからバナーが始まるデザインがどの機種で見てもそのように表示されればベストな訳です。

そこで今まで何気なく使っていたポジションプロパティですが再度勉強しなおす必要が出てきました。ネットで検索するとプロフェッショナルな方々がブログなどに大変参考になる記事を残して下さっていました。

まず、「position: absolute;」を指定すると指定されたオブジェクトは他のオブジェクトから独立し位置関係で一切の干渉を受けず親要素の左上を始点として座標絶対値の位置に表示される、という事を知りました。多分今までもなんとなく感覚的にはわかっていたのかも知れませんがあくまでなんとなくでしかわかっていなかったので壁にぶつかるともう全く前に進めなくなっていました。

重要なのは他のオブジェクトの影響を受けないという事です。台詞divの文字の終点位置を自動で判別してその下からバナーが始まってくれれば良かったのですがその台詞divにも位置を決めるため「position: absolute;」が指定されています。その為バナーdivはそれを無視した位置に表示されてしまいます。

そこで下図のように「position: absolute;」を指定するのはキャラと背景divだけにして、台詞divから「position: absolute;」を外しマージンプロパティで位置を決めてみようと試してみました。

オブジェクト同士の重なりを表現するにはポジションプロパティが絶対条件らしく台詞divに「position:relative;」を設定しないと台詞divがキャラと背景の画像divの後に行ってしまいました。

これで何とか出来たようです。今回のコラムは全く面白くないと思います。

店長三浦のコラムです!

メニュー

メニュー