レスポンシブで要素をはみ出させない工夫 第二弾

第一弾はえっとねー、table(表)などの width指定 のことでした。
今回は absolute という配置についてです。




position: absolute;
というCSSの位置指定があります。
これは 絶対配置 と呼ばれ、親を基準として、自身の位置をどこにするか を決めるものです。
基準があるのなら「相対」なのでは?
と、第一弾をお読み頂いた方はそう思われるかもしれません。
この「絶対」という意味は

親以外の他の要素がどうであろうと、自身の位置は影響を受けない

という点で「絶対」です。
通常の配置というのは、他要素と重なったりしないよう、それを避けて自身の位置取りをしますが、
absolute要素というのは重なろうが知ったこっちゃありません。
お前がそこに居るのが悪い、ぐらいの。

サンプルはこちらです ↓

● 通常の配置

static
static


position: static;
というのは、全ての要素の配置のデフォルト値(初期値)です。
初期値ですので通常は書きません(勝手にそうなるから)
何も書いていなければ、その要素の配置は static です。


● absolute を追加

relative
absolute
static



重なってますよね。
重なって「しまった」という表現ではありません。
故意にやっていますので何かしらのミスでそうなったわけでなく、意図的に「重ねた」わけです。
紫の丸いボックスは position: absolute; です。
赤いボックスは position: static; から position: relative; に変更になっています。
relative は親要素である証、absolute は relative の子要素である証 です。
親要素(基準)にしたい要素に position: relative; を指定し忘れると、absoluteは自動的にブラウザ画面全体を親と認識し、トンデモな位置に配置されますので注意。
absolute子要素は relative親要素の「左上」を基準として配置を行います。
サンプルの配置は以下の通り

.koyouso {
position: absolute;
top: 0;
left: 0;
}


親の左上を基準とし、上は移動 0、左も移動 0 という指定です。
つまり親要素と子要素の左角が一致している状態です。
(紫は丸いのでわかりにくいですが)

親のすぐ下に staticの緑ボックスがあり、赤と紫の親子とは全く無関係です。
無関係なのに紫absoluteがそちらに影響を及ぼしています(重なって鬱陶しい)
他要素を考慮しないのがabsoluteの最大の特徴ですから仕方がない。

absoluteの位置を移動してみます。
サンプル②

relative
absolute
static



.koyouso {
position: absolute;
top: -20px;
left: -20px;
}


親要素に対し上辺を -20px (上に移動します)
左辺を -20px (左に移動します)
と指定した配置が上記サンプルです。

サンプル②のような配置を行うと、画面 or 記事幅からのはみ出しが起こります

サンプルはセンタリングしていますのでわかりづらいですが、
親要素の左辺が記事内で左寄せになっていた場合。
つまり親の左辺と記事の左辺が同じ位置にある場合。
そこから「左に●●px移動」ということをさせてしまえばはみ出しますわねぇ (´・ω・`)
absoluteは記事の幅の制約なども全て無視しますので当然です。
以下はスクショです。

パソコンでの様子 (青い点線が記事の左辺です)




スマホでの様子




この状態にある場合、bodyなどに overflow: hidden; の指定が無ければ、
はみ出した部位が全体を押し拡げ、パソコン・スマホ共に横スクロールバーが出た状態になります。
(パソコンでは余幅が大きいので出ない場合が多いですが、見た目にわからないだけではみ出しは起きています)
これは部分的なスクロールバーではなくページ全体の オーバーフロー という状態です。
スマホでは画面が左右に振られます。
つまりモバイルフレンドリーとして認めてもらえません。


結構知らず知らず使ってる方多いですよ (´・ω・`)
どんな時か
CSSによる見だしデザインなどを採用したとき
見だしデザインのCSS指南をしてくれているサイトってたくさんありますよね。
「コピペでできる」みたいな謳い文句が多いと思います。
そしてその中にはこういった absolute で配置するものがとっても多いんです。
っちゅーか、イケてる見だしデザインには大抵 absolute が用いられてます。

実際に掲載してみた時に、absolute子要素の左右辺と記事の左右辺との位置関係が揃っているかどうか

は確認した方が良いですね。
もちろん記事の中央に向かって移動している場合は問題ありませんが、記事の「外」へ向けての移動は危険です。
外方向への移動は top, right, bottom, left の値に ネガティブ値 (マイナス数値) ですので、ソース内からすぐに探し出せると思います。
今回は「左右」のはみ出しについてですので、right, left のネガテイブが対象です。


対処法は至って簡単です。
親要素の基準辺を予め右にあるいは左に逃しておくことです。
サンプルの場合には親要素の左側を、子要素がはみ出す差分をmarginを利用して削っておきます。
親要素を右にズラすのではなく、親要素の左側を削っておきます。
以下が実物です。


relative
absolute



<div style="margin-left: 20px; background-color: red; width: 200px; color: white; padding: 10px; text-align: center; position: relative;">relative
<div style="background-color: purple; width: 80px; height: 80px; border-radius: 50%; color: white; text-align: center; position: absolute; top: -20px; left: -20px; line-height: 80px;">absolute</div>
</div>



ズラしデザインは踏襲し、かつ記事内に収まっています。
親要素に margin-left: 20px; を指定して、absoluteがはみ出す左側の20pxを用意しておく。
赤い親要素の左側に20px分の空白があり、その左辺を基準に子要素が左へ20px移動するわけですから、記事幅にきちんと収まりますよね。
これでデザインの体裁も取れ、はみ出しも防げます。

ちょっとした工夫、というか事前処理というか。
難しいことではありませんので、アレ?と思った際には参照して頂ければと思います。
関連記事

Comments 2

-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/03/26 (Sun) 15:11 | EDIT | REPLY |   
Akira  
To ビックラポンの件 内緒さん

iPhone水没しちゃったーん (´・ω・`)
只今米びつの中で療養中

カスタマイズは気が乗らない時は何してもなかなか進みませんので、その気になった時にやれば良いと思います(笑)
こちらこそいつもありがとうございます (●'0'●)/

2017/03/27 (Mon) 20:56 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い