【CSS】fixedで固定した要素は、印刷用CSSで調整すると親切です

ウェブサイトに、でっかいバナーや問い合わせボタンなどをposition: fixedで画面に常時表示しているケースってよくあります。

しかし、実はfixedで固定された要素って、印刷すると「全ページ」に印刷されちゃいます。

その結果、ページごとに同じボタンが何度も印刷され、本文に被って内容が読めなくなったり、ユーザーにとって不利益が多いです。というか単純に邪魔。。

印刷専用CSSで微調整

そんな時は、印刷専用のCSS@media printを使って、表示を調整してあげると親切です。

/* 例：要素を非表示に */
@media print {
    .fixed-button {
        display: none;
    }
}

例えばこんな感じで@media print {}の中で、不要な要素を非表示にしたり、レイアウト自体を調整をすることができます。

「どこまでやるか問題」はあるけれど

もちろん、印刷時の見た目をどこまで考慮するかは、プロジェクトやクライアントの要件次第です。

僕の場合、特に指定がなければ、基本的にはサイト用に書いたコードの結果をそのまま受け入れてもらっています。

ただし「最低限」の配慮として、固定表示の解除だけは標準で提供している次第。

例えば以下のような簡単な対応でも十分効果があります。

/* 例：固定表示の解除 */
@media print {
    .fixed-button {
        position: relative;
    }
}

この程度なら開発側の負担も少ないので、「標準対応」として提供しやすい範囲です。

線引きはしっかりと

ただし、印刷用CSSは細かくやり始めるとキリがありません。

ブラウザやデバイス、そしてユーザーの設定ごとにも印刷結果は異なるため、印刷時の細かなレイアウト調整は想像以上に難しいのが実情です。

たま～～に「印刷した時のレイアウトも完璧にしろ」といった無茶な要望をもらうことがありますが、何でも引き受けてしまうと収拾がつかなくなるので注意が必要です。

結局のところ、「ウェブ」と「紙」は別物。

印刷機能は、あくまでメモ用途の“おまけ”くらいに捉え、ある程度のラインで「ここまでが対応範囲です」としっかり線引きしておくのが大切だと考えています。どうしても専用の調整が必要ならば、しっかりと仕様の策定と予算の確保が必要です。

ユーザー側も、どうしても完璧なレイアウトで印刷したい場合は、画面をキャプチャして画像にしてから印刷したほうが、どう考えても一番確実です。

まとめ

以上、固定表示の要素は印刷用CSSで一手間かけると親切ですよというお話でした。

ほんの少しの配慮ですが、ユーザー体験はグッと良くなります。そういった視点も大事にしていきたいです。