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

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

Webサイト作成B
目次

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

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

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

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

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

  • RGBとCMYKの説明せつめいについて、正しいただしいものはどれですか
    • RGBは画が面めんで出力しゅつりょくするときに、CMYKは印刷いんさつで出力しゅつりょくするときに使うつかう
    • RGBは印刷いんさつで出力しゅつりょくするときに、CMYKは画が面めんで出力しゅつりょくするときに使うつかう
    • RGBもCMYKも、印刷いんさつで出力しゅつりょくするときに使うつかう
    • RGBもCMYKも、画が面めんで出力しゅつりょくするときに使うつかう
  • RGBで表現ひょうげんできる色いろの数かずはどれですか
    • 16,777,216色いろ
    • 256色いろ
    • 255色いろ
    • 1,670色いろ
    • 16色いろ
  • 色いろをHEX（16進数しんすう）で表しあらわしたときに、正しいただしい組み合わせくみあわせはどれですか
    • 赤あかは「#FF0000」、緑みどりは「#00FF00」、青あおは「#0000FF」
    • 赤あかは「#FFFF00」、緑みどりは「#00FFFF」、青あおは「#FF00FF」
    • 赤あかは「#F0F0F0」、緑みどりは「#0F0F0F」、青あおは「#000000」
    • 赤あかは「#RED」、緑みどりは「#GREEN」、青あおは「#BLUE」
    • 赤あかは「#AKA」、緑みどりは「#MIDORI」、青あおは「#AO」
  • Yellow（黄色きいろ）はどれですか。カラーシュミレーターを使って調べしらべてください
    • #FFFF00
    • #FF00FF
    • #FF0000
    • #00FFFF
    • #0000FF
  • Pink（桃もも色いろ）はどれですか。カラーシュミレーターを使って調べしらべてください
    • #FF00FF
    • #FFFFFF
    • #0000FF
    • #00FFFF
    • #00FF00

テキストの配布はいふ

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

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

CSSの概要がいよう

CSS＝Cascading Style Sheet

CSSは、Webサイトをデザインするための言語げんごです。

  • Webサイト作成さくせいにおいて、HTMLは情報じょうほう構造こうぞうを決めきめます
  • ​Webサイト作成さくせいにおいて、デザインは「CSS」で行いおこないます​

情報じょうほう構造こうぞう（HTML）＋デザイン（CSS）​＝情報じょうほう構造こうぞうが決めきめられ、デザインされたWebサイト​

CSSを書くかく場所ばしょ

  • CSSは＜head＞の中になかに＜style＞を置いて、その中になかに書きます
  • 他ほかにもHTML要素ようそに直接ちょくせつ書いたり、別にべつにCSSファイル（スタイルシート）の中になかに書いたりできます

HTMLタグ（スタイル）

<style>CSSを記述きじゅつできます
<head>
  <style>
    /* ここにCSSを記述きじゅつします */
  </style>
</head>

CSSの使い方つかいかた

CSSを書くかくときはいつも、「どこに？」「何をなにを？」「どうする？」と考えかんがえましょう。
それぞれ「セレクタ」「プロパティ」「値あたい」と呼びます。

名前なまえやる事こと
どこに？セレクタどのHTML要素ようそに対してたいしてデザインするか
何をなにを？プロパティ何なんについてデザインするか
どうする？値あたいどのようにデザインするか

セレクタを決めるきめる2つの方法ほうほう

セレクタは2種類しゅるいの方法ほうほうで決めるきめることができます。

  1. セレクタを決めるきめる方法ほうほう1：HTML要素ようそを直接ちょくせつ書いて決めるきめる
  2. セレクタを決めるきめる方法ほうほう2：クラス属性ぞくせいを使って、HTML要素ようそを決めるきめる
どこに {何をなにを: どうする;}
セレクタ {プロパティ: 値あたい;}

<style>
  /* HTML要素ようそを直接ちょくせつ書いて決めるきめる */
  h1 {color: #666666;}

  /* クラス属性ぞくせいを使って、HTML要素ようそを決めるきめる */
  .my_class {width: 120px;}
</style>
  • セレクタを書くかくとき、HTML要素ようそはそのまま書きます
  • セレクタを書くかくとき、クラス属性ぞくせいは「.（ドット）」をクラス名めいの前にまえにつけて書きます

CSS（HTML要素ようそを直接ちょくせつ決めるきめる）

どのHTML要素ようそに対してたいして {何をなにを: どうする;}
セレクタ {プロパティ: 値あたい;}

セレクタ＝body
プロパティ＝background-color
値あたい＝#eeeeee

<style>
  body {
    background-color: #eeffee;
  }
</style>

CSS（クラス属性ぞくせいを使ってHTML要素ようそを決めるきめる）

どのHTML要素ようそに対してたいして {何をなにを: どうする;}
セレクタ {プロパティ: 値あたい;}

セレクタ＝.box-ul
プロパティ＝color
値あたい＝#ff0000

<style>
  .box-ul {
    color: #ff0000;
  }
</style>

CSSの書き方かきかた

以下いかの2つは同じおなじです

<style>

  .box-ul {color: #ff0000;}


  .box-ul {
    color: #ff0000;
  }
</style>

CSSプロパティ

実際じっさいに使われているCSSプロパティを学んでまなんでいきましょう。
いずれもstyleタグの中になかに書きましょう。

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

color文字もじの色いろ
color: 文字もじの色いろ;

値あたいはHEX（#ff0000）やrgba（255,0,0,0）などで設定せっていします

<style>
  h2 {
    color: #0000cc;
  }
</style>

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

font-size文字もじの大きさおおきさ
font-size: 文字もじの大きさおおきさ;

値あたいはピクセル（20px）などで設定せっていします

<style>
  dt {
    font-size: 20px;
  }
</style>

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

text-align文字もじの位置いち
text-align: 文字もじの位置いち;

値あたいは「left」「center」「right」などで設定せっていします

<style>
  h1 {
    text-align: center;
  }
</style>

CSSプロパティ（文字もじの太さ）

font-weight文字もじの太さ
font-weight: 文字もじの太さ;

文字もじの太さは「normal」「bold」などで設定せっていします

<style>
  li {
    width: 320px;
  }
</style>

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成B
目次