サイトのPDFがダウンロードされる｜開き方も印刷の見え方も、置く側が指定できる

梟〜GLEANINGS〜

2026年9月18日 14:48

自社サイトに製品カタログのPDFを置きました。
リンクを押すと、その場で開きます。

数日後、取引先から連絡が来ます。
押すとダウンロードされてしまうので見られない、という内容です。

同じリンクで、ファイルも同じです。
それでも、人によって動きが違います。

これは不具合ではありません。
その場で開かせるのか、保存させるのかは、置く側が指示できるようになっていて、指示が入っていないときだけ、受け取る側が決めます。

この記事では、自社サイトの出方のうち、置く側で決められるのに決めていないことを2つ扱います。
1つはPDFを開くか落とすか、もう1つは印刷したときの見え方です。

先に、調べていていちばん意外だったことを2つ書いておきます。

1つ目は、直す場所が2か所あることです。
サーバー側の指示とリンク側の印は別々にあって、条件によってはリンク側のほうが優先されます。
サーバーを直したのに変わらない、ということが起こります。

2つ目は、印刷用の見た目を別に書けることです。
紙にしたときだけ効く指定があり、画面のメニューを紙では消す、といったことができます。
書かなければ、画面用がそのまま紙に出ます。

この記事は、MDN Web Docs 日本語版の「Content-Disposition ヘッダー」と「印刷」の2ページをもとに、2026年9月時点の内容にしています。どちらのページにも、コミュニティーの尽力で英語から翻訳されたという注記が付いています。

開くか落とすかは、置く側が決められる

ファイルと一緒に、短い指示が付いている

ホームページのデータを届けるとき、ファイルそのものと一緒に、短い指示が付いています。
これをヘッダーと呼びます。

そのうちの1つに、開くか落とすかを決めるものがあります。

HTTP の Content-Disposition ヘッダーは、コンテンツがウェブページとしてブラウザー内にインラインで表示されることを求められているか、ウェブページの一部であるのか、ダウンロードしてローカルに保存する「添付ファイル」とするかを示します。

インラインというのは、その場で表示するという意味です。
添付ファイルというのは、保存するという意味です。

ここで押さえておきたいのは、これがファイルの中身とは別に付いてくるものだということです。
PDFそのものには、開いてほしいのか落としてほしいのかは書かれていません。
同じファイルを2か所に置いて、片方は開く、もう片方は落とす、という設定もできます。
だから「ファイルを作り直す」では直りません。

指示が入っていないと、受け取る側が決める

では、冒頭のように人によって動きが違うのはなぜか。

指示が入っていない場合と、入っていても受け取る側の設定が優先される場合があるためです。
PDFを自分のパソコンのソフトで開く設定にしている人と、ブラウザーの中で見る設定にしている人では、同じ指示を受け取っても、そのあとの動きが違います。

ここが厄介なのは、自分の画面で確かめても分からないことです。
確かめている本人の端末には、その人の設定が入っています。
社内で同じ機種を同じ設定で使っていれば、全員が同じように見えて、外の人だけが違う動きをします。
冒頭の連絡が取引先から来るのは、そのためです。

保存されたときのファイル名も、そのままとは限らない

同じ解説には、こういう記述もあります。

ブラウザーは、ファイルシステムの要件に適合させるために変換を適用する場合があります。例えば、パス区切り文字（/ および \）をアンダースコア (_) に変換するなどです。

保存するときのファイル名は指定できますが、受け取る側の都合で文字が置き換わることがある、ということです。

日付や記号を入れたファイル名にしている会社は、ここを一度確かめておくほうがいいです。
相手の手元では、意図しない形の名前で保存されている可能性があります。
そして相手は、それを見て問い合わせてくることはありません。
分かりにくい名前のまま、どこかに埋もれます。

直す場所は2か所ある

リンク側の印のほうが、優先されることがある

もう1つ、知っておくと話が早い記述があります。

Chrome および Firefox 82 以降では、HTML <a> 要素の download 属性が、Content-Disposition: inline 引数よりも優先されます（同一オリジン URL の場合）。

リンクそのものに、ダウンロードするという印を付けられます。
そしてその印のほうが、サーバー側の「表示してよい」という指示より優先される、と書かれています。
ただし、同じサイトの中のファイルに限る、という条件が付いています。

