Webサイト作成さくせいA（第だい13回かい）

2025年06月30日

授業じゅぎょうの準備じゅんび

Microsoft Teamsにログインし、授業じゅぎょうの会議かいぎに参加さんかしてください。

前回ぜんかいの復習ふくしゅう

Webサイト作成さくせいA（第だい12回かい）

前回ぜんかいの知識ちしき問題もんだい

HTMLで、現在げんざいのページに他のほかのページを埋め込むうめこむための要素ようそはどれですか
- iframe
- inlineframe
- inline
- bury
- fill
HTMLで、表ひょうの要素ようそはどれですか
- table
- div
- span
- css
- html
HTMLで、表ひょうの「行ぎょう」の要素ようそはどれですか
- tr
- th
- td
- table
- tt
HTMLで、表ひょうの「見出しみだし」の要素ようそはどれですか
- th
- td
- tr
- table
- tt
HTMLで、表ひょうの「内容ないよう」の要素ようそはどれですか
- td
- th
- tr
- table
- tt

実技じつぎテストと定期ていき試験しけんについて

実技じつぎテスト

15回かい目めの授業じゅぎょうで実技じつぎテストを行いおこないます
- 14回かい目めは試験しけん勉強べんきょうの時間じかんとします

試験しけん場所ばしょ	ITリテラシー教室きょうしつ
試験しけん内容ないよう	HTMLとCSSの作成さくせい
試験しけん時間じかん	60分
試験しけん範囲はんい	13回かい目めの授業じゅぎょうまでに学んだまなんだ内容ないよう
注ちゅう意い事項じこうなど	教科書きょうかしょの持ち込み、パソコンで調べるしらべる、AIに質問しつもんするなどは認めみとめますが、スマホの使用しようは禁止きんしです。また、試験中しけんちゅうの私語しご（友達ともだちと話はなしをすること）も禁止きんしです。禁止きんしした行動こうどうを確認かくにんした場合ばあい、退室たいしつを命じるめいじることがあります。

定期ていき試験しけん

16回かい目めの授業じゅぎょうで定期ていき試験しけんを行いおこないます
- 事前にじぜんに勉強べんきょうしてほしいので、14回かい目めを目安めやすにこれまでの知識ちしき問題もんだいを再さい掲載けいさいします

試験しけん場所ばしょ	オンライン
試験しけん内容ないよう	選択せんたく式しきのテスト
試験しけん時間じかん	50分
試験しけん範囲はんい	授業中じゅぎょうちゅうに実施じっしした知識ちしき問題もんだいより

復習ふくしゅう：これまでに勉強べんきょうしたHTMLタグ

これまでに勉強べんきょうしたHTMLタグのまとめです。一緒いっしょにコーディングしていきましょう。

Visual Studio Codeを起動きどうして、新規しんきのHTML文書ぶんしょを作成さくせいします。

HTMLタグ（基本きほん構造こうぞう）

<html>	HTMLの文書ぶんしょ全体ぜんたいを指定していする
<head>	HTML文書ぶんしょのメタ情報じょうほう（設定せってい情報じょうほう）を書くかく＊HTMLの「頭あたま」に相当そうとうするから
<body>	HTML文書ぶんしょの本体ほんたいであること指定していする＊HTMLの「体からだ」に相当そうとうするから
<title>	HTML文書ぶんしょの名前なまえを指定していする（必ずかならずheadの中になかに書くかく）

<html>
  <head>
    <title>（自分の学籍番号）</title>
  </head>
  <body>
  </body>
</html>

HTMLタグ（見出しみだし）

<h1>	1番ばん目めに大きなおおきな見出しみだしを指定していする
<h2>	2番ばん目めに大きなおおきな見出しみだしを指定していする
<h3>	3番ばん目めに大きなおおきな見出しみだしを指定していする
<h4>	4番ばん目めに大きなおおきな見出しみだしを指定していする
<h5>	5番ばん目めに大きなおおきな見出しみだしを指定していする
<h6>	6番ばん目めに大きなおおきな見出しみだしを指定していする

HTMLタグ（段落だんらく）

<p>	段落だんらく（文ぶんのまとまり）を指定していする

