簡単なダウンロードリンク ダウンロードはこちらから (PDF:700KB) <a href="path/to/PDF_file.pdf" download="PDF_file.pdf"> ダウンロードはこちらから <img src="path/to/images/Adobe_PDF_file_icon_32x32.png"> (PDF:700KB) </a>Copymarkup
こちらからリーフレットをダウンロード (PDF: 700kB) <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <a href="/assets/images/acrobat/sampleA4-compress.pdf" download="sampleA4-compress.pdf"> <div class="PDFdl"> <p><img src="/assets/images/acrobat/sampleA4.png" alt=""></p> <p>こちらからリーフレットをダウンロード (PDF: 700kB)</p> <p><i class="bx bxs-download bx-fade-down"></i></p> </div> </a>Copymarkup .bxs-download { font-size: 5rem; } .PDFdl { width: 80%; margin: 2rem auto; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,0,.05); border: 1px solid #ee7836; } .PDFdl img { width: 150px; height: auto; padding: 0; } .PDFdl p:nth-child(2) { text-align: left; padding: 1rem; } .PDFdl p:nth-child(3) { width: 100px; text-align: center; } @media screen and (max-width: 767.9px) { .PDFdl { width: 98%; } .PDFdl p:nth-child(3) { display: none; } }Copycss