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

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

Webサイト作成B
目次

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

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

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

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

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

  • divの説明せつめいで正しいただしいものはどれですか
    • 改行かいぎょうが入り、箱はこに入れるいれるイメージ
    • 改行かいぎょうが入らず、箱はこに入れるいれるイメージ
    • 改行かいぎょうが入り、マーカーペンで線せんを引くひくイメージ
    • 改行かいぎょうが入らず、マーカーペンで線せんを引くひくイメージ
  • spanの説明せつめいで正しいただしいものはどれですか
    • 改行かいぎょうが入らず、マーカーペンで線せんを引くひくイメージ
    • 改行かいぎょうが入り、マーカーペンで線せんを引くひくイメージ
    • 改行かいぎょうが入らず、箱はこに入れるいれるイメージ
    • 改行かいぎょうが入り、箱はこに入れるいれるイメージ
  • Webサイト作成さくせいにつかう言語げんごの組み合わせくみあわせとして正しいただしいものはどれですか
    • CSSでデザイン／JavaScriptで動きうごき
    • JavaScriptでデザイン／CSSで動きうごき
    • HTMLでデザイン／JavaScriptで動きうごき
    • CSSでデザイン／HTMLで動きうごき
    • HTMLでデザイン／HTMLで動きうごき
  • クラス属性ぞくせいの正しいただしい書き方かきかたはどれですか
    • ＜div class=”class_name”＞＜/div＞
    • ＜div＞class=”class_name”＜/div＞
    • ＜div＞class_name＜/div＞
    • ＜div class_name＞＜/div＞
    • ＜div href=”class_name”＞＜/div＞
  • HTMLタグに名前なまえをつける理由りゆうはどれですか
    • 同じおなじ種類しゅるいのHTMLタグでもデザインや動きうごきを変えられかえられるから
    • 同じおなじ種類しゅるいのHTMLタグを見つけやすくするため
    • HTMLタグを箱はこに入れるいれるため
    • HTMLタグにマーカーペンで線せんを引くひくため
    • 同じおなじ種類しゅるいのHTMLタグは使えるつかえる数かずに制限せいげんがあるから

テキストの配布はいふ

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

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

色いろを数字すうじで表すあらわす

コンピューターでは、色いろを数字すうじやアルファベットで表しあらわします。

例れい）rgb(255, 0, 0)、#ff0000　など

RGBとCMYK

画が面めんでも印刷いんさつでも、3つの色いろを組み合わせるくみあわせることですべての色いろを表すあらわすことができます。

RGBRed、Green、Blue
画が面めんで出力しゅつりょくするときに使います
重ねかさね合わせるあわせるほど明るくあかるくなる
CMYKCyan、Magenta、Yellow、Key Plate
印刷いんさつで出力しゅつりょくするときに使います
重ねかさね合わせるあわせるほど暗くなる

Webサイト作成さくせいと色いろ

  • Webサイト作成さくせいでは、RGBで色いろを表しあらわします​
  • R、G、Bを組み合わせくみあわせて色いろを作るつくることができます
  • R、G、Bをそれぞれ０〜255の256段階だんかいで指定していします
  • 表現ひょうげんできる色いろの数かず：256×256×256＝16,777,216色いろ（約やく1,670万まん色いろ）

RGBの例れい

  • RGBの組み合わせくみあわせの例れい（基本きほん）
    • Rが0、Gが0、Bが0　→　Black（黒くろ色いろ）
    • Rが255、Gが255、Bが255　→　White（白しろ色いろ）
  • RGBの組み合わせくみあわせの例れい（2つが0）
    • Rが255、Gが0、Bが0　→　Red（赤あか色いろ）
    • Rが0、Gが255、Bが0　→　Green​（緑みどり色いろ）
    • Rが0、Gが0、Bが255　→　Blue（青あお色いろ）
  • RGBの組み合わせくみあわせの例れい（2つが255）
    • Rが255、Gが255、Bが0　→　Yellow（黄色きいろ）
    • Rが255、Gが0、Bが255　→　Pink（桃もも色いろ）
    • Rが0、Gが255、Bが255　→　Light Blue（水みず色いろ）

16進数しんすうで色いろを表すあらわす

  • 16進数しんすう（Hex：Hexadecimal）で色いろを表すあらわすこともできます
    • 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F、の16桁けた
    • 0がもっとも小さくちいさく、Fがもっとも大きいおおきい
    • 6桁けたの数字すうじの前にまえに「#」をつけます
  • HEXの例れい（基本きほん）
    • #000000　→　Black（黒くろ色いろ）
    • #FFFFFF　→　White（白しろ色いろ）
    • #FF0000　→　Red（赤あか色いろ）
    • #00FF00　→　Green​（緑みどり色いろ）
    • #0000FF　→　Blue（青あお色いろ）
    • #FFFF00　→　Yellow（黄色きいろ）
    • #FF00FF　→　Pink（桃もも色いろ）
    • #00FFFF　→　Light Blue（水みず色いろ）

いろいろな色いろがどんな数値すうちになるのか確認かくにんしてみよう

RGBカラーシミュレーター

練習れんしゅう：RGBとHEXで、以下いかの色いろを見つけてみましょう

  • Purple（紫むらさき色いろ）
  • Orange（橙色だいだいいろ）
  • Gold（金きん色いろ）

CSSを体験たいけんしてみよう

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

CSSを編集へんしゅうします。
このHTMLファイルでは、CSSの編集へんしゅうは＜head＞の中になかにある＜style＞タグの内容ないようを編集へんしゅうします。

全体ぜんたいの背景色はいけいしょくを変更へんこうするbackground: #;
↓
background: #cfc;
文字もじの色いろを変えるかえるcolor: #;
↓
color: #0f0;
文字もじの種類しゅるいを変えるかえるfont-family: sans-serif;
↓
font-family: serif;
文字もじの装飾そうしょくを変えるかえるtext-decoration: ;
↓
text-decoration: underline;
リストを横よこ並びにならびにするdisplay: inline;
↓
display: flex;

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成B
目次