HTML/CSSで16:9スライドを作る｜印刷・文字崩れを確認

Webの勉強でHTMLとCSSに触れたら、次は1枚のスライドを自分で組んでみませんか。画面を16:9に保つことと、文字を読める状態にすることは別の課題です。架空の学習ログを題材に、保存から表示・印刷まで確認できる小さな練習を紹介します。

HTMLスライドは何ができる？

Webページと同じく、HTMLで「見出し・説明・枠組み」を作り、CSSで色や位置を指定します。ブラウザで表示でき、HTMLファイルの文字や装飾も自分で編集できます。

今回は「今週のHTML練習回数」と「作った練習ページ数」を載せた架空の学習ログを作ります。数字は説明用のサンプルで、誰かの学習実績ではありません。画像素材やAI自動作成サービスは必要ありません。

確認したいこと	使う仕組み	確認方法
横長の16:9枠	CSSの`aspect-ratio`	枠の幅と高さを測る
狭い画面でも読める	`clamp()`とメディアクエリ	ブラウザの幅を変更する
印刷時の余白・向き	`@media print`と`@page`	印刷プレビューを見る

手順1：HTMLファイルを作って表示する

テキストエディターで`learning-slide.html`というファイルを作成し、以下をすべて保存してください。保存したファイルをブラウザで開けば、追加の開発環境を入れなくても表示できます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>学習ログのスライド練習</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      padding: 24px;
      display: grid;
      place-items: center;
      background: #e9eef3;
      font-family: system-ui, sans-serif;
    }
    .slide {
      width: min(960px, 100%);
      aspect-ratio: 16 / 9;
      padding: clamp(16px, 3vw, 42px);
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 14px;
      background: #fff;
      color: #20354a;
      border-radius: 14px;
    }
    h1 { margin: 0; font-size: clamp(18px, 3.2vw, 36px); }
    .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .card { border-radius: 10px; padding: 16px; background: #e9f4f4; }
    .card strong { display: block; font-size: clamp(20px, 3vw, 32px); }
    .card p, .note { margin: 8px 0 0; font-size: clamp(11px, 1.6vw, 16px); }
    @media (max-width: 480px) {
      body { padding: 8px; }
      .slide { padding: 12px; gap: 8px; border-radius: 6px; }
      .cards { gap: 6px; }
      .card { padding: 8px; }
      .card p { margin-top: 3px; }
      h1 { font-size: 16px; }
      .note { font-size: 10px; margin-top: 0; }
    }
    @page { size: A4 landscape; margin: 10mm; }
    @media print {
      body { min-height: auto; display: block; padding: 0; background: #fff; }
      .slide { width: 100%; border-radius: 0; }
    }
  </style>
</head>
<body>
  <main class="slide" aria-label="学習ログのサンプルスライド">
    <h1>今週の学習ログ（架空の数値）</h1>
    <div class="cards">
      <section class="card">
        <strong>3回</strong>
        <p>HTMLの練習回数</p>
      </section>
      <section class="card">
        <strong>2ページ</strong>
        <p>作成した練習ページ</p>
      </section>
    </div>
    <p class="note">次はフォームのレイアウトを練習する</p>
  </main>
</body>
</html>

`<main class="slide">`がスライド全体、`<section class="card">`が各数値の枠です。タグの`class`名をCSSの`.slide`や`.card`と一致させると、指定した見た目になります。

画面を開いたら、「3回」「2ページ」の2枚のカードが見えるか確認してください。表示されなければ拡張子が`.txt`になっていないか、HTMLタグの閉じ忘れがないかを調べます。

手順2：16:9を保ちながら文字を収める

`width: min(960px, 100%)`は、広い画面では最大960ピクセル、狭い画面では親要素の幅に合わせる指定です。`aspect-ratio: 16 / 9`は、枠の優先的な縦横比を示します。

比率が指定されても、中身が自動で縮むわけではありません。 長文をカードへ追加すると、画面幅によって枠からはみ出したり、枠が伸びたりすることがあります。スマートフォン程度まで画面を狭め、実際に文字が読めるかを確認してください。

ブラウザの開発者ツールのConsoleで、次のコードを試すと大きさの目安を確認できます。これはページを変更せず、枠のサイズを読むだけのコードです。

const box = document.querySelector(".slide");
const size = box.getBoundingClientRect();
console.log({
  width: Math.round(size.width),
  height: Math.round(size.height),
  ratio: (size.width / size.height).toFixed(2),
  fits: box.scrollHeight <= box.clientHeight
});

16 ÷ 9 は約1.78です。`ratio`が大きく変わるなら、最小高さ、余白、カード内部の長文などを調べます。`fits`が`true`でも文字の重なりや読みにくさがないとは限らないため、目視確認も続けます。

手順3：印刷プレビューを確認する

コード末尾の`@page`は印刷用紙の向きと余白を指定し、`@media print`は画面表示と印刷時のスタイルを切り分けます。ブラウザで印刷プレビューを開き、用紙の向きが横になっているか、余分な白紙ができないか確認してください。

A4用紙の縦横比は16:9と同じではありません。スライドを用紙いっぱいにしても同じ比率になるわけではないため、余白が出ることがあります。背景色の印刷可否もブラウザの設定によって変わります。

色の薄いカードが白くなる場合は、印刷ダイアログの「背景のグラフィック」などの設定を確認します。紙から文字が切れる場合は、内側の余白や文字サイズを見直してください。

（CSSの印刷スタイルについては『MDN：Printing』をご参照ください）

よくあるつまずきと直し方

症状	まず確認する点
横幅が狭いと文字が重なる	`.card`の文字数、内側の余白、見出しのフォントサイズ
枠が16:9にならない	`height`を固定していないか、中身の最小サイズが高すぎないか
印刷で色が見えない	印刷プレビューの背景印刷設定
余分な2ページ目が出る	用紙設定と`@page`の余白、本文要素の高さ