<html>
  <head>
    <title>（自分の学籍番号）</title>
  </head>
  <body>
    <h1>（自分の学籍番号）</h1>
    <h2>見出し2</h2>
    <p>日本経済大学の（自分の名前）です。よろしくお願いします。</p>
  </body>
</html>

HTMLタグ（アンカー）

<a>	他のほかのページや他のほかのWebサイトとつなぐ

<html>
  <head>
    <title>（自分の学籍番号）</title>
  </head>
  <body>
    <h1>（自分の学籍番号）</h1>
    <h2>見出し2</h2>
    <p><a href="https://jue.ac.jp/">日本経済大学</a>の（自分の名前）です。よろしくお願いします。</p>
  </body>
</html>

HTMLタグ（順番じゅんばんなしリスト）

<ul>	リスト全体ぜんたい
<li>	リスト項目こうもく

HTMLタグ（順番じゅんばんありリスト）

<ol>	リスト全体ぜんたい
<li>	リスト項目こうもく

HTMLタグ（説明せつめいリスト／定義ていぎリスト）

<dl>	リスト全体ぜんたい
<dt>	説明せつめいや定義ていぎされることば
<dd>	説明せつめいや定義ていぎ

<html>
  <head>
    <title>（自分の学籍番号）</title>
  </head>
  <body>
    <h1>（自分の学籍番号）</h1>
    <h2>見出し2</h2>
    <p><a href="https://jue.ac.jp/">日本経済大学</a>の（自分の名前）です。よろしくお願いします。</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
    <ol>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ol>
    <dl>
      <dt>説明される言葉</dt>
      <dd>説明</dd>
    </dl>
  </body>
</html>

HTMLタグ（セクション）

<section>	文章ぶんしょうや情報じょうほうのまとまり

HTMLタグ（グループ化）

<div>	コンテンツをグループ化する

HTMLタグ（範囲はんい指定してい）

<span>	任意にんいの範囲はんいを指定していする

HTMLタグ（改行かいぎょう）

<br>	改行かいぎょうする

<html>
  <head>
    <title>（自分の学籍番号）</title>
  </head>
  <body>
    <section>
      <h1>（自分の学籍番号）</h1>
      <h2>見出し2</h2>
      <p><a href="https://jue.ac.jp/">日本経済大学</a>の（自分の名前）です。よろしくお願いします。</p>
      <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ul>
      <ol>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ol>
      <dl>
        <dt>説明される<span>言葉</span></dt>
        <dd>説明</dd>
      </dl>
      <div></div>
    </section>
  </body>
</html>

HTMLタグ（画像がぞう）

<img>	画像がぞうを表示ひょうじする

HTMLタグ（iframe）

<iframe>	現在げんざいのページにほかのページを埋め込むうめこむ

<html>
  <head>
    <title>（自分の学籍番号）</title>
  </head>
  <body>
    <section>
      <h1>（自分の学籍番号）</h1>
      <h2>見出し2</h2>
      <p><a href="https://jue.ac.jp/">日本経済大学</a>の（自分の名前）です。よろしくお願いします。</p>
      <img src="jue.jpg" alt="日本経済大学">
      <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ul>
      <ol>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ol>
      <dl>
        <dt>説明される<span>言葉</span></dt>
        <dd>説明</dd>
      </dl>
      <div></div>
    </section>
  </body>
</html>

HTMLタグ（スタイル）

<style>	CSSを記述きじゅつできます

HTMLタグ（table）

<table>	表ひょうの全体ぜんたいを指定していする
<tr>	表ひょうの「行ぎょう」を指定していする
<th>	表ひょうの「見出しみだし」を指定していする
<td>	表ひょうの「内容ないよう」を指定していする

<html>
  <head>
    <title>（自分の学籍番号）</title>
    <style>

    </style>
  </head>
  <body>
    <section>
      <h1>（自分の学籍番号）</h1>
      <h2>見出し2</h2>
      <p><a href="https://jue.ac.jp/">日本経済大学</a>の（自分の名前）です。よろしくお願いします。</p>
      <img src="jue.jpg" alt="日本経済大学">
      <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ul>
      <ol>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ol>
      <dl>
        <dt>説明される<span>言葉</span></dt>
        <dd>説明</dd>
      </dl>
      <div>
        <table>
          <tr>
            <th>学籍番号</th>
            <td>（自分の学籍番号）</td>
          </tr>
          <tr>
            <th>名前</th>
            <td>（自分の名前）</td>
          </tr>
        </table>
      </div>
    </section>
  </body>
