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

2026年06月11日

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

ヘッドホンやイヤホンは耳みみからはずしてください
ペットボトル以外いがいの飲み物のみものを教室きょうしつに持ち込むこむことはできません
Microsoft Teamsにログインし、授業じゅぎょうの会議かいぎに参加さんかしてください。

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

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

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

HTMLタグ「アンカー」の正しいただしい使い方つかいかたはどれですか
- ＜a href=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
- ＜a hypertext=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
- ＜a url=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
- ＜a=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
- ＜a link=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
「URL」の説明せつめいで間違ってまちがっているものはどれですか
- URLは同じおなじものがいくつか存在そんざいします
- URLは「Uniform Resource Locator」です
- URLは「統一とういつ資源しげん位置いち指定子していし」です
- URLはインターネットにおける場所ばしょをあらわします
- URLをブラウザのアドレスバーに入力にゅうりょくすると、目的もくてきのデータにアクセスできます
HTMLタグ「改行かいぎょう」について正しいただしいものはどれですか
- ＜br＞は終了しゅうりょうタグが不要ふようです
- ＜br＞は終了しゅうりょうタグが必要ひつようです
- ＜br＞は表示ひょうじに影響えいきょうを与えあたえません
- テキストエディタで改行かいぎょうすると、自動じどうで＜br＞が適用てきようされます
- 「br」は「bring」の略りゃくです
Visual Studio Codeで基本的きほんてきなHTMLを表示ひょうじする方法ほうほうはどれですか
- HTMLファイルを保存ほぞんして、「!」を入力にゅうりょくした後あと、Tabキーを押すおす
- 「!」を入力にゅうりょくした後あと、Tabキーを押して、HTMLファイルを保存ほぞんする
- HTMLファイルを保存ほぞんして、Tabキーを押した後あと、「!」を入力にゅうりょくする
- Tabキーを押した後あと、HTMLファイルを保存ほぞんして、「!」を入力にゅうりょくする
- Tabキーを押した後あと、「!」を入力にゅうりょくして、HTMLファイルを保存ほぞんする
HyperTextについて、間違ってまちがっているものはどれですか
- HyperTextは他のほかのWebサイトにリンクします
- HyperTextは文書ぶんしょと文書ぶんしょがお互いにおたがいつながる仕組みしくみです
- HyperTextは情報じょうほうと情報じょうほうを結むすびびつける、現代げんだいのインターネットの基本きほんとなる考え方かんがえかたです
- Webサイトはページとページがつながっているから価値かちがあります
- HTMLは「HyperText Markup Language」の略りゃくです

テキストの配布はいふ

本日ほんじつのテキストを配りくばります。

テキストを受け取ったら、学籍番号がくせきばんごうと名前なまえを書いてください
テキストは捨てすてないでください。次回じかい以降いこうも持ってきてください

VS Codeの便利べんりな使い方つかいかた（復習ふくしゅう）

HTMLの基本的きほんてきな構造こうぞうを、Visual Studio Codeを使って表示ひょうじします。

「新しいあたらしいテキストファイルを作成さくせい」して、何もなにも書かずにHTMLファイル（index.html）として保存ほぞんしましょう
キーボードで「!」を入力にゅうりょくして、その後あと「Tabキー」を押すおすと、HTMLが表示ひょうじされます
- これはHTMLの基本的きほんてきな構造こうぞうです
対象たいしょうとなる言語げんごを変更へんこうします
- 「en」を「ja」に修正しゅうせいしましょう
タイトルを変更へんこうします
- ＜title＞Document＜/title＞を＜title＞自分じぶんの学籍番号がくせきばんごう＜/title＞に修正しゅうせいしましょう

完成かんせい例れい

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
    
  </body>
</html>

作成さくせいしたHTMLファイル（index.html）は後あとで使います。

HTMLの情報じょうほう構造こうぞう

HTMLの情報じょうほう構造こうぞうについて学びまなびます。

親おや子こ構造こうぞう、階層かいそう構造こうぞう、ツリー構造こうぞう

親おや子こ構造こうぞう：「親おや」の中になかに「子こ」、「子こ」の中になかに「孫まご」が含まれるような情報じょうほう構造こうぞう

親おや子こ構造こうぞうを図ずにすると、ピラミッドのように階段かいだんのような構造こうぞうになっています。
このような情報じょうほう構造こうぞうを「階層かいそう構造こうぞう」ともいいます。

