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

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

Webサイト作成A
目次

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

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

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

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

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

  • id属性ぞくせいが「my_id」のdivはどれですか
    • <div id=”my_id”></div>
    • <div class=”my_id”></div>
    • <div my_id=”id”></div>
    • <div my_id=”class”></div>
    • <div my_id></div>
  • class属性ぞくせいが「my_class」のulはどれですか
    • <ul class=”my_class”></ul>
    • <ul id=”my_class”></ul>
    • <ul my_class=”class”></ul>
    • <my_class class=”ul”></my_class>
    • <ul my=”class”></ul>
  • 「内部ないぶ余白よはくが30px」を指定していするCSSはどれですか
    • padding: 30px;
    • margin: 30px;
    • width: 30px;
    • height: 30px;
    • border: 30px;
  • 「文字もじ位置いちが右みぎ」を指定していするCSSはどれですか
    • text-align: right;
    • text-align: center;
    • text: right;
    • font: right;
    • right: text;
  • 「文字もじの大きさおおきさが10px、背景色はいけいしょくが赤あか、文字色もじしょくが白しろ」を指定していするCSSはどれですか
    • font-size: 10px; background-color: #ff0000; color: #ffffff;
    • font: 10px; background: #ff0000; color: #ffffff;
    • size: 10px; background-color: #ff0000; color: #ffffff;
    • font-size: 10%; background-color: #ff0000; color: #ffffff;
    • font-size: 10px; background-color: #ff0000; color: #000000;

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

実技じつぎテスト

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

定期ていき試験しけん

  • 16回かい目めの授業じゅぎょうで定期ていき試験しけんを行いおこないます
    • 事前にじぜんに勉強べんきょうしてほしいので、14回かい目めを目安めやすにこれまでの知識ちしき問題もんだいを再さい掲載けいさいします
試験しけん場所ばしょオンライン
試験しけん内容ないよう選択せんたく式しきのテスト
試験しけん時間じかん50分
試験しけん範囲はんい授業中じゅぎょうちゅうに実施じっしした知識ちしき問題もんだいより

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

  • CampusAppから演習えんしゅうファイルを2つ（HTMLファイルとJPEG画像がぞう）ダウンロードします
  • 「index_14.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

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

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

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

Webサイト作成A
目次