HTML 📅 2026年5月2日 ⏱ 16分で読めます

HTMLとCSSでレポート・プレゼン資料を作る方法【学校課題対応】

HTMLとCSSで学校のレポートやプレゼン資料を作る方法を解説。コピペで使えるテンプレート付き。表の作り方や印刷用スタイルも紹介します。

2026年5月2日

学校のレポートや発表資料を、WordやPowerPointではなくHTMLで作ってみませんか？

HTMLでレポートを作ると、見た目がきれいに仕上がるだけでなく、プログラミングのスキルも同時に身につきます。情報Ⅰの授業で学んだ知識を実践する良い機会にもなります。

この記事では、HTMLとCSSでレポートを作る方法を、コピペで使えるテンプレート付きで解説します。

HTMLの基本をまだ学んでいない人は「HTMLで最初のページを作ろう」を先に読んでおくとスムーズです。

レポートの基本構成をHTMLで作る

レポートに必要な要素をHTMLで書く方法を紹介します。

基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>レポートタイトル</title>
  <link rel="stylesheet" href="report.css">
</head>
<body>
  <header>
    <h1>レポートのタイトル</h1>
    <p class="author">○年○組 名前</p>
    <p class="date">2026年○月○日</p>
  </header>

  <nav class="toc">
    <h2>目次</h2>
    <ol>
      <li><a href="#section1">はじめに</a></li>
      <li><a href="#section2">調査方法</a></li>
      <li><a href="#section3">結果</a></li>
      <li><a href="#section4">考察</a></li>
      <li><a href="#section5">まとめ</a></li>
    </ol>
  </nav>

  <main>
    <section id="section1">
      <h2>1. はじめに</h2>
      <p>ここに本文を書きます。</p>
    </section>

    <section id="section2">
      <h2>2. 調査方法</h2>
      <p>ここに本文を書きます。</p>
    </section>
  </main>

  <footer>
    <h2>参考文献</h2>
    <ul>
      <li>著者名『書籍名』出版社, 出版年</li>
      <li>サイト名「ページタイトル」URL（閲覧日）</li>
    </ul>
  </footer>
</body>
</html>

各要素の説明:

  • header: レポートのタイトル、著者名、日付
  • nav: 目次（ページ内リンク付き）
  • main: 本文（sectionで章を分ける）
  • footer: 参考文献リスト

id属性とaタグを使うと、目次をクリックして該当セクションにジャンプできます。

CSSで見やすくデザインする

HTMLだけだと見た目が素っ気ないので、CSSで整えましょう。

CSSの基本は「CSSで最初のスタイルを書こう」で学べます。

レポート用CSS

body {
  font-family: "游明朝", "Yu Mincho", serif;
  font-size: 16px;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  color: #333;
}

h1 {
  font-size: 24px;
  text-align: center;
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
}

h2 {
  font-size: 20px;
  border-left: 4px solid #2563eb;
  padding-left: 10px;
  margin-top: 40px;
}

.author, .date {
  text-align: center;
  color: #666;
}

.toc {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 30px 0;
}

.toc ol {
  padding-left: 20px;
}

.toc a {
  color: #2563eb;
  text-decoration: none;
}

p {
  text-indent: 1em;
  margin-bottom: 1em;
}

デザインのポイント:

  • font-family: レポートには明朝体が適しています
  • line-height: 1.8: 行間を広めにすると読みやすい
  • max-width: 800px: 横幅を制限して読みやすくする
  • text-indent: 1em: 段落の先頭を1文字分字下げする

表やグラフを入れる

レポートにはデータを表で示すことが多いです。HTMLのtableタグを使います。

表の書き方

<table>
  <caption>表1: 月別の平均気温</caption>
  <thead>
    <tr>
      <th>月</th>
      <th>平均気温(℃)</th>
      <th>降水量(mm)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>6月</td>
      <td>22.5</td>
      <td>168</td>
    </tr>
    <tr>
      <td>7月</td>
      <td>26.3</td>
      <td>154</td>
    </tr>
    <tr>
      <td>8月</td>
      <td>27.8</td>
      <td>166</td>
    </tr>
  </tbody>
