留学生りゅうがくせいのためのWebデザイン・HTML・CSS入門にゅうもん　付録ふろく

練習用れんしゅうようのHTML・CSS

本文ほんぶんのコード例れいを章しょうごとに掲載けいさいしています。コードは本文ほんぶんと同おなじ内容ないようです。各例かくれいのファイルを保存ほぞんしてブラウザーで開ひらくか、CSSファイルをHTMLに読よみ込こんで試ためしてください。

第だい1章しょう　コード例れい1

ch01_example01.htmlをダウンロード

<h1>Open Campus</h1>
<p>Visit our school.</p>

第だい1章しょう　コード例れい2

ch01_example02.cssをダウンロード

h1 {
  color: #174a6e;
}
p {
  margin-top: 2rem;
}

第だい2章しょう　コード例れい1

ch02_example01.htmlをダウンロード

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Open Campus</title>
</head>
<body>
  <h1>Open Campus</h1>
  <p>Visit our school.</p>
</body>
</html>

第だい2章しょう　コード例れい2

ch02_example02.htmlをダウンロード

<a href="program.html">Program</a>

第だい2章しょう　コード例れい3

ch02_example03.htmlをダウンロード

<p>Bring a <strong>student card</strong>.</p>

第だい2章しょう　コード例れい4

ch02_example04.htmlをダウンロード

<h1>Open Campus</h1>
<p>Choose a place to visit.</p>
<ul>
  <li>Library</li>
  <li>Design room</li>
  <li>Science lab</li>
</ul>

第だい2章しょう　コード例れい5

ch02_example05.htmlをダウンロード

<h1>Open Campus</h1>
<p>Choose one event to explore.</p>
<ul>
  <li>Campus tour</li>
  <li>Design class</li>
  <li>Science show</li>
</ul>
<p><a href="program.html">See the program</a></p>

第だい3章しょう　コード例れい1

ch03_example01.htmlをダウンロード

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Open Campus</title>
</head>
<body>
  <header>
    <h1>Open Campus</h1>
    <p>Visit our school.</p>
  </header>
  <nav>
    <ul>
      <li><a href="#classes">Classes</a></li>
      <li><a href="#visit">Visit</a></li>
    </ul>
  </nav>
  <main>
    <section id="classes">
      <h2>Classes</h2>
      <p>Try a short design class.</p>
      <section>
        <h3>What to bring</h3>
        <p>Bring a notebook.</p>
      </section>
    </section>
    <section id="visit">
      <h2>Visit</h2>
      <p>Check the meeting place before you come.</p>
    </section>
  </main>
  <footer>
    <p>Contact the school office.</p>
  </footer>
</body>
</html>

第だい3章しょう　コード例れい2

ch03_example02.htmlをダウンロード

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Open Campus</title>
</head>
<body>
  <header><h1>Open Campus</h1></header>
  <nav><a href="#classes">Classes</a> <a href="#visit">Visit</a></nav>
  <main>
    <section id="classes"><h2>Classes</h2><p>Try a design class.</p></section>
    <section id="visit"><h2>Visit</h2><p>Check the meeting place before you come.</p></section>
  </main>
  <footer><p>Contact the school office.</p></footer>
</body>
</html>

第だい4章しょう　コード例れい1

ch04_example01.htmlをダウンロード

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Campus tour</title>
</head>
<body>
  <main>
    <h1>Campus tour</h1>
    <p>May 10, 10:00. Meet at the library entrance.</p>
    <img src="campus-map.svg" alt="Map showing the library with its entrance marked at the lower middle of the building">
    <img src="blue-rule.svg" alt="">
    <table>
      <caption>Tour schedule</caption>
      <thead>
        <tr><th scope="col">Time</th><th scope="col">Event</th></tr>
      </thead>
      <tbody>
        <tr><td>10:00</td><td>Welcome</td></tr>
        <tr><td>11:00</td><td>Library</td></tr>
      </tbody>
    </table>
    <form>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
      <button type="submit" disabled>Send</button>
    </form>
  </main>
</body>
</html>

この例れいでは、同おなじフォルダーに campus-map.svg と blue-rule.svg を置おいてください。

第だい4章しょう　コード例れい2

ch04_example02.htmlをダウンロード

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Campus tour</title></head>
<body><main><h1>Campus tour</h1><p>May 10, 10:00. Meet at the library entrance.</p>
<img src="campus-map.svg" alt="Map showing the library with its entrance marked at the lower middle of the building">
<table><caption>Tour schedule</caption><thead><tr><th scope="col">Time</th><th scope="col">Event</th></tr></thead><tbody><tr><td>10:00</td><td>Welcome</td></tr><tr><td>11:00</td><td>Library</td></tr></tbody></table>
<form><label for="email">Email</label><input id="email" name="email" type="email"><button type="submit" disabled>Send</button></form>
</main></body></html>

この例れいでは、同おなじフォルダーに campus-map.svg と blue-rule.svg を置おいてください。

