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

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

Webサイト作成B
目次

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

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

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

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

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

  • CSSプロパティで、ブラウザから見えなくなるのはどれですか
    • display: none;
    • display: block;
    • display: inline;
    • display: flex;
    • display: grid;
  • CSSプロパティで、「display: inline;」について正しいただしいのはどれですか
    • 横よこにならべる、幅はばと高さたかさを指定していできない
    • 横よこにならべる、幅はばと高さたかさを指定していできる
    • 縦たてにならべる、幅はばと高さたかさを指定していできない
    • 縦たてにならべる、幅はばと高さたかさを指定していできる
  • CSSプロパティで、子こ要素ようそを横よこにならべるのはどれですか
    • display: flex;
    • display: block;
    • display: inline;
    • display: none;
    • display: grid;
  • CSSプロパティで、正しいただしい組み合わせくみあわせはどれですか
    • 「position: relative;」はもとからある場所ばしょを基準きじゅんにする
    • 「position: absolute;」はブラウザのウインドウを基準きじゅんにする
    • 「position: fixed;」はWebページ全体ぜんたいや、親おや要素ようそ基準きじゅんにする
    • 「position: relative;」はブラウザのウインドウを基準きじゅんにする
    • 「position: fixed;」はもとからある場所ばしょを基準きじゅんにする
  • スクロールしても「.nav」をページのトップに表示ひょうじしたい場合ばあい、正しいただしいCSSはどれですか
    • .nav {position: fixed; top: 0; left: 0;}
    • nav {position: fixed; top: 0; left: 0;}
    • .nav {position: relative; top: 0; left: 0;}
    • nav {position: absolute; top: 0; left: 0;}
    • .nav {position: fixed; bottom: 0; left: 0;}

テキストの配布はいふ

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

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

中間ちゅうかん試験しけんの予告

来週らいしゅう、これまでの授業じゅぎょうの内容ないようを復習ふくしゅうする「中間ちゅうかん試験しけん」を実施じっしします。

  • スマホは使ってはいけません
  • 毎まい回かい配布はいふしている授業じゅぎょうのテキストは使ってもよいので、準備じゅんびしてください
  • 先にさきに学生証がくせいしょうの読みよみ込みをします
  • 時間じかんは30分を目安めやすとします

CampusAppから「2026年ねん度ど：Webサイト作成さくせいB」の知識ちしき問題もんだいを復習ふくしゅうしましょう。

CSSの実践じっせん

これまで学んだまなんだCSSの知識ちしきを使って、Webサイトを完成かんせいさせましょう。

CampusAppから「web-b-07.zip」をダウンロードして展開てんかいし、
「07.html」をVisual Studio Codeから開きひらきます。

指定していするデザインのリスト

「セレクタ」「プロパティ：値あたい」の形かたちでまとめています。

01「body」に「外のそとの余白よはく：0」「中なかの余白よはく：0」を指定していします
02「.header」に「中なかの余白よはく：16px」を指定していします
03「.header」に「背景色はいけいしょく：#cccccc」「背景はいけい画像がぞう：url(bg_grid.gif)」を指定していします
04「.header」に「位置いちの基準きじゅん：fixed」「上うえ：0px」「左ひだり：0px」を指定していします
05「.footer」に「中なかの余白よはく：16px」を指定していします
06「.footer」に「文字もじの色いろ：#eecccc」「文字もじの位置いち：中央ちゅうおう」を指定していします
07「.footer」に「背景色はいけいしょく：#eecccc」「背景はいけい画像がぞう：url(bg_grid.gif)」を指定していします
08「.header-menu」に「位置いちの基準きじゅん：flex」「文字もじの太さふとさ：bold」を指定していします
09「h1」に「文字もじの位置いち：中央ちゅうおう」「文字もじの影かげ：0px 5px 0px #ffffff」を指定していします
10「.catch-copy」に「文字もじの位置いち：中央ちゅうおう」「文字もじの太さふとさ：bold」「文字もじの間隔かんかく：8px」を指定していします
11「h2」に「文字もじの色いろ：#aa0000」「背景色はいけいしょく：#eecccc」「中なかの余白よはく：16px」を指定していします
12「img」に「width：120%」「位置いちの基準きじゅん：relative」「左ひだり：-10％」を指定していします
13「.box-ul」に「文字もじのサイズ：20px」を指定していします
14「.box-ul」に「背景色はいけいしょく：#eeeeee」を指定していします
15「.box-ul」に「中なかの余白よはく：16px」「枠わく線せん：dashed 5px #cccccc」を指定していします
16「.text-line-through」に「文字もじ装飾そうしょく：line-through」を指定していします
17「.text-display-none」に「表示ひょうじ：none」を指定していします
18「.link」に「表示ひょうじ：block」を指定していします
19「.link」に「文字もじの色いろ：#ffffff」「文字もじの位置いち：中央ちゅうおう」を指定していします
20「.link」に「中なかの余白よはく：16px」を指定していします
21「.header」に「背景色はいけいしょく：#aa0000」を指定していします
22「.totop」に「文字もじの色いろ：#ffffff」「文字もじの位置いち：中央ちゅうおう」「文字もじの太さふとさ：bold」を指定していします
23「.totop」に「表示ひょうじ：block」「幅はば：64px」「高さたかさ：64px」を指定していします
24「.totop」に「背景色はいけいしょく：#cccccc」を指定していします
25「.totop」に「位置いちの基準きじゅん：fixed」「下した：0px」「右みぎ：0px」を指定していします

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成B
目次