Step By Work

大阪のホームページ制作会社

bx-sliderを使っているページを印刷するときに横にはみ出したり文字が被ったりする

Date: 2017.09.09
Update: 2023.08.06

執筆・監修

上杉 洋 Hiroshi Uesugi

1991年生まれ。 株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

目次(読みたい所をクリック!!)

問題

bx-sliderを使ってタブを実装しているページを印刷する時に画像が横にはみ出したり、タブ部分の終わりの部分と、タブの下にある要素が被ってしまったりする

原因

①縦にずれる原因

bx-sliderではページ読み込み時にタブのラッパー要素の高さを設定するが、印刷画面では高さの再設定はされない。
大体Webページより印刷画面の方が狭いので、コンテンツ部分が狭まってその分縦に伸びた要素分、印刷時にずれる。

また、印刷画面ではimg要素が切れないように改行されるので余計な空白がでてしまうことがあり、その分もずれる。

②横にずれる原因

そもそもレスポンシブサイトでない場合ははみ出る。

レスポンシブサイトでかつ、ブラウザサイズに応じてコンテンツ部分が拡縮するように作っている場合は印刷画面の横幅がブラウザサイズとして認識されコンテンツが収まるような形で印刷される。

その場合、横幅は%やブラウザサイズ以下の横幅で指定していることが多いと思うが、bx-sliderではページ読み込み時にラッパー要素に横幅を設定するので、印刷画面ではずれる原因となる。

解決

印刷画面でCSSを設定するために以下の記述を追加する。

@media print{
	.bx-viewport {
		height: auto !important;	
	}
	.tab_item {
		width: 100% !important;
		position: relative !important;
	}
}

※それぞれの環境によって変更してください。
※フェードモードじゃないと無理かも

この記事へのコメント 0件