ボタンなどのposition:fixedのHTML要素をサイトの幅に合わせて表示する方法

サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。calc()によるposition:fixedの位置の算出

CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。position:fixedの振る舞いについて

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している perspective と filter に矛盾のあるブラウザーがあります。) 最終的な位置は top, right, bottom, left の値によって決定されます。

position｜MDN｜Mozilla

position:fixedの値の基準は一般的に「ビューポートによって定められた初期の包含ブロック」というブラウザのウィンドウを含めたデバイスの領域領域にある。だからそうした基準をコンテンツの表示領域というサイトの幅に修正しないかぎり、大画面ではサイトの幅よりももっと端の方に寄せられてしまうわけだ。コンテンツの範囲内の位置合わせためのの計算式position:fixedの位置決めの値に計算可能なcalc()関数を使うと値の基準を画面の端からサイトの端に変更することができる。calc(50% - コンテンツのサイズ / 2 + 表示したい位置)※top／right／bottom／leftの入力値として指定する長さに単位がないと「px」の単位で処理される。計算式の「50% - コンテンツのサイズ / 2」で基準を画面からサイトの大きさに変更して普通の入力値の「表示したい位置」をずらしてコンテンツ内に合わせる。考え方として値を「50%」で画面の真ん中へ持って行く（ビューポートの中央へ寄せて）。そこから「コンテンツのサイズ / 2」を引く（サイトの幅の半分だけ戻す）と当の基準がサイトの幅に置き換えられる。後は「表示したい位置」を足す（位置取りに必要な値を入力する）とコンテンツの端から表示される。サイトの端から表示位置までに何かある場合注意しなくてはならないのは例えばメインカラムとサイドバーが横に並んでいてメインカラムの端にボタンを固定するような場合は位置取りをさらにずらさなくてはならない。calc(50% - コンテンツのサイズ / 2 + 他のものの幅 + 表示したい位置)※top／right／bottom／leftの入力値として指定する長さに単位がないと「px」の単位で処理される。
※コンテンツのサイズは全てのカラムの幅の合計（他のものの幅と残りのものの幅）として算出できる。コンテンツの端から実際に表示したい位置が遠ければそれだけ入力値を加算する。すなわちサイドバーが挟まるならば基準変更の計算式で「他のものの幅」としてサイドバーの幅を足すとぴったりの位置が算出される。小画面で表示するためにはCSSを振り分けて使うもう一つ注意しなくてはならないのは大画面ではなくてサイトと画面の幅が一致しているときなんだ。

レスポンシブデザインでコンテンツのサイズがデバイスの画面よりも小さければ画面一杯に表示されるというサイトではposition:fixedの値の基準を変える必要はなくて通常のマークアップで構わない。変えると逆におかしな位置取りになってしまうので、大画面用の表示を行わないようにサイトの幅よりも大きな画面とそれ以外でposition:fixedのHTML要素のCSSを振り分けなくてはならない。大画面用の振り分けのソースコード@media screen and (min-width:コンテンツのサイズを越える長さ) { 大画面用のcalc()で調整した位置取りの記述 }※指定する長さには「px」や「em」などの単位を付ける。小画面用の振り分けのソースコード@media screen and (max-width:コンテンツのサイズを越えない長さ) { 小画面の通常の位置取りの記述 }※指定する長さには「px」や「em」などの単位を付けないと反映しない。メディアクエリ／@mediaを使ってデバイスの画面幅がコンテンツのサイズを越えるかどうかでサイトに適用するCSSを切り替えるとposition:fixedのボタンなどがサイトの幅からはみ出す場合とそうでない場合のどちらでもちゃんと表示されるようになる。

コメント