</table>

表のCSS

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: center;
}

th {
  background-color: #f0f0f0;
  font-weight: bold;
}

caption {
  font-weight: bold;
  margin-bottom: 8px;
}

HTMLテーブルの詳しい使い方は「HTMLテーブルの作り方」で学べます。

データの見せ方のコツ:

  • 表にはcaptionで番号とタイトルをつける
  • 数値は右揃え、文字は左揃えにすると見やすい
  • 行が多い場合は偶数行に薄い背景色をつける

印刷用のスタイル設定

レポートを印刷して提出する場合、印刷用のCSSを追加しましょう。@media print（メディアクエリ）を使います。

@media print {
  body {
    font-size: 12pt;
    max-width: none;
    padding: 0;
  }

  .toc a {
    color: #000;
    text-decoration: none;
  }

  h2 {
    page-break-after: avoid;
  }

  table {
    page-break-inside: avoid;
  }

  footer {
    page-break-before: always;
  }
}

設定の説明:

  • font-size: 12pt: 印刷に適したサイズ
  • page-break-after: avoid: 見出しの直後で改ページしない
  • page-break-inside: avoid: 表の途中で改ページしない
  • page-break-before: always: 参考文献を新しいページから始める

印刷プレビューで確認する方法: ブラウザでCtrl+P（Mac: Cmd+P）を押すと、印刷プレビューが表示されます。ここで仕上がりを確認しましょう。

メディアクエリの詳しい使い方は「CSSメディアクエリの使い方」で解説しています。

テンプレートコード全体