</html>

復習ふくしゅう：これまでに勉強べんきょうしたCSSプロパティ

これまでに勉強べんきょうしたCSSをプロパティのまとめです。
引き続きつづき、一緒いっしょにコーディングしていきましょう。

CSSプロパティ（文字もじの色いろ）

color	文字もじの色いろを指定してい

CSSプロパティ（文字もじの大きさおおきさ）

font-size	文字もじの大きさおおきさを指定してい

CSSプロパティ（背景色はいけいしょく）

background-color	背景色はいけいしょくを指定してい

CSSプロパティ（文字もじの位置いち）

text-align	水平すいへい方向ほうこうの位置いちを指定してい

<html>
  <head>
    <title>（自分の学籍番号）</title>
    <style>
      h1 {
        color: #ff0000;
        text-align: center;
      }
      div {
        font-size: 24px;
        background-color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <section>
      <h1>（自分の学籍番号）</h1>
      <h2>見出し2</h2>
      <p><a href="https://jue.ac.jp/">日本経済大学</a>の（自分の名前）です。よろしくお願いします。</p>
      <img src="jue.jpg" alt="日本経済大学">
      <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ul>
      <ol>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ol>
      <dl>
        <dt>説明される<span>言葉</span></dt>
        <dd>説明</dd>
      </dl>
      <div>
        <table>
          <tr>
            <th>学籍番号</th>
            <td>（自分の学籍番号）</td>
          </tr>
          <tr>
            <th>名前</th>
            <td>（自分の名前）</td>
          </tr>
        </table>
      </div>
    </section>
  </body>
</html>

CSSプロパティ（要素ようその大きさおおきさ）

width	幅はばを指定してい
height	高さたかさを指定してい
padding	内部ないぶ余白よはくを指定してい
margin	外部がいぶ余白よはくを指定してい
border	枠わく線せんを指定してい

<html>
  <head>
    <title>（自分の学籍番号）</title>
    <style>
      h1 {
        color: #ff0000;
        text-align: center;
      }
      div {
        font-size: 24px;
        background-color: #eeeeee;
      }
      h2 {
        width: 100%;
        height: 60px;
        padding: 30px;
        margin: 60px;
        border: solid 1px #ff0000;
      }
    </style>
  </head>
  <body>
    <section>
      <h1>（自分の学籍番号）</h1>
      <h2>見出し2</h2>
      <p><a href="https://jue.ac.jp/">日本経済大学</a>の（自分の名前）です。よろしくお願いします。</p>
      <img src="jue.jpg" alt="日本経済大学">
      <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ul>
      <ol>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ol>
      <dl>
        <dt>説明される<span>言葉</span></dt>
        <dd>説明</dd>
      </dl>
      <div>
        <table>
          <tr>
            <th>学籍番号</th>
            <td>（自分の学籍番号）</td>
          </tr>
          <tr>
            <th>名前</th>
            <td>（自分の名前）</td>
          </tr>
        </table>
      </div>
    </section>
  </body>
</html>

課題かだいの提出ていしゅつ

課題かだいを提出ていしゅつしましょう。

CampusApp

「出欠しゅっけつ・課題かだい」から提出ていしゅつしましょう
課題かだいセクションにある今日きょうの授業じゅぎょうの欄らんから提出ていしゅつできます

知識ちしき問題もんだい

今日きょうの授業じゅぎょう内容ないようを知識ちしき問題もんだいで復習ふくしゅうしましょう。

CampusApp

CampusAppの「CBT（知識ちしき問題もんだい）」から、知識ちしき問題もんだいにチャレンジしましょう
100点てんが取れるとれるまで、繰り返しくりかえし挑戦ちょうせんしましょう
期末きまつの定期ていき試験しけんは知識ちしき問題もんだいの中からなかから出題しゅつだいします

パソコンの再起動さいきどう／シャットダウン

授業じゅぎょうの終わりおわりに必ずかならずパソコンを再起動さいきどう（次つぎに他のほかの授業じゅぎょうがある場合ばあい）、またはシャットダウン（次つぎに他のほかの授業じゅぎょうがない場合ばあい）してください。