HTML スライドの全体像：作る・直す・PDF にする・発表する

HTML スライドとは

中身はふつうの Web ページと同じで、文字や図は HTML、色や配置は CSS で書く。違うのは、ページを 1 枚ずつのスライドに区切っていることだ。よくある形は、1 枚を 1 つの <section> にして並べ、CSS で幅と高さ（たとえば 1280×720px）を決めるもの。スライドを送る仕組みを JavaScript で足したものもあれば、縦に並べただけのものもある。

1 つの HTML ファイルにまとめれば、ブラウザがある端末ならどこでも同じ見た目で開ける。専用のアプリも、ファイルを読み込むサービスも要らない。

PowerPoint や Google スライドとの違い

HTML スライドの弱点は、作ったあとの手直しと印刷にある。AI が作った資料の大半はそのまま使えるのに、最後の数か所を直すために HTML を読まなければならない。このページの後半は、その 2 つをどう越えるかの話になる。

作り方は 3 つ

AI に作らせる

いちばん手軽なのは、Claude や ChatGPT に内容を伝えて「HTML でスライドを作って」と頼む方法だ。数十秒で、配色や図まで整った資料が返ってくる。ただ、頼み方によって、あとから直しやすいか、PDF にしやすいかが大きく変わる。1 つのファイルにまとめる、1 枚を 1 つの section にする、大きさを固定する、文字を画像にしない——といった条件を先に伝えておくと、仕上げが楽になる。条件の理由とそのまま使える頼み方の例は、あとで直しやすい HTML スライドを AI に作らせるコツにまとめた。

手で書く

HTML と CSS が書けるなら、自分で書くこともできる。いちばん小さな形は、次のようにスライドの数だけ <section class="slide"> を並べ、CSS で大きさを決めるだけだ。この形のままブラウザで開けば、スライドが縦に並んで見える。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>発表資料</title>
  <style>
    body { margin: 0; background: #e5e5e5; font-family: sans-serif; }
    .slide {
      width: 1280px;
      height: 720px;
      margin: 24px auto;
      padding: 64px;
      box-sizing: border-box;
      background: #fff;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <section class="slide">
    <h1>発表のタイトル</h1>
    <p>名前・日付</p>
  </section>
  <section class="slide">
    <h2>2 枚目の見出し</h2>
    <ul>
      <li>言いたいこと 1</li>
      <li>言いたいこと 2</li>
    </ul>
  </section>
</body>
</html>

スライドを 1 枚ずつ送る仕組みや、印刷で 1 枚 1 ページにする指定は、この上に足していく。送りは後で触れる発表用の書き出しで足せるし、印刷用の CSS の書き方はPDF にする方法の最後の節に例がある。

スライド用の道具を使う

HTML のスライドを作るための道具もある。代表的なものを 3 つ挙げる。

• reveal.js: HTML の <section> を 1 枚のスライドとして扱うライブラリ。キー操作での送り、発表者ノート、配色と字体を揃えたテーマが付いている。
• Marp: Markdown で書いた文章を、スライドの HTML・PDF・PowerPoint に変換する道具。
• Slidev: Markdown に Vue の部品を混ぜて書ける、開発者向けのスライドの道具。

Marp や Slidev のように Markdown が元になっている場合は、書き出した HTML ではなく元の Markdown を直す。HTML の側を直すと、次に Markdown から作り直したときにその直しが消える。

テンプレートから始めたいとき

reveal.js には、配色と字体を揃えたテーマが同梱されている。chamfer にはテンプレートの集まりは（今のところ）無い。代わりに、AI への頼み方を 1 つ決めておき、内容の欄だけを書き換えて使い回すと、毎回同じ形のスライドが手に入る。そのまま使える頼み方の例は、その出発点にできる。

できあがったスライドを直す

AI が作ったスライドは、言い回しが 1 か所だけ気になる、見出しが 2 行に折れている、仮の画像を差し替えたい、といった小さな手直しが残りやすい。直し方は 3 つあり、向いている直しが違う。

• AI に頼み直す: 構成を変える・ページを足すなど、大きな変更に向く。頼んでいない場所まで変わることがある
• HTML を手で書き換える: 場所の分かっている値を 1 つ変えるのに向く。タグと CSS を読める必要がある
• 見た目のまま直せるエディタを使う: 文字・位置・大きさ・色・画像の仕上げに向く

3 つ目に使えるのが、AI が作った HTML をそのまま開いて直し、同じ HTML のまま書き出すchamfer（ブラウザで動く無料のエディタ）だ。文字はクリックしてその場で書き換え、要素はドラッグで動かし、画像は手元のファイルに差し替えられる。直していない部分は元のまま残る。3 つの比べ方と、chamfer で直す手順はAI で作った HTML スライドを、作り直さずに直す方法に画面つきで書いた。

PDF にする

提出や配布で PDF が要るとき、ブラウザの印刷からそのまま保存すると、スライドが用紙の途中で切れる、背景色が消える、横長のスライドが A4 縦に縮む、といったことが起きやすい。HTML には「ここまでが 1 枚」という決まりが無く、用紙の大きさも背景の印刷も、CSS で指定しない限りブラウザの既定に従うからだ。

直し方は 2 つ。印刷用の CSS（用紙の大きさ・スライドごとの改ページ・背景の印刷）を自分で足すか、chamfer の書き出しで「PDF として」を選ぶ。chamfer はスライドの実寸を読んで用紙をその大きさにし、1 スライド 1 ページでブラウザの印刷画面に渡す。理由と手順、うまくいかないときの直し方はHTML のスライドを 1 枚 1 ページの PDF にするにある。

発表する

HTML スライドで発表するやり方は、資料の作りによって 3 つに分かれる。

• スライドを送る仕組みを持つ資料（reveal.js など）は、その仕組みで発表する。ブラウザで開いて、矢印キーで送る。
• 送る仕組みが無く、スライドが縦に並んでいるだけの資料は、chamfer で開いてツールバーの「発表」を押すと、表示中のページから全画面で発表できる。← → か Space で送り、Esc で編集に戻る。
• ほかの PC で映すときや、相手に渡して発表してもらうときは、書き出しの「発表用スライドとして」で、開始画面とキー操作での送りを同梱した 1 枚の HTML にしておく。開くだけで発表でき、→・Space で進む、← で戻る、F で全画面、Esc で終了する。

要素が 1 つずつ現れるアニメーション（フェード・上下左右からのスライド・ズーム）も、chamfer で要素ごとに付けて順番を決められる。付けたアニメーションは、chamfer の発表でも、書き出した HTML でも、クリックや送りに合わせて順に再生される。

人に渡す

chamfer はログインしない限り、開いたファイルをブラウザの外に送らない。ログインすると、直している文書がクラウドに保存され、別の端末から開いたり、閲覧専用のリンクで人に見せたりできる。

どこから読むか

• これから AI にスライドを作らせる → あとで直しやすい HTML スライドを AI に作らせるコツ
• AI が作った HTML が手元にあって、少し直したい → AI で作った HTML スライドを、作り直さずに直す方法
• PDF にしたい → HTML のスライドを 1 枚 1 ページの PDF にする
• chamfer で何ができるかを先に知りたい → chamfer の案内（できること・使い方・ファイルの扱い）