レスポンシブで要素をはみ出させない工夫 第二弾【原因 絶対配置】

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

レスポンシブデザインで要素がはみ出す原因はwidth指定

レスポンシブデザインで要素がはみ出す原因はwidth指定

せっかくレスポンシブデザインを選んでも 要素がはみ出しては台無しです。 これは見た目や使い勝手の問題も大きいですが、Googleセンセがはみ出し大嫌いです。その理由だって結局のところ「ユーザビリティ」の問題ですけども。 レスポンシブテンプレートを選んだのだから、モバイルフレンドリーだね ♪ と思ったら大間違いです。テンプレート製作者の手の届かない領域「記事内容」までしっかり管理しましょう。...

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

知らずとabsoluteを利用しているパターン

結構知らず知らず使ってる方多いですよ (´・ω・`)
どんな時か 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移動するわけですから、記事幅にきちんと収まりますよね。これでデザインの体裁も取れ、はみ出しも防げます。

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

-
2017/03/26 (Sun) 15:11

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/03/27 (Mon) 20:56

To ビックラポンの件 内緒さん

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

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

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)