階層かいそう構造こうぞう：ひとつのデータから複数ふくすうのデータに分かれわかれていく情報じょうほう構造こうぞう

さらに、親おや子こ構造こうぞうや階層かいそう構造こうぞうは、木き（tree）を逆ささかさまにしたような形かたちをしているので、「ツリー構造こうぞう」ともよばれます。

ツリー構造こうぞう：親おや子こ構造こうぞうや階層かいそう構造こうぞうのように、上うえから下したに広がるひろがる構造こうぞう

親おや子こ構造こうぞう＝階層かいそう構造こうぞう＝ツリー構造こうぞう

HTMLは親おや子こ構造こうぞう／階層かいそう構造こうぞう／ツリー構造こうぞうです。
前回ぜんかい作成さくせいしたHTMLを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p><a href="https://jue.ac.jp/">日本経済大学</a></p>
    <p><a href="home.html">ホーム</a></p>
    <p>日本経済大学は神戸にもキャンパスがあります。<br>
    神戸三宮キャンパスは、神戸市にあります。</p>
  </body>
</html>

HTMLの情報じょうほう構造こうぞうは、親おや子こ構造こうぞう（階層かいそう構造こうぞう／ツリー構造こうぞう）になっています。

html
┣head
┃┣meta
┃┗title
┗body
　┣h1
　┣p
　┃┗a
　┣p
　┃┗a
　┗p
　

HTMLタグ

これまでのHTMLタグ（見出しみだし、段落だんらく、アンカー、改行かいぎょう）にはなかった、親おや子こ構造こうぞうを持ったHTMLタグを学びまなびます。

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

Unordered List
順番じゅんばんのない文ぶんを並べるならべる（箇条書きかじょうがき）
- 買い物かいものリスト
- ToDoリスト　など

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

順番じゅんばんなしリストの親おや子こ構造こうぞう：ulが親おや、liが子こです。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

HTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
      <h1>かいものリスト</h1>
    <ul>
  　　　　<li>とりにく</li>
      <li>たまご</li>
      <li>こめ</li>
    </ul>
  </body>
</html>

保存ほぞんして、ブラウザから確認かくにんしてみましょう。

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

Ordered List
順番じゅんばんのある文ぶんを並べるならべる
- 料理りょうりの手順てじゅん
- テストの成績せいせき順じゅん　など

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

順番じゅんばんありリストの親おや子こ構造こうぞう：olが親おや、liが子こです。

<ol>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

HTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
      <h1>かいものリスト</h1>
    <ul>
  　　　　<li>とりにく</li>
      <li>たまご</li>
      <li>こめ</li>
    </ul>
      <h1>おやこどんのつくりかた</h1>
    <ol>
  　　　　<li>とりにくをきる</li>
      <li>とりにくとたまごをにる</li>
      <li>ごはんにのせる</li>
    </ol>
  </body>
</html>

保存ほぞんして、ブラウザから確認かくにんしてみましょう。

HTMLタグ（説明せつめいリスト）

Description List
ことばを説明せつめいしたり、情報じょうほうをまとめる
- ことばの説明せつめい
- 項目こうもくと内容ないよう　など

<dl>	リスト全体ぜんたい
<dt>	説明せつめいされることば
<dd>	説明せつめいの内容ないよう

説明せつめいリストの親おや子こ構造こうぞう：dlが親おや、dtとddが子こです。dtとddはセットです。

ひとつのdtに対してたいして、複数ふくすうのddを組み合わせるくみあわせることができます。

<dl>
  <dt>ことば1</dt>
  <dd>ことば1の説明</dd>
  <dt>ことば2</dt>
  <dd>ことば2の説明</dd>
  <dd>ことば2の説明</dd>
</dl>

HTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
      <h1>かいものリスト</h1>
    <ul>
  　　　　<li>とりにく</li>
      <li>たまご</li>
      <li>こめ</li>
    </ul>
      <h1>おやこどんのつくりかた</h1>
    <ol>
　　　　　　<li>とりにくをきる</li>
      <li>とりにくとたまごをにる</li>
      <li>ごはんにのせる</li>
    </ol>
      <h1>レシピのポイント</h1>
    <dl>
  　　　　<dt>ごはん</dt>
      <dd>かためにする</dd>
      <dt>とりにくとたまご</dt>
      <dt>しんせんなものをつかう</dt>
      <dt>かたくならないようにする</dt>
    </dl>
  </body>
</html>

保存ほぞんして、ブラウザから確認かくにんしてみましょう。

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A（第09回）