切り分けてから頼む

ここが実務に効きます。

サーバー側は表示に設定してあるのに落ちる、という場合は、リンク側に印が付いている可能性があります。
リンク側は何もしていないのに落ちる、という場合は、サーバー側の指定です。

直す場所が2か所あるので、どちらの話なのかを先に切り分けておくと、制作会社とのやりとりが1往復で済みます。
切り分けずに「落ちないようにしてください」とだけ伝えると、片方だけ直して現象が変わらない、ということが起きます。

そのPDFは、読むものか書き込むものか

どちらにすべきかは、相手が次に何をするかで決まります。

その場で開いてほしいものは、カタログ、価格表、会社案内です。
見てもらうことが目的で、保存するかどうかは相手に任せるものです。

落としてほしいものは、申込書、記入用の様式、大きな図面です。
相手が手元で作業するものです。

スマートフォンで見る人が多いなら、開くほうが親切です。
落としたファイルを探すのが面倒だからです。

どちらでもよい、という結論にはしないほうがいいです。
決めないということは、受け取る側の設定に任せるということで、それは冒頭の連絡が来る状態そのものです。

印刷の見え方も、別に指定できる

ここから、もう1つの話に移ります。

自社サイトの製品ページを、会議の資料として配ることになりました。
画面をそのまま印刷すると、右端が切れていて、メニューが1ページ目の半分を占めていて、肝心の表が2ページ目に押し出されています。

画面ではきれいで、紙にすると崩れます。

画面用と紙用は、別のスタイルを書ける

MDNの解説に、こう書かれています。

CSS の @media アットルールを使用すると、ウェブページを紙や PDF で印刷する場合と、画面に表示する場合とで、異なるスタイルを設定することができます。print メディア種別は、印刷メディアのスタイルを設定します。これらのスタイルは、印刷されるコンテンツにのみ使用されます。

CSSというのは、見た目を指定する仕組みのことです。
文字の大きさ、色、並び方などを、本文とは別のところに書いておきます。

印刷されるときだけ効く指定を書ける、というのがここでの要点です。
画面の上にある会社ロゴの帯、下の著作権表示、左のメニュー。
紙では要らないものを消せば、そのぶん中身が入ります。
冒頭の「メニューが半分を占めている」は、この指定が無い状態です。

用紙の大きさと向きも決められる

もう1つ、別の仕組みがあります。

@page アットルールを使用して、ページの寸法、向き、マージンなど、印刷ページのさまざまな側面を変更することもできます。

そして、適用する範囲も選べます。

@page アットルールは、印刷物のすべてのページ、または特定のサブセットのページをターゲットとして使用することができます。

横に長い表があるページなら、印刷のときだけ横向きにする、という指定ができます。
冒頭の「右端が切れる」は、これで直ることがあります。

一部のページだけを対象にできる、という点が実務では効きます。
全体を横向きにすると本文が読みにくくなるので、表のあるページだけ横にする、という組み方ができるからです。

印刷が始まったことを、ページ側は知れる

見た目の指定だけでなく、合図も用意されています。

ブラウザーは、印刷がいつ発生したかを判断するために、 beforeprint および afterprint イベントを送信します。これを使用して、印刷中に表示されるユーザーインターフェイスを調整することができます

画面では折りたたんである部分を印刷のときだけ全部開く、といったことができます。

逆に言えば、何もしなければ切り替わりません。
画面のためにした工夫が、そのまま紙の邪魔になります。
折りたたみ、読み込みながら出てくる一覧、横に流れる画像。
どれも画面では親切で、紙では中身が欠けます。

なぜ崩れたままになるのか

理由は単純で、印刷を確かめる工程が制作の中に入っていないからです。

サイトを作るとき、確認するのはパソコンの画面とスマートフォンの画面です。
この2つは必ず見ますが、紙は見ません。

そして頼む側も、印刷したときの見え方を仕様に書きません。
書かなければ、作る側は作りません。

ところが実際の業務では、紙にする場面がよくあります。
会議の資料、上司への説明、取引先への同封、社内の掲示。
自社サイトの1ページを印刷するというのは、珍しいことではありません。

