MENU
日本経済大学
  1. ホーム
  2. Webサイト作成A
  3. Webサイト作成さくせいA（第だい13回かい）

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

Webサイト作成A
目次

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

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タグのまとめです。

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

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

HTMLタグ（見出しみだし）

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

HTMLタグ（段落だんらく）

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

HTMLタグ（アンカー）

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

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

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

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

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

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

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

HTMLタグ（セクション）

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

HTMLタグ（グループ化）

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

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

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

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

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

HTMLタグ（画像がぞう）

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

HTMLタグ（iframe）

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

HTMLタグ（table）

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

HTMLタグ（スタイル）

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

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

これまでに勉強べんきょうしたCSSをプロパティのまとめです。

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

color色いろを指定してい

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

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

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

background-color色いろを指定してい

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

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

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

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

演習えんしゅう問題もんだい

  • CampusAppから演習えんしゅうファイルを2つ（HTMLファイルとJPEG画像がぞう）ダウンロードします
  • 「index_13.html」をVS Codeから開き一緒いっしょに作業さぎょうしましょう

作業さぎょう結果けっか

準備じゅんび

  • VS CodeでHTMLファイルを開いたら、キーボードの【alt】 + 【z】を押して、長いながい文章ぶんしょうがページ内に収まるおさまるようにしてください

HTML

問題もんだい01ID名めい【section-01】の中になかにある【日本経済大学にほんけいざいだいがくのWebサイト】を見出しみだし【h1】でマークアップしてください
問題もんだい02ID名めい【section-02】の中になかにある【Web サイトメニュー】を見出しみだし【h2】でマークアップしてください
問題もんだい03ID名めい【section-02】の中になかにある【神戸こうべ三宮さんのみやキャンパスの特徴とくちょう】【商学科しょうがくかについて】【神戸こうべ三宮さんのみやキャンパスへのアクセス】【日本経済大学にほんけいざいだいがく公式こうしき】それぞれをリスト【li】で、その後あと、全体ぜんたいを番号ばんごうありリスト【ol】でマークアップしてください
問題もんだい04ID名めい【section-03】の中になかにある【建学がくの精神せいしんに基もとづいて…】を段落だんらく【p】でマークアップしてください
問題もんだい05問題もんだい04でマークアップした段落だんらくの中になかにある【すなわち、】の前にまえに、改行かいぎょう【br】を挿入そうにゅうしてください
問題もんだい06ID名めい【section-04】の中になかにある【商学科しょうがくかについて】を見出しみだし【h2】でマークアップしてください
問題もんだい07ID名めい【section-04】の中になかにある【「人ひと」や「お金おかね」…】を【div】でマークアップしてください
問題もんだい08ID名めい【section-04】の中になかにある【会計かいけい・財ざい務コース】【マーケティングコース】【ホテル・観光かんこうビジネスコース】のそれぞれをリスト【li】で、その後あと、全体ぜんたいを番号ばんごうなしリスト【ul】でマークアップしてください
問題もんだい09ID名めい【section-03】の中になかにある【国際こくさい都市とし神戸こうべ】を【span】でマークアップしてください
問題もんだい10ID名めい【section-05】の中になかにある【キャンパス名めい】【郵便ゆうびん番号ばんごう】【住所じゅうしょ】を説明せつめいリスト見出しみだし【dt】で、【神戸こうべ三宮さんのみやキャンパス】【651-0094】【兵庫ひょうご県けん神戸市こうべし中央区ちゅおうく琴ノ緒町ことのおちょう4-4-7】を説明せつめいリスト項目こうもく【dd】で、最後にさいごに、【dt】3つと【dd】3つを含むふくむ全体ぜんたいを説明せつめいリスト【dl】でマークアップしてください
問題もんだい11Googleマップで【日本経済大学にほんけいざいだいがく 神戸こうべ三宮さんのみやキャンパス】を検索けんさくし、【共有きょうゆう】から【地図ちずを埋め込むうめこむ】を表示ひょうじさせ、iframeをコピーした後あと、ID名めい【section-05】の中になかにあるID名めい【map】の【div】に挿入そうにゅうしてください
問題もんだい12ID名めい【section-06】の中になかにある【学籍番号がくせきばんごう】【名前なまえ】を表見出しひょうみだし【th】で、【(自分じぶんの学籍番号がくせきばんごう)】【(自分じぶんの名前なまえ)】を表項目ひょうこうもく【td】で、【th】とその直後ちょくごの【td】を組くみにして、行ぎょう【tr】で、最後にさいごに2つの【tr】を表おもて【table】でマークアップしてください
問題もんだい13ID 名めい【section-03】の中になかにある【div】に、クラス名めい「catch-copy」をつけてください
問題もんだい14ID名めい【section-05】の中になかにあるID名めい【image】の【div】に、要素ようそ【img】を挿⼊し、src の内容ないようを【jue_spring.jpg】、altの内容ないようを【⽇本ほん経済けいざい⼤学がく 神かみ⼾三宮さんのみやキャンパス】としてください
問題もんだい15ID名めい【section-02】の中になかにある【⽇本ほん経済けいざい⼤学がく公式こうしき】に、アンカー【a】
でマークアップし、hrefの内容ないようを【https://www.jue.ac.jp/】としてください

CSS

問題もんだい16【h1】のテキスト位置いち【text-align】を中央ちゅうおう寄せ（center）にしてください
問題もんだい17【h2】の背景色はいけいしょく【background-color】を灰色はいいろ（#333333）、文字もじの色いろ【color】を白しろ色いろ（#ffffff）にしてください
問題もんだい18【h2】の内部ないぶ余白よはく【padding】を16pxにしてください
問題もんだい19クラス名めい【catch-copy】の枠わく線せんの色いろ【border-color】を黒くろ色いろ（#000000）に、枠わく線せんの幅はば【border-width】を1pxに、枠わく線せんの種類しゅるい【border-style】を直線ちょくせん（solid）にしてください
問題もんだい20クラス名めい【catch-copy】の内部ないぶ余白よはく【padding】を16pxにしてください
問題もんだい21クラス名めい【catch-copy】のテキスト位置いち【text-align】を中央ちゅうおう寄せ（center）にしてください
問題もんだい22【th】と【td】の枠わく線せんの色いろを黒くろ色いろ（#000000）に、枠わく線せんの幅はばを1pxに、枠わく線せんの種類しゅるいを直線ちょくせん（solid）に、さらに内部ないぶ余白よはくを16pxにしてください
問題もんだい23【dt】の文字もじの大きさおおきさ【font-size】を18pxにしてください
問題もんだい24【img】の幅はば【width】を240pxにしてください
問題もんだい25【body】の外部がいぶ余白よはく【margin】を16pxにしてください
問題もんだい26【iframe】の幅はば【width】を100%にしてください
問題もんだい27【span】の文字色もじしょく【color】を赤あか色いろ（#ff0000）にしてください
問題もんだい28【section】の内部ないぶ余白よはく【padding】を16pxにしてください
問題もんだい29ID名めい【section-01】の背景色はいけいしょくを淡い灰色はいいろ（#eeeeee）にしてください
問題もんだい30【a】の文字色もじしょく【color】を緑みどり色いろ（#008000）にしてください

最後にさいごに

  • 【(自分じぶんの学籍番号がくせきばんごう)】 と 【(自分じぶんの名前なまえ)】を、自分じぶんの学籍番号がくせきばんごうと名めい前にまえに書き換えましょう

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次