第だい5章しょう　コード例れい1

ch05_example01.htmlをダウンロード

<link rel="stylesheet" href="styles.css">

第だい5章しょう　コード例れい2

ch05_example02.cssをダウンロード

.notice {
  color: #19324a;
  padding: 1rem;
  border: 1px solid #315b78;
}

第だい5章しょう　コード例れい3

ch05_example03.cssをダウンロード

.notice {
  color: #19324a;
}
.notice {
  color: #315b78;
}

第だい5章しょう　コード例れい4

ch05_example04.cssをダウンロード

.notice {
  color: #19324a;
  padding: 1rem;
}

第だい6章しょう　コード例れい1

ch06_example01.htmlをダウンロード

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Campus events</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.5;
      margin: 1rem;
    }
    .site-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .event-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }
    .event-list article {
      border: 1px solid #345;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Campus events</h1>
  </header>
  <nav class="site-nav" aria-label="Main">
    <a href="#program">Program</a>
    <a href="#access">Access</a>
    <a href="#contact">Contact</a>
  </nav>
  <main>
    <section class="event-list" aria-label="Events">
      <article id="program">
        <h2>Program</h2>
        <p>Talk and campus tour.</p>
      </article>
      <article id="access">
        <h2>Access</h2>
        <p>Find the main entrance.</p>
      </article>
      <article>
        <h2>Library</h2>
        <p>Visit the study area.</p>
      </article>
      <article>
        <h2>Studio</h2>
        <p>See student projects.</p>
      </article>
      <article>
        <h2>Support</h2>
        <p>Ask about student life.</p>
      </article>
      <article id="contact">
        <h2>Contact</h2>
        <p>Send a question.</p>
      </article>
    </section>
  </main>
</body>
</html>

第だい6章しょう　コード例れい2

ch06_example02.cssをダウンロード

.card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

第だい7章しょう　コード例れい1

ch07_example01.htmlをダウンロード

<meta name="viewport" content="width=device-width, initial-scale=1">

第だい7章しょう　コード例れい2

ch07_example02.cssをダウンロード

img {
  max-width: 100%;
  height: auto;
}

第だい7章しょう　コード例れい3

ch07_example03.cssをダウンロード

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 42rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

第だい8章しょう　コード例れい1

ch08_example01.htmlをダウンロード

<section class="card">
  <h2>Open Campus A</h2>
  <p>June 15, 10:00</p>
  <p>Main Hall</p>
  <p class="deadline">Deadline: June 10</p>
</section>

第だい8章しょう　コード例れい2

ch08_example02.cssをダウンロード

.card { padding: 1rem; border: 1px solid #6b7280; }
.card h2 { margin: 0 0 0.75rem; }
.deadline { color: #173b57; font-weight: 700; }

第だい9章しょう　コード例れい1

ch09_example01.htmlをダウンロード

<div class="field-example">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" aria-describedby="name-error">
  <p class="error" id="name-error">Enter your name.</p>
</div>

第だい9章しょう　コード例れい2

ch09_example02.htmlをダウンロード

<style>.error { border: 2px solid #c00; }</style>
<h1>Open Campus</h1>
<h3 id="program">Program</h3>
<a href="#program">Click here</a>
<img src="map.png">
<label for="student">Name</label>
<input id="name" type="text">
<p class="error">&nbsp;</p>

第だい10章しょう　コード例れい1

ch10_example01.htmlをダウンロード

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Campus event</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Campus event</h1>
    <p>14 November 2026, 10:00</p>
  </header>
  <nav aria-label="Main">
    <a href="#program">Program</a>
  </nav>
  <main>
    <section aria-labelledby="visit-title">
      <h2 id="visit-title">Visit</h2>
      <p>Main Hall</p>
      <p>Join our open campus day.</p>
    </section>
    <section id="program" aria-labelledby="program-title">
      <h2 id="program-title">Program</h2>
      <div class="cards">
        <article>
          <h3>Tour</h3>
          <p>10:00</p>
        </article>
        <article>
          <h3>Workshop</h3>
          <p>13:00</p>
        </article>
      </div>
    </section>
    <section aria-labelledby="question-title">
      <h2 id="question-title">Question</h2>
      <div class="field-example">
        <label for="email">Email</label>
        <input id="email" name="email" type="email">
      </div>
    </section>
  </main>
  <footer>
    <p>Last reviewed: 27 October 2026</p>
  </footer>
</body>
</html>

第だい10章しょう　コード例れい2

ch10_example02.cssをダウンロード

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1rem;
  color: #19324a;
  font-family: sans-serif;
  line-height: 1.6;
}

header,
main,
footer {
  max-width: 52rem;
  margin-inline: auto;
}

nav {
  max-width: 52rem;
  margin: 0 auto 1rem;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

article {
  padding: 1rem;
  border: 1px solid #52734d;
  border-radius: 0.5rem;
}

.field-example {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

input {
  max-width: 100%;
}

@media (min-width: 42rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}