PDFファイルをダウンロードさせるリンク
簡単なダウンロードリンク
<a href="path/to/PDF_file.pdf" download="PDF_file.pdf">
ダウンロードはこちらから
<img src="path/to/images/Adobe_PDF_file_icon_32x32.png"> (PDF:624KB)
</a>
整形したダウンロードリンク
- こちらからリーフレットを
ダウンロード(PDF : 624kB)※PC : 閲覧のみはリンクを右クリック。
※スマホ : リンクを長押し。
<div class="pdfbox">
<ul>
<li><a href="Path/to/images/PDF_file.pdf" download="PDF_file.pdf"><div> </div></a></li>
<li><a href="Path/to/images/PDF_file.pdf" download="PDF_file.pdf">
<span>こちらからリーフレットを<br class="spOnly">ダウンロード</span>(PDF : 624kB)</a>
<p>※PC : 閲覧のみはリンクを右クリック。<br>※スマホ : リンクを長押し。</p></li>
</ul>
</div>
.pdfbox {
width: 90%;
min-width: 70rem;
margin: 3rem auto 2rem;
padding: 0;
background-color: #fffdea;
border: 2px solid #ee7836;
line-height: 1.8;
}
.pdfbox ul {
width: 100%;
margin: 0;
padding: 0;
display: flex;
}
.pdfbox li:nth-child(1) {
width: 30%;
overflow: hidden;
background: url("/Path/to/sample.png") no-repeat center center / cover;
}
.pdfbox li:nth-child(1) div {
width: 100%;
height: 100%;
}
.pdfbox li:nth-child(2) {
width: 70%;
text-align: center;
padding: .5rem 1rem 2rem;
}
.pdfbox li:nth-child(2) span {
font-size: 1.8rem;
font-weight:bold;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.pdfbox {
width: 95vw;
margin: 2rem auto;
line-height: 1.4;
}
.pdfbox ul {
width: 100%;
}
.pdfbox li:nth-child(2) {
width: 70vw;
text-align: left;
}
.pdfbox span {
display:block;
font-size: 3vw;
}
}
@media screen and (max-width: 480px) {
.pdfbox span{
display:block;
}
}