以下のコードをコピーして、内容を書き換えるだけでレポートが完成します。report.htmlとして保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>【レポートタイトル】</title>
  <style>
    body { font-family: "游明朝", serif; font-size: 16px; line-height: 1.8; max-width: 800px; margin: 0 auto; padding: 40px; color: #333; }
    h1 { font-size: 24px; text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; }
    h2 { font-size: 20px; border-left: 4px solid #2563eb; padding-left: 10px; margin-top: 40px; }
    .author, .date { text-align: center; color: #666; }
    .toc { background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 30px 0; }
    p { text-indent: 1em; margin-bottom: 1em; }
    table { width: 100%; border-collapse: collapse; margin: 20px 0; }
    th, td { border: 1px solid #ccc; padding: 8px 12px; text-align: center; }
    th { background: #f0f0f0; }
    @media print { body { font-size: 12pt; max-width: none; padding: 0; } h2 { page-break-after: avoid; } }
  </style>
</head>
<body>
  <header>
    <h1>【レポートタイトル】</h1>
    <p class="author">【学年・組・名前】</p>
    <p class="date">【提出日】</p>
  </header>
  <nav class="toc">
    <h2>目次</h2>
    <ol>
      <li><a href="#s1">はじめに</a></li>
      <li><a href="#s2">本論</a></li>
      <li><a href="#s3">まとめ</a></li>
    </ol>
  </nav>
  <main>
    <section id="s1"><h2>1. はじめに</h2><p>【本文】</p></section>
    <section id="s2"><h2>2. 本論</h2><p>【本文】</p></section>
    <section id="s3"><h2>3. まとめ</h2><p>【本文】</p></section>
  </main>
  <footer><h2>参考文献</h2><ul><li>【参考文献1】</li></ul></footer>
</body>
</html>

使い方:

  1. 上のコードをコピーしてテキストエディタに貼り付ける
  2. 「report.html」として保存する
  3. 【 】の部分を自分の内容に書き換える
  4. ブラウザで開いて確認する
  5. 印刷して提出する

文化祭のWebサイト作りにも応用できます。「文化祭のWebサイトをゼロから作る方法」も参考にしてください。

よくある質問

HTMLでレポートを作るときによくある質問に答えます。

Q: WordやGoogleドキュメントとの違いは？

Wordは文章を書くことに特化したソフトです。HTMLは「構造」と「見た目」を分けて管理できるのが特徴です。CSSを変えるだけで、同じ内容のレポートのデザインを一瞬で変更できます。また、HTMLで作ったレポートはブラウザがあれば誰でも見られます。特別なソフトが不要なのもメリットです。一方、数式を多く使うレポートはWordやLaTeXのほうが向いています。用途に合わせて使い分けましょう。

Q: 先生に提出しても大丈夫？

多くの場合、印刷して提出すれば問題ありません。ブラウザからCtrl+P（Mac: Cmd+P）で印刷すると、普通の紙のレポートとして提出できます。PDFとして保存することもできます。ただし、先生が「Wordで提出」と指定している場合は、その指示に従いましょう。事前に「HTMLで作ったレポートを印刷して提出してもいいですか？」と確認するのがおすすめです。HTMLで作ったことを伝えると、情報の授業で学んだことを実践していると評価されることもあります。

Q: HTMLが難しく感じたらどうすればいい？

最初はテンプレートをコピーして、中身だけ書き換えることから始めましょう。HTMLのタグを全部覚える必要はありません。この記事のテンプレートを使えば、h2（見出し）とp（段落）の2つのタグだけで本文が書けます。慣れてきたら、少しずつ新しいタグやCSSを試してみてください。

Q: スマホでも見られるようにするには？

この記事のテンプレートは、max-widthを設定しているので、スマホでもある程度読みやすく表示されます。さらにスマホ対応を強化したい場合は、headタグの中に次の1行を追加してください。

meta name="viewport" content="width=device-width, initial-scale=1.0"

▶ プレビュー

この設定で、スマホの画面幅に合わせて表示が調整されます。印刷して提出するだけなら、スマホ対応は必須ではありません。Webで公開する場合は追加しておきましょう。

まとめ

  • ✅ HTMLでレポートの構造（タイトル・目次・本文・参考文献）を作る
  • ✅ CSSで明朝体・行間・余白を設定して読みやすくする
  • ✅ tableタグでデータを表にまとめる
  • ✅ @media printで印刷用のスタイルを設定する
  • ✅ テンプレートをコピーして【 】を書き換えるだけで完成
  • ✅ Ctrl+Pで印刷プレビューを確認してから提出する

HTMLでレポートを作ると、Wordよりも自由にデザインできます。プログラミングの練習にもなるので、ぜひ次の課題で試してみてください。

🚀 HTML/CSSをもっと学ぼう！

レポート作りでHTMLに興味を持ったら、次はWebサイト作りに挑戦しましょう。このサイトでは、HTML・CSSを基礎から無料で学べます。

HTMLで最初のページを作ろう →
目次

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

関連記事

HTML

CSSでレイアウトが崩れた原因の探し方と直し方【よくあるパターン10選】

CSSのレイアウトが崩れた・ズレたときの原因の探し方を初心者向けに解説。開発者ツールでの特定手順と、はみ出し・余白ズレ・横並び失敗などよくある崩れパターン10個の直し方を紹介します。

 HTML

HTML・CSSで作れる作品アイデア10選【中学生・高校生向け】

HTML・CSSで作れる作品アイデア10個を難易度・所要時間付きで紹介。自己紹介ページからポートフォリオサイトまで、初級→中級→上級の3段階で構成。何を作ればいいか迷っている中高生向け。無料。

 HTML

中間テスト前にHTML・CSSを総復習！情報Ⅰの実技問題対策 | プログラミング入門

情報Ⅰの中間テストで出るHTML・CSSの実技問題を総復習。穴埋め・コード修正・出力予測のパターン別対策と練習問題つきで得点力アップ。

この記事に出てくる用語

𝕏 シェア LINE シェア

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください:

HTMLとCSSで学校のレポートやプレゼン資料を作る方法を解説。コピペで使えるテンプレート付き。表の作り方や印刷用スタイルも紹介します。

出典: https://start-web-programming.com/blog/html-css-report-template/