【html】リンクからpdfやwordなどのファイルを開く方法

「aタグでhtmlにリンクする方法はわかったけどpdfにはどうやってリンクするの？」

リンクからpdfやwordなどのファイルを開く方法を解説します。

【結論】aタグからファイル名を指定する

aタグはリンクを設定するhtmlタグです。下記のように記述します。

<a href="index.html">トップページ</a>

aタグの使い方がわからない方は下記をご覧ください。

普段はhtmlファイルにリンクさせてページ遷移として使うことが多いでしょう。

pdfやword、エクセルでも同じです。

まずファイルを任意のフォルダに置きます。

htmlファイルとは別のフォルダにまとめると管理が楽です。

それからaタグの""内にパスと拡張子を含めたファイル名を記述します。

例）一つ上のフォルダにある「pdf」フォルダ内の「data.pdf」にリンクさせる場合

<a href="../pdf/data.pdf">データ</a>

例）wordファイル

<a href="../pdf/data.docx">ワード</a>

例）エクセルファイル

<a href="../pdf/data.xlsx">エクセル</a>

注意

拡張子

PDFの拡張子はそのまま「.pdf」ですが、wordは「.word」ではなく「.docx」です。古いデータなら「.doc」です。

同様にエクセルも「.xlsx」、古いデータなら「.xls」です。

そのファイルについている名前と拡張子ごと指定しましょう。

フォルダごと送る場合や一般的ではない（ブラウザで扱えない）拡張子の場合はzipファイルにしてリンクさせるといいでしょう。

開き方

PDFを開くソフトはブラウザやOSに標準装備されているため、PDFはクリックした時点で開くことができます。

wordやエクセル、zipなどそれ以外のファイルはユーザーのパソコンへダウンロードすることになります。

ダウンロード後、ユーザーがそのファイルを任意で開くことになります。

ソフト依存

wordやエクセルファイルはwordやエクセルソフトをインストールしていないと開くことができません。

ユーザーがソフトをもっていないことを考慮してPDFも（あるいはPDFだけ）掲載することをおすすめします。

実際に開いて確認する

aタグにリンクさせて、アップロードし、公開（またはプレビュー）したあとは必ずリンクをクリックして確認しましょう。

特にPDFはブラウザで確認したら思っていたものと違う表示になることがあります。

しっかり確認しましょう。

テキストはわかりやすく

ファイルに限ったことではありませんが、リンクになるテキストはリンク先がなんなのかわかるものにしましょう。

ユーザーはよくわからないものをクリックしたがりません。「データ」だけかかれても何のデータかわかりませんね。

<a href="../pdf/data.pdf">データ</a>

具体的なタイトルを記載しましょう。ファイルタイトルと一致させるといいでしょう。

<a href="../pdf/data.pdf">令和○年度収支決算書</a>

「target="_blank"」の有無

aタグに「target="_blank"」をつけると別タブで開きます。

まず、エクセルやwordなど、PDFファイル以外のファイルをリンクさせる場合は不要です。

「target="_blank"」をつけても一瞬別タブが開いた後に閉じられるか、真っ白な別タブが残るだけです。

次にPDFファイルに「target="_blank"」をつけるかどうかですが、これは賛否両論あります。

賛成派の意見としては「PDFがブラウザ上で開いた場合、戻るリンクがないため、タブを閉じられた時に元のページへ戻れるようにするため」というものです。

反対派の意見としては「別タブで開くかどうかはユーザーが決めるものであり、強制するものではない」という考えです。

はっきり言って、どっちでもいいです。

私自身は昔はPDFファイルに必ず「target="_blank"」をつけていましたが、反対意見を知ってからは「target="_blank"」をつける手間を省くようになりました。

【まとめ】ファイルを開く方法

aタグの""内にパスと拡張子を含めたファイル名を記述する。

<a href="../pdf/data.pdf">データ</a>

<a href="../pdf/data.docx">ワード</a>

<a href="../pdf/data.xlsx">エクセル</a>

以上、リンクからpdfやwordなどのファイルを開く方法でした。