たわごとの記～耽溺者の備忘録～: 地図のプリントアウト用HTML

10/14/2024

地図のプリントアウト用HTML

行先の住所や担当者名などのメモを地図と一緒にプリントアウトするためのHTMLなんて、方向音痴でないスマホ使いには誰得って記事だろうが、方向音痴・・・いや、方向感覚皆無のガラケー使いの自分には必須なのだ

１，GoogleMapなどを使って地図をスクショしてmap.jpgという名で保存

２，メモ帳に以下をコピペして、メモ〇行目にメモを書いたら、拡張子を.htmlにしてmap.jpgと同じフォルダに保存

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地図とメモ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .print-info {
            margin-top: 20px;
            font-size: 18px;
        }
        @media print {
            .container {
                page-break-after: always;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <img src="map.jpg" alt="Map">
    <div class="print-info">
        <p>メモ1行目</p>
        <p>メモ2行目</p>
        <p>メモ3行目</p>
    </div>
</div>

<script>
    window.onload = function() {
        window.print();
    };
</script>

</body>
</html>

保存したhtmlファイルをブラウザで開くとこんな感じで[印刷]ボタンでプリントアウト

※文字コードはUTF-8にするコト

0 件のコメント:

コメントを投稿