幅制限のある親要素を突き抜けてブラウザ全幅表示するcss

HTML/CSS

(※ 当ページは社内技術資料としての位置付けですので読みにくいこともあるかもしれませんが、一般の方の課題解決に役立てれば幸いです。)

現象

スマホではコンテンツが両サイド(表示可能領域の全幅)に接していると、その先にコンテンツが存在する(見切れている)のではないかと混乱を招くことが想定されるので、両サイドにスペースを設けるために全体をラッピングする親要素を設けることがあります。
しかし、画像要素など見切れている(可能性がある)ことが問題にならない要素は全幅表示したいことがあります。

左右に余白を設けたレイアウト

あいうえお

【HTML】

【css】

対策

このようなケースでは親要素の幅制限を突き抜ける制御で解決できます。

基本的な考え方としては、ブラウザ可視範囲の半分から対象要素の半分を差し引いた範囲、要するに左右の余白部分を、マイナスマージンに割り当てることで、強制的に拡張してしまうというけっこう乱暴な制御です。

方法

拡張したい要素の親要素に、強制拡張用の制御「.spFull」を割り当てます。

あいうえお

【HTML】

【css】

問題点

(※ ここで指摘している現象はPCブラウザでのものです。スマホにはあてはまりません。)

拡張した要素の左端(あいうえおの「あ」)が見切れているのがわかります。

原因はブラウザ幅を示す「vw」にはスクロールバーの幅が含まれるからです。

左右端が見切れても問題ない場合(例えば文字列中央寄せ)は、ブラウザ可視範囲と同等の親要素(最上位はbody)に「overflow-x: hidden;」を割り当ててください(このページではXスクロールバーを表示させています)。

きっちり見切れないようにしたい場合は、以下のようにしてください。

あいうえお

【HTML】

【css】

「17px」はスクロールバーの幅です。幅はブラウザ可視領域幅から17pxを差し引き、左右のマージンはその半分ずつの8.5pxを加算(マイナスマージンですので物理的には差し引く)する制御を追加しました。
17pxはブラウザによって微妙に異なるようです。PC版Chrome(Edge)、Firefoxでは正常動作を確認済みです。

スマホのブラウザを含めスクロールバーの幅に対する微妙な制御は、cssだけでは無理なようですので、jQueryとの併用で制御してください。

結果

スマホのための両サイドスペース要素があっても、両サイドぴったりデザインをhtml構造を変更することなく手軽に対応可能となります。

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

関連記事一覧