使い方が想定に入っていないだけで、技術的に難しい話ではありません。

相手の画面でPDFの見た目が変わる話は、別の記事で扱っています。
https://note.com/yunta_fukurou/n/na513f7a363b8

制作会社に何と言うか

専門用語は使わなくてかまいません。

PDFについては、ファイル単位で伝えます。
このPDFは押したらその場で開くようにしてください、あるいはダウンロードされるようにしてください、という言い方で足ります。

そのうえで、リンク側とサーバー側のどちらで指定していますかと聞いておきます。
直す場所が2か所あるので、どちらでやっているかが分かれば、次は自分で直せます。

印刷については、まず印刷して使うページを挙げます。
全部ではなく、製品仕様、料金表、アクセス案内、問い合わせ様式。
この程度で足ります。
そのページについて、印刷用の指定を入れてくださいと仕様に1行書きます。

何を消すかも伝えておきます。
メニュー、広告枠、フッターのリンク集、共有ボタン。
紙で意味の無いものを挙げます。

確かめるときは、社内の別の端末とスマートフォンで試します。
そして印刷は、画面のプレビューではなく実際に紙に出します。
プレビューと実際の紙で、余白の扱いが違うことがあります。

なお、印刷の設定はブラウザー側にもあります。
背景の色を印刷するかどうか、拡大率、余白。
ページ側の指定だけで全部が決まるわけではないので、確かめるときは設定を変えないまま試します。

自分の画面で正しく見えることが確認にならない、という話は別の記事にもあります。
https://note.com/yunta_fukurou/n/n42a8fbd13b62

決めていないことは、相手が決めている

2つとも、同じ形をしています。

PDFを開くか落とすかは、置く側が指示できます。
印刷したときの見え方も、置く側が指定できます。
どちらも、指定しなければ相手の環境に任されます。

そして、どちらも自分の画面では正しく見えます。
自分の端末には自分の設定が入っていて、自分は紙に出さないからです。

決めていないという状態は、何も起きていないのではありません。
相手の側で、こちらの知らない決まり方をしています。

同じ「思ったとおりに出ない」でも、こちらでは決められないことがあります。
動画の自動再生と検索結果の見出しを、別の記事で扱っています。
https://note.com/yunta_fukurou/n/n2a3929dd9e07

まとめ

ファイルを開かせるか保存させるかは、Content-Disposition ヘッダーで置く側が指示できる。インラインが表示、添付ファイルが保存
指示が入っていない場合と、受け取る側の設定が優先される場合があるため、同じリンクでも人によって動きが変わる
保存時のファイル名は指定できるが、ブラウザーが「ファイルシステムの要件に適合させるために変換を適用する場合があります」と書かれている
直す場所は2か所ある。Chrome と Firefox 82 以降では、リンクの download 属性が Content-Disposition: inline より優先される（同一オリジンの場合）
読むだけのものは開く、書き込むものは落とす。ファイル単位で決めて、制作会社に伝える
印刷用の見た目は @media print で別に書ける。「これらのスタイルは、印刷されるコンテンツにのみ使用されます」
用紙の寸法、向き、余白は @page で決められる。すべてのページにも、一部のページにも適用できる
beforeprint と afterprint のイベントがあり、印刷中の表示を調整できる。何もしなければ切り替わらない
崩れたままになるのは、印刷を確かめる工程が制作に入っていないから。発注時に、印刷して使うページを挙げて1行書く
確かめるときは、社内の別の端末とスマートフォン、そして画面のプレビューではなく実際の紙で

皆さんの会社のサイトに置いてあるPDFは、押したときにどちらの動きをしているでしょうか。

参考・引用元

MDN Web Docs（日本語版）

Mozilla「Content-Disposition ヘッダー」（2026年9月時点。コミュニティーの尽力で英語から翻訳されたページ） https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Content-Disposition
Mozilla「印刷」（最終更新2026年1月26日。コミュニティーの尽力で英語から翻訳されたページ） https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Media_queries/Printing

実務で使う書式について

この連載の内容を、社内でそのまま使える書式にまとめたものを、別のマガジンで公開しています。規程のひな形、対応フロー、チェックシート、報告書式などです。

実務で使う書式・キット
https://note.com/yunta_fukurou/m/mfc25857fab40